How to Display Metaboxes According to the Current Post Format

Today I'd like to show you how to go further with custom metaboxes and specifically how to use them according to post formats.

We won't cover how to build reusable custom metaboxes as it has already been covered in a previous topic, so please refer to this article if you have any trouble with this.


First things first, if you've never heard of them before, post formats allow you to display a post in many ways, depending on which "format" of post you've set (image, link, gallery etc.).

To be sure that your theme is "post formats"-ready, check that it accepts different formats by looking for this function:

Now with this example, you'll be able to use two post formats: 'link' and 'quote'.

Two metaboxes with a simple text input inside

The idea is to display a metabox only if the right post format radio button is checked. For this, we are going to use hooks (PHP) and jQuery (JavaScript).

Step 1 Adding Custom Metaboxes

We'll define an array of metaboxes applicable to posts only (you can write it inside the functions.php file of your theme). There are different default options (location, priority) we won't focus on (again check the article on reusable custom metaboxes).

Define Metaboxes

Besides the fields we are defining, what is important to note in the code below is the display_condition variable that will be used to show/hide metaboxes according to the current post format. It matches the post format radio button's ID.

For this tutorial, we'll only add a basic text input for each metabox. Be sure to check the field key is unique or it won't work properly.

Now we'll create three functions to add, update/save, and show the metaboxes.

Create Metaboxes

Basicly, we're just using our previously defined options to add these metaboxes.

Show Metaboxes

So far, this is what we should have on a new post admin screen:

Two metaboxes with a simple text input inside

Save Metaboxes

Ok, now we're all set and are able to add and update post metas to each and every article and display them inside metaboxes. We can now dig into our problem: display the correct metabox to match the current post format.

Step 2 Display the Correct Metabox at the Correct Time

For this, we will use jQuery to handle show, hide and radio change events.

To add inline JavaScript only in the admin section, we can use this action hook:

The priority is set to 1000 to ensure jQuery has been loaded first.

We could set a more precise hook such as admin_print_scripts-post or admin_print_scripts-post-new, but for some reason, if doing so, jQuery is called after our script is printed.

Plus, if we were to add post formats to custom post types, it wouldn't be very convenient to add all possible configurations.

What we'll do is build (via PHP) a JavaScript string containing a list of IDs (the field key seen above) separated with a comma. It will be used to hide all metaboxes but the one matching the current post format.

We are also going to build (still via PHP) a JavaScript object we'll use to bind a post format radio button's ID to a metabox's ID.

Then we will display the right metabox after the page is loaded by selecting the current post format (checked radio button) and fading in the matching metabox (using the formats object).

For this, we'll define a function that will also be triggered every time a change event happens on the post format radio buttons.

And voila! Now you can switch post formats back and forth and you'll always have the right metabox displayed.


Post formats can be very handy to personalize the layout of any kind of post and displaying metaboxes accordingly is a great way to improve user-friendliness.

Plus it saves space on an already well cluttered admin screen. With a little more CSS and several fields, you can really improve the way you write posts and get a really intuitive interface.



Related Articles