Custom Post Types and Theme Builders Part 9 Using Meta Box to Create a Custom Post Type

Introduction

WordPress has several options for creating custom fields and Custom Post Types. Meta Box is the second most popular option with more than 500,000 active installs and the base plugin is available for free from the WordPress plugin directory. This is the ninth tutorial in the series looking at Custom Post Types and Theme Builders. In the first tutorial In this series I looked at creating a Custom Post Type and adding custom fields using Advanced Custom Fields. In this tutorial I will walk-through the same process, but will be using Meta Box. I will use this one as a starting point for other tutorials that use Meta Box.

Video Version

Overview – Understanding Meta Box

Meta Box is different from the other main alternatives: Advanced Custom Fields, Pods, or Toolset. Meta Box is a WordPress custom fields “framework.” The base plugin that is available for free in the WordPress plugin directory has no user interface. Instead, it includes the basic programming functions that you can leverage using PHP code or with the many Meta Box extensions.

Meta Box is designed to be very modular and each type of functionality is separated into its own extension. This way you only install what you need. Also, many of the Meta Box features can be accomplished with code, and the modularity and support for code makes Meta Box a favorite for developers. As we will see, however, while the free version is light on user interface options, those are available in the premium extensions.

Here are the free extensions. I highlighted the Meta Box framework and Custom Post Types & Custom Taxonomies plugins.

And here are most of the premium extensions. Many of these add a user interface.

There is also a Meta box All in One extension as part of the Developer or Lifetime plans that gives you a list of all of the extensions which you can install and activate from its menu. You can purchase many of the premium extensions individually or as part of a bundle. Here are the bundle prices.

Meta Box has an extensive documentation library.

Installation of Free Extensions

I have a new test site. The free Kadence theme is installed and I imported a bunch of posts.

I have WP Reset Pro and WPVivid installed, which I used for site setup and to reset the site between testing sessions.

You install Meta Box the same way as any other plugin from the WordPress directory.

When you activate the plugin you get an information screen explaining that there is no user interface and that you can use the online code generator to create your custom fields.

The free extension for creating Custom Post Types is called “MB Custom Post Types & Custom Taxonomies”.

Creating the Custom Post Type and Custom Taxonomy Using the Free Extensions

When you activate the Custom Post Types & Custom Taxonomies extension you do get a menu item and a new tab is added.

Creating the Custom Post Type

Clicking on the Start Now button takes you to a tabbed interface for defining your Custom Post Type. I filled in the name values for my Books Custom Post Type.

The Labels tab lists all of the labels WordPress uses in various places and I left them all at their default.

The Advanced tab has the settings for the Custom Post Type. I added the Description, selected that I wanted the post type to show as a top level menu, where in the admin menu list I wanted it to show, the icon, and that I wanted it to have an archive. Having a drop down for where the menu item with show and the icons showing are nice convenience touches.

The Supports tab is where you check the features of the post type. In addition to the defaults, I checked Excerpt, Comments, and Revisions.

The Taxonomies tab is where you would select a taxonomy for the post type, but we have not created one yet for books.

I clicked on the Publish button to save, but notice that there is also that “Get PHP Code” button. If you click that then you get the code to add to your own plugin or functions.php file.

Creating the Custom Taxonomies

I go back to the Meta Box menu and click on the Start Now button to create a new Custom Taxonomy.

The General tab is where you supply the singular, plural, and slug names. My Custom Taxonomy is “Genres.”

The Labels list the labels WordPress uses, which I left at the default.

The Advanced tab has the settings. I checked to show the taxonomy terms in the admin columns for the post type.

The Post Types tab is where you can assign the taxonomy to your Custom Post Type. I assigned this one to Books and clicked the Publish button. Note again that there is the option to get the PHP code.

Adding Custom Fields

Now we have our Custom Post Type and Taxonomy defined but there is no interface for adding custom fields to the Custom Post Type. This can be something of a “what the heck” moment for new users. However, remember the instructions to go to the code generator to add custom fields. When you go to the Meta Box home page you see in the upper left corner some links to the online generators for custom fields, custom post types, and custom taxonomies. So, we didn’t have to install the extension for Custom Post Types & Custom Taxonomies, but it makes things easier.

Here is the starting screen for defining the custom fields. Notice that there is no on-screen help or links to how-to videos, though if you know to look, the documentation library has a section about the online generators. There are 36 field type options organized into Basic, Advanced, WordPress, and Upload categories. The Layout tab allows you to add dividers.

I started with a text field for the book author’s name. I gave it a name and a label. Note that you can set the fields as “cloneable.” which turns them into repeater fields.

The field user interface has an advanced tab. You can add text to appear before or after the custom field, defined a custom CSS class, or add custom attributes of key / value pairs.

I next added an Image field for the author’s photo. I thought that might be a Basic field type, but it is in the Uploads category. I gave it a name and label and set the maximum number of files to 1.

Then I added a URL field for a link to the author’s website.

Now, I had added the fields, I went to the Settings tab and gave the field group a name. The options are to show it on Posts or Pages, but we have a Custom Post Type, so that will need to be changed.

I then clicked on the Generate Code button to get the PHP code.

I copied that code to save it. Now, how to add it to the site? If you are going to use the theme’s functions.php file then you need to create a child theme so that this code is not lost when the parent theme is updated. Another option is to create a custom plugin and add the code there. For this tutorial, I chose different route and installed the Code Snippets plugin. This plugin lets you add code, such as the PHP code for our custom fields, from within the WordPress admin. I have a tutorial and video on using it.

I installed the Code Snippets plugin in the regular manner, went to its admin menu, and clicked to add a new snippet. I pasted in the code from the Meta Box website. I saw that there were several things that need to be fixed. There was now an extra opening PHP tag, I needed to give the function a prefix, and I need to set the post type where these fields would show. The post type has to match the “slug” in the Custom Post Type definition. In this case it is “book”. I also want this to run both in the admin, so I see the fields where creating records, and on the front, so they can be output for people to see.

Here is the edited version.

At this point, if everything is correct, we should see our fields in the editor when creating a new book record. We see the Genre taxonomy on the side and the metabox with the custom fields at the bottom. So, everything looks good.

Creating the Custom Post Type and Custom Taxonomy Using the Premium Extensions

With all of the steps and work involved in setting up the Custom Post Type, Custom Taxonomy, and adding custom fields, you may think I’m crazy to reset the site and start over! However, that is what I am going to do. Now, I’ll go through the process using the premium version.

Meta Box has a large number of paid extensions and you can purchase many of them individually, however, if you have either the Developer or Lifetime packages, these include all extensions, including one called “Meta Box AIO” or Meta Box All in One. You see, while developers appreciated Meta Box’s modular nature, the plugin list could get overwhelmed with the many extensions needed for an advanced solution. Also, the premium extensions offer a user interface and advanced features. So, I used WP Reset Pro to reset the site.

Meta Box AIO Installation

When I installed and activated Meta Box AIO there was a new menu item for “Post Types” created, but it has nothing under it. There was also a noticed that “This theme requires the following plugin: Meta Box”.

I clicked the button to install Meta Box and after it was installed, I went and activated it. When I did that, I got this menu.

The menu items are:

• Post Types – where you can create a Custom Post Type
• Taxonomies – where you can create a Custom Taxonomy
• Views – here you can create Meta Box Views, which are theme templates for post types. Meta Box Views will be the subject of a subsequent tutorial.
• Custom Fields – where you create field groups and custom fields.
• Templates – this is where you can define custom fields using YAML syntax
• Extensions – lists all of the extensions with the ability to enable or disable them
• License – where you enter your license

Here is the list of extensions. They are all enabled by default. So we have everything we need to create our Custom Post Type.

Creating the Custom Post Type, Taxonomy, and Custom Fields

I went to the Custom Post Type menu and clicked on create new. The screens are the same as previously for the free version as it is the same extension, but just installed for you. The General Tab.

The Labels.

The Advanced tab.

The Supports tab.

And the Taxonomies tab.

Creating the Custom Taxonomy was also the same as in the free version.

The Labels tab.

The Advanced tab.

And the Post Types tab. Now we can select the Book Custom Post Type to associate the new taxonomy with it.

I clicked Publish and then wen to the Custom Fields menu and clicked to create new. This was very similar to the fields and options of the online generator, but there were a few differences. I created a text field for the Book Author. Note that this version has Required, Read only, and Disabled options that the online version does not.

The Appearance tab.

And the Advanced tab. The Advanced tab has the options for adding conditional logic that the online version does not.

I then added the fields for the Author’s image.

And the link to the Author’s website.

Then I went to the Settings tab. As with the online version, you have to pick Posts or Pages, but now when you click Posts, you have the ability to select the post type. Also, this version has the option to save the field group using a custom table.

I clicked on the Publish button and we are all done. Here is the final result in the editor.

I added some book records. Note that we see the genre as an admin column.

And now we go view a book on the front-end. Note that the featured image is huge as there is no way to customize it to fit our Custom Post Type. Also, it is a limitation of WordPress that custom fields don’t show by default.

Discussion and Conclusions

I found Meta Box to be very capable for creating the Book Custom Post Type, the Genre taxonomy, and adding the custom fields. The modular nature and the reliance on the code generators with the free version means that it definitely is more of a developer tool. Developers who are used to doing things with code and who put lean performance above convenience will appreciate and prefer the modular and code output options. Average users however could get lost, especially with the online generator where there were no tutorials or help videos. Also, average users aren’t going to know what to do with the PHP code once it is generated. I guess the addition of a user interface for creating custom fields is one of the value added features to encourage users to make a purchase.

Using the premium version with the user interface was much easier. From an end user’s perspective, installing the All in One plugin makes the process more straightforward. The user interface for creating the Custom Post Type was nicer, in my opinion, than the CPT-UI plugin that is often used with Advanced Custom Fields. The Meta Box tabbed interface breaks up the long list of option while the other tool just lists them all on a very long page. Also, there were little touches, like the ability pick where in the admin to include the Custom Post Type menu item and pick the icon on screen which are a bit clunkier with CPT-UI.

The premium version has extra options. For example, the user interface for adding custom fields had conditional logic, required, and read only options that were not shown with the online generator. When saving the field group there was also the option to specify a separate table. These are powerful features not available via the online generator. The ease of use and additional options mean that most people would be happier using the premium version.

I was pleased with the premium version of Meta Box , the project has good documentation, and there is a lifetime version available, It is a good choice for adding Custom Post Types and custom fields, especially for power users and developers. So, what comes next? The fact that WordPress does not output custom fields on the front-end means that to show the author’s name, photo, and link to the author’s website we need to create a content template or some theming tool. Meta Box has a “Views” extension for this purpose and we will look at that in the next tutorial.