How to group meta boxes on the post edit page

by

Thanks for the hint Bainternet, indeed this is very easy to implement with jQuery.

Example (the four meta boxes are closed for clarity) :

Example of four taxonomy meta-boxes grouped into a container meta-box

Here’s what I did :

var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j("#side-sortables").append('<div id="container_div" class="postbox meta-box-sortables ui-sortable"><div class="handlediv" title="Click to toggle."><br></div><h3 class="hndle"><span>Container Meta Box</span></h3><div id="container_inside" class="inside"></div></div>');
    $j("#my_metabox_div").appendTo("#container_inside");
    $j("#my_other_metabox_div").appendTo("#container_inside");
    etc...
});

I added the classes meta-box-sortables and ui-sortable to the container div, that way you can also reorder the boxes within the container (though it’s kind of tricky, the div jumps easily..).

This script is then called on the admin page we want with :

function add_admin_scripts( $hook ) {
    // load script on new post page
    if ( $hook == 'post-new.php' ) {
        wp_enqueue_script( 'group_meta_boxes', get_bloginfo('template_directory').'/js/group_meta_boxes.js' );
    }
}
add_action('admin_enqueue_scripts','add_admin_scripts',10,1);

Leave a Comment