| WordPress

Custom Metaboxes in WordPress with Metabox.io

Custom fields have been around for more than a decade, and custom meta boxes nearly as long. Although, it can feel like they’re fading from usefulness in this age of Gutenberg, they still fulfill a very important role in information management in WordPress.

Providing an intuitive interface for your users is key to building something that people will actually want to use.

Let's take a look!

 In the WordPress content editing screen information is grouped into boxes called metaboxes.  Take a look at this image:

Custom Metaboxes in WordPress with Metabox.io

On the right is a column of meta boxes.  If the small arrow in the top right is pointing down, then the box is closed.  If it’s pointing up, like in the Excerpt box, then the box is open, and you may edit what’s inside. 

Meta boxes may also be placed in various spaces on the page. There are some on the right in this image, but there’s also a large one in the bottom center.

Here’s an image of the old style of editor, which you may still see around occasionally.

Custom Metaboxes in WordPress with Metabox.io

Meta boxes are great because they provide logical collections of data about the post, keeping everything organized.


WordPress Custom Fields

When working on a Post or other Post Type, you can normally see all the default fields for things like title, date, etc., as you can in the screenshots above.  However, you can also simply make up some field names, assign information to them and WordPress will keep them.  These are called Custom Fields

Here’s a screenshot of a Post with the Custom Fields meta box enabled:

image4

These custom fields can be useful, but they’re not very user friendly. When making a new post, you can create a Name and Value, but then you make sure you spell the value properly on every post you ever want to use it on. It also has every custom field for the page, which can get quite busy rather quickly.


A Better Way: Custom Meta Boxes

A far more attractive and user friendly way to manage custom fields is by organizing them in Custom Meta Boxes. WordPress has a method where you can create a meta box, declare what page it goes on, and what fields should go inside. Here’s an example of a simple field:

Custom Metaboxes in WordPress with Metabox.io

This system makes a user interface that is much more intuitive, and makes it much more difficult to make mistakes. That said, while this API is great, and very powerful, it has some drawbacks.

  1. There’s quite a lot of code, and it’s relatively easy to make it insecure code. You need to be careful to sanitize both input and output.
  2. If you want complex field types (repeating fields, drag and drop options, etc.) then you have to code them all yourself. There isn’t a standard for it.

Using a Code Library

A code library is a set of reusable functions that allow you to build something complicated with simple tools.  Code libraries don't usually offer anything in the way of a user interface, but rather are a tool to allow you to make powerful things.  

Some common meta box libraries are Advanced Custom Fields, CMB2, and Metabox.io.  ACF is unusual in this list because it has a very powerful user interface that it expects you to use all the time. It does fit the “library” label though, because the user interface isn’t required once you’ve built your meta boxes.

I’m going to show you how easy it is to create a meta box with a field in it using Metabox.io, but first you should check out the docs on how to do it from scratch,

Metabox.io Example

I want to make a meta box with one field in it. The field is called “Showcase URL”, and the meta box should appear on a custom post type called ‘'bc4wp_showcase_cct'’.

function showcase_meta( $meta_boxes ) {

    	$meta_boxes[] = [
		// the title of the meta box
        	'title'  	=> esc_html__( 'Showcase Meta', 'bc4wp-showcase-cct' ),

		// a unique ID
        	'id'     	=> 'showcase_meta',

		// what post type it should appear on
        	'post_types' => [ 'bc4wp_showcase_cct' ],

		// whether it should be in the center or sidebar
        	'context'	=> 'normal',

		// how important this is
        	'priority'   => 'high',

		// whether things in the field should be saved on autosave
        	'autosave'   => true,

		// what fields we want in our meta box
        	'fields' 	=> [

			// first field
            	[
				// field type
                		'type' => 'text',

				// unique ID for the field
                		'id'   => 'showcase_url',

				// How you want to label the field
                		'name' => esc_html__( 'Showcase URL', 'bc4wp-showcase-cct' ),
],
        	],
  	  ];

    return $meta_boxes;

}

And then you run that function through a filter called rwmb_meta_boxes.

add_filter( 'rwmb_meta_boxes',  'showcase_meta'  );

 

Then you’ll end up with something like this:

Custom Metaboxes in WordPress with Metabox.io

This example showed how to make a simple text field, but there are over two dozen field types available.  If you visit the Fields area of the documentation you can see them listed on the left.

We also showed only a single field. To make more in a single meta box simply make more array elements under the ‘fields’ element.


If you build something cool with the information above, I’d love to hear about it!


About the author

Topher is an accomplished programmer, having written his own content management systems and managed some very large websites. He loves to help people and believes playing with WordPress is fun. Topher lives in Michigan, USA.