WordPress: Adding Some Class to Meta Boxes

For WordPress plugin developers, the metabox API generally proves to be invaluable. Meta boxes allow you to organize various bits of information, groups of options and more into nice, attractive, collapsible boxes rather easily. What’s more, these boxes can be dragged around the screen and reorganized without much hassle. However, one thing that you can’t do with meta boxes is to assign additional CSS classes to them.

However, in WordPress 3.2, you will be able to do just that. WordPress 3.2 will introduce a brand new filter that allows you to modify the list of classes that are applied to a meta box. In order to use it, you’ll need to know the slug of the page on which the meta box is being displayed and the ID of the meta box.

When you add a meta box using the add_meta_box() function, the code looks a little like:

add_meta_box(
    $id,
    $title,
    $callback,
    $page,
    $context,
    $priority,
    $callback_args
);

As you can see, the $id parameter is the first parameter you pass to the function, and the $page parameter is the fourth parameter you send to the function. I won’t spend much time going over what those arguments do, as I will probably go in depth about the add_meta_box() function in a different post.

As I mentioned above, you’ll need to have the values of those parameters in order to hook the new filter. The new filter is "postbox_classes_{$page}_{$id}". To use it, you simply need to use the add_filter() function to hook into it. A single parameter is passed to your callback function; the array of classes already being applied to the meta box. The passed array, as far as I can tell, is numerically keyed rather than associative.

All together, your metabox code might look something like:

add_action( 'admin_init', 'create_my_meta_boxes' );
function create_my_meta_boxes() {
    add_meta_box(
        'meta-box-for-me',
        __( 'My New Meta Box', $my_text_domain ),
        'build_my_meta_box',
        'post',
        'normal',
        'high',
        array( 'id' => $this->settings_name )
    );
    add_filter( 'postbox_classes_post_meta-box-for-me', 'add_my_meta_box_classes' );
}
function add_my_meta_box_classes( $classes=array() ) {
    /* In order to ensure we don't duplicate classes, we should
        check to make sure it's not already in the array */
    if( !in_array( 'my-meta-class', $classes ) )
        $classes[] = 'my-meta-class';

    return $classes;
}
function build_my_meta_box() {
    /* You would use this function to actually output the contents
        of the meta box */
}

One of the things you’ll be able to do with this new filter is to set your meta boxes to be closed by default. To do that, you would simply add the “closed” class to the array and return it.

Again, this filter won’t be available until you start using WordPress 3.2, but there’s no reason you can’t start adding it to your plugins and themes in anticipation.