Adding meta boxes to a custom post type in WordPress

Adding meta boxes to a custom post type in WordPress

Online by J&S Code
12 August 2017 | HTML MySQL PHP - MySQL WP snippets, code & hacks | 2632 recognitions

We know that WordPress developers struggle to create meta boxes with custom fields. We know the Codex does not have enough information. We also know that advanced developers don’t like to use plugins with tons of unnecessary code, just to add a simple meta boxes. Same applies for heavy external metabox libraries.

What is a Custom Meta Box?

Custom meta boxes allow users to add additional information to posts, pages and custom post types, apart from the default set of information that WordPress takes using default meta boxes. Plugins and Themes can use custom meta boxes to take additional structured user input.

Custom meta boxes can also be added to the dashboard and attached to the admin interface. WordPress dashboard widgets are actually meta boxes.

In addition to the meta boxes, you can also edit the contents and appearance of the Admin Bar that is seen by those who are logged in to the admin interface.

Editor, Custom Fields, Featured Image, Categories, and Tags on a post, page or custom post page admin interface are default meta boxes. They are created by the WordPress core.

Custom Meta Box vs Custom Fields

Custom fields allow users to add key/value pairs of data to a post, page or custom post type. But meta boxes can have many varieties of input fields such as color picker, file upload, drop downs, and so on.

Adding Meta Boxes to Post Types Screen

To add a meta box to the any post type editing screen, the add_meta_box() is used and subsequently hooked to theadd_meta_boxes action.

The code below adds a metabox to the post edit screen. Take note of js_code_notice_meta_box_cb, the function that is called to display the form field(s) in the meta box. We’ll come to that later.

To add a meta box to a number of post types screens – postpage and a book custom post type; create an array of the post types, iterate over the array and use add_meta_box() to add the meta box to them.

To add a meta box to all existing post types and those to be created in future, use get_post_types() to get an array of the post types and then replace the value of $screen above with it.

Among the array argument used by register_post_type() for customizing a custom post type is the register_meta_box_cb in which its value is a callback function that is called when setting up the meta boxes.

Say we created a project custom post type with the following code:

Adding the add_meta_box() function definition for creating a meta box inside a js_code_meta_box_cpt_cb PHP function (value of register_meta_box_cb above) will add the meta box to the book custom post type edit screen.

And again, here is our example js_code_meta_box_cpt_cb function.

So far, we’ve learned the various ways of registering or adding meta boxes to WordPress. We are yet to create the js_code_notice_meta_box_cb function that will contain the form field of our meta box.

Below is the code for the js_code_notice_meta_box_cb function that will include a text area field in the meta box.

The save_post action hook handles saving the data entered into the text area when the post is saved as draft or published.

To put the data that would be entered into the meta box text area to use, we’ll display the data before the post content that it’s saved against is displayed.

Code Explanation

First, we created a js_code_notice_before_post function hooked into the_content filter with a $content parameter which contains the post content.

Inside the function, we include the global $post variable that contains the WP_Post object of the current post that is being viewed.

The global notice saved against a given post is retrieved by get_post_meta and saved to $js_code_notice variable.

The notice is then wrapped in a div and saved to the $notice variable.

And finally, $notice which holds the global notice is concatenated to $content which is the actual post content.

Below is a screenshot of a post with the global notice before the post content.

Wrap Up

In this article, we showed a number of ways to register meta boxes to WordPress administrative screens and how to restrict them to post types.

We also reviewed how to add form fields to a meta box and how to save data entered into it when a post is saved or published.

Finally, we covered how to put into practical use the data entered into a meta box.

I hope you’ve enjoyed the tutorial. Feel free to post questions about creating meta boxes in the comments.

Happy coding!

About The Author

J&S Code

Sorin C is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

Put here your thoughts

Your email address will not be published. Please complete all fields * correctly You may use these HTML tags: bold text, italicised text, and paragraphs.

On the same idea

Securing WordPress AJAX Forms Using Nonce
Online by stevenmedia | 7 August 2018

When creating a WordPress theme or plugin, AJAX is often used in order to enhance the user experience. In order to ensure security and protect your site against several types...

AJAX for WordPress
Online by stevenmedia | 7 August 2018

This tutorial is just a simple guide to understand the basic about using AJAX in WordPress. (more…)

Customizing the WordPress Query
Online by stevenmedia | 6 August 2018

One of the most powerful features of WordPress is the WP Query. It is what determines what content is displayed on what page. And often you’ll want to modify this...