Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
look at the mark-up the categories meta has, use the same html structure and classes, and you should have tabs –  onetrickpony Dec 21 '10 at 0:49
    
Thanks -- did that and I think the JS is (rightfully) using IDs to hide the inactive tabs. Can't duplicate IDs, so I may need to just write my own JS. –  Jason Rhodes Dec 21 '10 at 1:55

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

share|improve this answer
    
t31os, i have change the wp_enqueue_script to: wp_enqueue_script( 'mytabs', get_bloginfo( 'template_directory' ). '/js/mytabs.js', array( 'jquery-ui-tabs' ) ); and i have put the mytabs.js to the /js/ folder in the root of the theme but it don't work –  Philip Dec 24 '10 at 7:46
1  
@Philip - The code is a working example, check the output source and verify the enqueue paths are being produced correctly.. (or that they've been output all together).. –  t31os Dec 24 '10 at 10:59
    
i make a mistake...sorry for any confusion! everything is working fine. –  Philip Dec 24 '10 at 11:09
    
@Philip - No problem mate, no harm done.. ;) –  t31os Dec 24 '10 at 11:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.