Is there an easy way to make a meta box have the tabs like the Categories meta box has?

by

Here’s a very basic example..

/*
    Code assumes it will be in the theme functions.php file
    Update the enqueue path if using it elsewhere
*/
add_action( 'add_meta_boxes_post', 'add_post_metabox' );

function add_post_metabox() {
    wp_enqueue_script( 'mytabs', get_bloginfo( 'stylesheet_directory' ). '/mytabs.js', array( 'jquery-ui-tabs' ) );
    add_meta_box( 'examplebox' , __('Example box'), 'my_example_metabox', 'post', 'side', 'core'/*,array()*/);
}

function my_example_metabox() {
    ?>
    <div id="mytabs">
        <ul class="category-tabs">
            <li><a href="#frag1">Tab 1</a></li>
            <li><a href="#frag2">Tab 2</a></li>
            <li><a href="#frag3">Tab 3</a></li>
        </ul>
        <br class="clear" />
        <div id="frag1">
            <p>#1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div class="hidden" id="frag2">
            <p>#2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div class="hidden" id="frag3">
            <p>#3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
    </div>
    <?php
}

The jQuery for the mytabs.js referenced in the enqueue.

jQuery(document).ready(function($) {
    $("#mytabs .hidden").removeClass('hidden');
    $("#mytabs").tabs();
});

NOTES:

  • Used inside a plugin, the enqueue should call plugins_url( '/mytabs.js', __FILE__ ) in place of the get_bloginfo string.
  • The anchor link for each tab should match the ID of the content element it refers to, eg. frag1, frag2, etc.
  • A hidden class is applied to each content DIV after the first so they are hidden on page load(else you’ll noticed a brief jump in the page), the class is removed after page load, else they’ll stay hidden.
  • The top action should be updated to reflect the post type you want to effect add_action( "add_meta_boxes_YOURTYPE", 'add_post_metabox' );, i used post in the example..
  • You’ll need to render the metabox in the side in order to utilise existing WordPress CSS which positions the tab LI elements inline(you can always load you’re own stylesheet to deal with the CSS though).

See here for more info on how to configure the tabs script.
http://docs.jquery.com/UI/Tabs

Hope that helps..

Leave a Comment