How to group meta boxes on the post edit page

Question

I suspect that this is not possible right now, but oh well.. I'll ask, maybe one of you has some intersting thoughts to share.

So let's say we have the following taxonomy terms meta-boxes on our post edit page :

• Team accounting
• Team supergurus
• Countries
• Team developers
• Favorite ice cream

Wouldn't it be nice to be able to groupe the three "Team" meta-boxes into one "container" box called "Teams" ? This would be just and empty meta-box with a title, containing the three taxonomy meta-boxes.

The goal is to be more user friendly and keep the similar meta-boxes grouped together (it can become really confusing when you have a lot of taxonomies)

Do you think this is doable ?

Answer 1

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

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

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);