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

2 Views

My question is pretty much summed up in the title. I’m dropping a meta box in the New Post / Edit Post admin page, and I want to be able to set it up with tabs like the Categories meta box has. I assume there’s an easy way to hook into this, but I can’t remember how. Does anybody know?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. 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..