How to Add Custom Meta Boxes in WordPress Posts and Post Types

Just last week, we showed you how to add custom meta fields to custom taxonomies in WordPress. That article brought our attention to another important topic of how to add custom meta boxes in WordPress posts and post types. We wrote about a plugin method of adding meta boxes and custom write panels using More Fields plugin, but the development of that plugin has stopped. We had linked to some good tutorials that showed how to do add custom meta boxes in WordPress from our Custom Fields 101 article however all those are no longer available. Therefore in this article, we will show you how to add custom meta boxes in WordPress posts and custom post types.

Note: This tutorial is for designers and developers.

Because the goal of this article is to show you how to create reusable meta boxes in WordPress, we will be utilizing a Custom Metaboxes and Fields for WordPress class (CMB) by Andrew Norcross (@norcross), Jared Atchison (@jaredatch), and Bill Erickson (@billerickson). All three of these guys are very well reputed in the WordPress community. They combined their efforts to create a powerful solution to make their job and other’s jobs a lot easier.

First thing you need to do is download the CMB class. Create a new folder and call it “custom-meta-boxes-wp”. Extract the CMB zip files in here.

Now let’s create a blank PHP file, and call it cmb-wp.php. This is the file that we will use to define our plugin and create all the meta boxes that we need. Below is an example content that you can place in this file:

01 <?php
02 /*
03 Plugin Name: Sitename Custom Meta Boxes
05 Description: Create Meta Boxes for Sitename.
06 Version: 0.1
07 Author: Syed Balkhi
09 License: GPL v2 or higher
10 License URI: License URI: http://www.gnu.org/licenses/gpl-2.0.html
11 */
13 //Initialize the metabox class
15 function wpb_initialize_cmb_meta_boxes() {
16     if ( ! class_exists( 'cmb_Meta_Box' ) )
17         require_once(plugin_dir_path( __FILE__ ) . 'init.php');
18 }
20 add_action( 'init', 'wpb_initialize_cmb_meta_boxes', 9999 );
22 //Add Meta Boxes
24 function wpb_sample_metaboxes( $meta_boxes ) {
25     $prefix = '_wpb_'; // Prefix for all fields
27     $meta_boxes[] = array(
28         'id' => 'test_metabox',
29         'title' => 'Test Metabox',
30         'pages' => array('page'), // post type
31         'context' => 'normal',
32         'priority' => 'high',
33         'show_names' => true, // Show field names on the left
34         'fields' => array(
35             array(
36                 'name' => 'Test Text',
37                 'desc' => 'field description (optional)',
38                 'id' => $prefix . 'test_text',
39                 'type' => 'text'
40             ),
41         ),
42     );
44     return $meta_boxes;
45 }
46 add_filter( 'cmb_meta_boxes', 'wpb_sample_metaboxes' );

The above example is very basic. It just adds a sample test meta box with a text field on “pages”. As you can see, that you have the option to customize the post type, and just about everything. CMB class supports the following field types:

  • text
  • text small
  • text medium
  • text money
  • date picker
  • date picker (unix timestamp)
  • date time picker combo (unix timestamp)
  • time picker
  • color picker
  • textarea
  • textarea small
  • textarea code
  • select
  • radio
  • radio inline
  • taxonomy radio
  • taxonomy select
  • checkbox
  • multicheck
  • Image/file upload

Here is the wiki page that will show you how to add all the field types. There is also an example-functions.php file that you can use to reference.

Once you are done, upload the folder in your plugins folder. Now, you can easily display these fields in your loop by using get_post_meta() function. Here is a tutorial if you want to display custom fields outside the loop.

Ever since we found this CMB class, we have not looked back. We use this on all of our projects and client projects as well. If you are a designer/developer, then you will find this to be really easy and help you improve your workflow. We hope that this tutorial has helped you add custom meta boxes in WordPress posts and post types.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s