How to implement custom post types and custom fields in WordPress

How to implement custom post types and custom fields in WordPress

Ben Stevinson's Layout avatar

WordPress isn’t just limited to blogging anymore — it’s a fully featured content management system capable of displaying and formatting any kind of content you give it. So let’s talk about two great ways to extend WordPress: custom post types and custom fields.

Custom Post Types

Looks like our test site, Monday Morning Mug (which we used in our email integration blog post), has a new problem to deal with. Our blog has gotten so large that we’ve hired a full-time coffee reviewing staff. They’ve been busy brewing coffee and writing up reviews. They’ve been posting these reviews to the blog, but our readers told us that all of these reviews are getting in the way of our “real” blog content. We need to make a separate place for our coffee reviews, but normal WordPress pages just aren’t going to cut it. The reviewers have also been suggesting that they’d love to have a place to easily store information, such as the country the coffee is from and tasting notes, on the website. This sounds like a perfect use for a custom post type, a WordPress feature that allows us to create new content sections on our site.

Custom post types are incredibly flexible and can be implemented for any kind of content: quotes, videos, and different shades of paint are all examples of what a custom post type could be.

We’re going to want to add a new section of our website in the /coffees/ subdirectory that is full of coffee reviews. This is going to require a bit of code wrangling, but it should be a relatively easy process.

Note: To do this, you’ll need to be able to edit the .php files in your WordPress install directory, which usually requires FTP/SFTP/SSH access. Make sure you have this before you proceed.

Every WordPress theme can utilize a functions.php file, which is located at:
/wp-content/themes/your_current_theme/functions.php
This file is generally used for theme-specific site changes as well as smaller custom site modifications, like the one we’re about to do.

Note: We will be adding code to the functions.php file, which will mean it is theme-specific. If you add this to your functions.php file and then change the theme on your WordPress installation, you will remove the custom post type from your website. You can maintain custom content types by utilizing a plugin, such as Custom Post Type UI.

1. Open up your functions.php file and add the following code at the bottom of the file:

function create_new_post_type() {
$labels = array(
'name' 			 => __('Coffee Reviews'),
'singular_name'  => __('Coffee Review'),
);
$args = array(
'labels'      	 => $labels,
'public' 	  	 => true,
'has_archive' 	 => true,
'menu_position'  => 5,
'description'    => 'Reviews And Types of Coffee',
'rewrite'     	 =>
array('slug' => 'reviews'),
'supports'    	 =>
array( 'title',
'comments', 'editor',
'thumbnail', 'custom-fields', 'revisions'),
);

register_post_type('Reviews', $args);
}
add_action('init', 'create_new_post_type');

Because we don’t particularly like utilizing code without an idea of what it does, let’s walk through what this code does.

Note: You may have noticed that $labels and $args are defined outside of the register_post_type() function even though they are just passed as arguments to that function later on. This method aids organization and readability, but you can condense both arrays into a single argument. It would just be more difficult to understand.

The $args array contains all of the specifics we need to define our new content type. Here’s what these do:

  • ‘labels’ – An array defining what we will call our content type. There are many more labels available that you can use, and a full list is available in the documentation here.
  • ‘public’ – A boolean that defines whether or not the post is viewable outside of the Admin panel.
  • ‘has_archive’ – If true, this boolean will create an archive of this type of custom posts, just like standard WordPress posts.
  • ‘menu_position’ – This integer changes where your custom post navigation button goes. The number 5 indicates that it will go directly below the posts tab. For a full list of numeric codes, check out the same documentation.
  • ‘description’ – Describes the post type.
  • ‘rewrite’ – This changes the slug to be “reviews,” which will help create a usable permalink structure. (Can also be boolean; check the documentation for more information.)
  • ‘supports’ – An array defining what native WordPress editing/post features are enabled. This one is pretty flexible, and there a lot more options, but we will be needing at least custom-fields and editor for this post.

The register_post_type() function is called next, which creates a new post type called Reviews using the array of arguments we just defined.

Finally, we have to call one last function to complete the process. register_post_type() should always be initialized by the action ‘init’. We can hook our new function to init by calling

add_action(‘init’, ‘create_new_post_type’);

Awesome! Now if we log into our WordPress admin panel, we should see a new tab on the left called “Reviews.”

coffee_reviews

2. Now that we have Reviews set up as a custom post type, we need to update the permalink structure so our readers can easily find our posts. Plus it makes our URLs much easier to read and SEO friendly.

3. Under the Settings -> Permalinks menu bar, you’ll find a bunch of common options for permalink structures. We’re going to change the custom setting to match the field /%category%/%postname%/

This means WordPress will generate URLs to match the category and title of our posts.

Note: This is a site-wide change and will affect your posts in other categories.

custom_permalink

Now let’s take a look at the URL of a post our reviewers wrote for the Sumatra Ketiara coffee:

sumatra_permalink

Fantastic! Check out that URL. We have reviews separated into their own directory and the URL is written in plain English. Now our readers know exactly what they’re going to get when they click on a link.

Custom Fields

Although our reviewers love the new Review section, they did ask us to incorporate something on the back end that allows them to enter common info that they write about every coffee, such as country of origin and tasting notes. This sounds like the perfect use of custom fields, which, luckily, are very easy to implement.

1. On an individual review editor, you will see the screen options button at the top right corner of the editor:

screen_options

which expands to this when clicked:

screen_options_dropdown

2. Check the Custom Fields box.

Below the editor, you’ll see the Custom Fields box that we just enabled.

custom_fields_blank

3. You can type in anything in both boxes; anything you type and add in the Name field will be saved for later use. Here, we list the area and country that our coffee is from.

custom_fields_region

Custom fields make it incredibly easy to standardize data that matters for a category across every post in a separate place. Now we just have to get that information to display on our review.

4. We’re going to add this code tag to one of our theme documents:

<br /><?php the_meta(); ?><br />

Note: In this example, we’re going to put this tag in our content.php file, but you will need to find a suitable location for your table of values to go. You should also style this tag to match the rest of your theme, which you can read more about here.

Checking back to our blog, we can see that our tag has inserted a list into our review.

custom_field_example

Swanky! Now our readers and our reviewers are both happy. We were able to build a custom post type that allowed us to save reviews about coffee, and we were able to give our reviewers a place to store all of their important information for every different review.

Comments ( 3 )

  1. Paola

    October 17, 2014

    Thank you so much for this post! It was a life saver for me right now.
    Regards.

  2. inward

    June 19, 2014

    Hello! Do you know if they make any plugins to protect
    against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any suggestions?

    • Ben Stevinson

      June 23, 2014

      Hey there!

      Security should definitely be a concern for every WordPress maintainer, and I definitely understand your worries!

      Two awesome services we'd recommend for WordPress security are VaultPress and iThemes Security Pro. VaultPress is actually a service of Automattic, the company responsible for WordPress, and iThemes Security Pro is developed by some very well respected WordPress leaders. Both are great options.

      Of course, if you're a Flywheel user, we proactively handle security for you and make daily backups, both of which we offer at no extra cost. On the off chance that your site is hacked, we will restore and fix it for free.

  3. Tony

    June 12, 2014

    I don't think a conversation about custom fields in WordPress can be complete without mentioning the Advanced Custom Fields plugin. The functionality of ACF makes developing sites (and sites which are almost apps) a breeze. For simple things, the built-in custom fields are good, but for anything beyond strictly string based key/value data, definitely check out ACF. http://www.advancedcustomfields.com/

Join the discussion