Creating a custom post type with Meta Box

MB Custom Post Types extension installed

MB Custom Post Types extension installed.

In this tutorial we’ll build a custom post type named “Services” with the Meta Box plugin’s free extension Meta Box Custom Post Types. If your site doesn’t already have the plugin installed, search the WP Plugins directory through the WP Admin > Add New or download from the WP Plugins directory listing at https://wordpress.org/plugins/mb-custom-post-type/.

Meta Box Custom Post Type plugin menu

Meta Box Custom Post Type plugin menu

For docs and to read more about the Meta Box Custom Post Types extension visit it’s page on metabox.io at https://metabox.io/plugins/custom-post-type/.

Now let’s get started using Meta Box Custom Post Types extension!


 

Our goal in this project is to build a “Services Directory” that provides general information about GoldHat Group’s services in a way that generates leads from propective clients. We don’t sell these services directly so this needs to be outside of our shop where we sell WordPress plugins and some packaged services. This is more of a traditional agency approach to displaying services so that prospective buyers know what our capabilities are. We also want to tie our services pages to the any product packages that contain the given service, and reference projects in our project showcase that demonstrate the services we offer. Using a custom post type helps us organize this in a way making regular WP pages would not. And this principle of using CPT’s for distinct types of content is one we can apply in many situations when building websites, key benefits include:

  • Having an archive page (directory listing page) that lists all the posts made using the custom post type
  • Breaking the content management of the custom post types into fields by using meta boxes and fields
  • Setup custom taxonomies (categories and tags) to apply to the content
  • Manage content more easily in the WP Admin

 


Meta Box add new post type

Step 1 Basic Settings

Click “Add New Post Type” from the MB Custom Post Types menu. Enter the plural and singular names for your CPT into the Basic Settings form.

We’re using “Services” as the plural name and “Service” as the singular name. The slug will be generated automatically, and unless you prefer to change it you can leave that automatically set. In our case the slug is “services” which means posts will be published at https://goldhat.ca/services/[SERVICE-PERMALINK].

 

 


Meta Box CPT advanced settings

Meta Box CPT advanced settings

Step 2 Set Advanced Post Type Settings

Under advanced settings you can edit the labels, set an icon for your Custom Post Type and configure how the CPT will be handled by WordPress. There are a lot of options, the Meta Box Custom Post Type plugin provides defaults that will work well in most use cases. If you are want to learn more about the options available one of the best resources is the register_post_type() documentation at WordPress.org. What Meta Box CPT plugin does is organize these settings and then call the register_post_type() function, and most of the settings for that function seem to be represented in the MB Custom Post Types interface.

For our services CPT we set a custom icon, the “hammer” as a way to make this post type stand out in the WP admin menu.

After this step I like to save the custom post type so I don’t lose my work if for some reason the window is closed. The CPT is now published, but we have a few more steps left in setting up it up.


CPT Supports Settings

CPT Supports Settings

Step 3 Set the Custom Post Type Supports & Taxonomy Settings

On the right side of the post type editor screen Meta Box Custom Post Types provides the “Supports” meta box. The defaults are title, editor and thumbnail. We’ve added excerpt, comments and author support for Services.

Note that “thumbnail” means featured image, and this is the way WordPress describes it at the development level although in practice most content managers would be familiar with a post having a featured image. 

Meta Box Custom Post Types can also be used to build custom taxonomies, which are then applied to custom post types. Right now we’re just checking off the default Category and Tag used by posts (not shown in screenshot). We may build custom taxonomies for this post type later, but if so it’s easy enough to revisit the post type editor and attach them.


Caffeinate! Save your post type and grab a java it’s time to recaffeinate. In the next steps we’ll be making test posts and trying out our new post type.


Test post custom post type

Adding a test post with the new custom post type

Step 4 Adding test posts to our custom post type

Make at least 3 test posts so you can see how things look in the archive.

Our services list is now coming together with our test posts in place. Check the list of posts, and visit the single post (click view link for the post) to make sure permalinks are working correctly.

Meta Box custom post types list

Services list after adding test posts.