LearnHow To Add Custom Fields to a Custom Post Type in WordPress

   
Avatar

Tracy Rotton
writes on November 25, 2022

WordPress has come a long way from its humble blogging beginnings. With the popularization of Custom Posts Types (CPTs), WordPress has emerged to become a fully-featured CMS platform. WordPress has evolved to be suitable for any kind of content you can throw at it.

However, when creating new CPTs, WordPress only offers you the standard fields (title, editor box, etc.) by default. The limited default feature set is inadequate if you need more than what’s available from a core Post or Page post type. We can use WordPress’ native “Custom Fields” meta box, but this requires naming and the field again for each new post. We want to keep things as simple as possible for our clients (and ourselves!), and if a CPT needs to keep the same fields for every post (as is likely), then we need a more robust method for adding those fields.

Native WordPress "Custom Fields" panel

WordPress has native custom field functionality, but it’s not intuitive and is difficult to use.

Start by creating a custom post type

There are great plugins out there that can help automate this task, such as Brad Williams’ Custom Post Type UI and Scott Clark’s Pods, but I have found that these add a layer of complexity to something that is actually deceptively simple. So when creating custom post types for a new project I prefer to go right to code.

I recommend creating a dedicated plugin for the project, something along the lines of “Project CPT,” and putting all the custom post type, custom taxonomy, and any related functionality there. Why not put this in my theme’s functions.php file? Well, I could, but that would blur the line between data and presentation. My client may decide to redesign his site many times, but he would probably prefer to keep the custom post types he’s building now. Since anything that can go into a functions.php file can be made its own plugin, I prefer to separate out that accordingly.

For more on this issue, and the debate the surrounds this approach, see WordPress Custom Post Types Debate — Functions.php or Plugins?.

For this tutorial, we have a project called “The Bookworm Blog,” for which we’re going to need a “Book” custom post type. The code for that is as follows:

<?php
/*
Plugin Name: Bookworm Blog Custom Post Types
Description: Custom Post Types for "The Bookworm Blog" website.
Author: Tracy Rotton
Author URI: http://www.taupecat.com
*/

add_action( 'init', 'bookworm_blog_cpt' );

function bookworm_blog_cpt() {

register_post_type( 'book', array(
  'labels' => array(
    'name' => 'Books',
    'singular_name' => 'Book',
   ),
  'description' => 'Books which we will be discussing on this blog.',
  'public' => true,
  'menu_position' => 20,
  'supports' => array( 'title', 'editor', 'custom-fields' )
));
}

But what if we want more fields than the WordPress standards? I’ve enabled the “custom-fields” capability here for illustration purposes, but WordPress native custom fields are not very intuitive for our client. So we need to turn to a third-party plugin.

Download, install and activate Advanced Custom Fields

Advanced Custom Fields is a great plugin that gives you a graphical interface for building custom fields. You create sets of fields and then assign those sets to your custom post types, or really any number of criteria (but we’ll get to that a bit later). It’s free in the WordPress Plugin Directory, although you can purchase premium features such as Repeater Fields, Flexible Content Field and more.

Advanced Custom Fields entry in the WordPress Plugins Directory

Advanced Custom Fields, available in the WordPress Plugin Directory, offers a more robust interface for creating custom fields than WordPress’ native custom fields functionality.

Create your field group

ACF offers a full range of field types you can use in your CPT, including simple text fields, a WYSIWYG editor, image, file upload, and more.

Our “book” custom post type will use the post title for the book title and the main editor box for a book synopsis. That leaves us needing to create the following fields:

  • Author: Text, with no HTML formatting
  • Publisher: Text, with no HTML formatting
  • Copyright date: Numeric (not a “date,” since we only want to list the year)
  • Cover: Image
  • Link to Amazon: Text, with no HTML formatting

In the “Custom Fields” tab of the dashboard, click on “Add New” and create a field group called “Books.” Click “Add Field” to create the fields above as needed.

The screen to add a new field to a field group in Advanced Custom Fields

ACF allows you to define a number of different field types in an easy-to-user interface for use with custom post types, specified post categories, specific pages, and more.

Assign your field group to the custom post type

In the “Location” section, you can establish the criteria on which the field group is to appear. For our purposes, we will choose “Post Type” is equal to “book,” but you can also apply field groups based on a specific page, posts with certain categories or tags, which page template is being used, etc. When necessary, the field group will dynamically appear when the appropriate criteria are met, such as assigning a post to a particular category.

Choose your display options

In the last panel, you can configure how you want your field group to be displayed, such as in a metabox or not or whether it should be displayed in the main column or in the dashboard’s right sidebar. You can also elect to have other default WordPress inputs to be hidden when the field group is displayed.

Publish

When you are satisfied with your field group, click “Publish” to activate it. Now your field group will appear on any add or edit post screen that meets the defined criteria.

In our example, we will end up with a post add and edit screen that looks like the image below.

The final Book custom post type add screen.

The “Add Post” screen for our “Book” custom post type. The custom fields we defined with ACF will appear along with the native WordPress fields.

Using Your Custom Fields

Using the custom fields you create in your template is easy. Whereas WordPress offers native template tags inside The Loop such as the_content() for content entered in the editor box, the_title() for the post title, etc., Advanced Custom Fields gives you the_field( 'field_name' ) (where ‘field_name’ is the machine-readable “Field Name” for your custom field) for displaying whatever field you wish. Should you need to return the field for further processing (rather than displaying it directly), use the get_field( 'field_name' ) function. Custom fields are also available as shortcodes.

Complete documentation on using your custom fields in your templates is available in ACF’s very thorough documentation.

Conclusion

Custom Post Types are an excellent capability of WordPress that allows it to do extraordinary things, but this power would be nothing without a robust yet intuitive method of adding custom fields. Fortunately, Advanced Custom Fields gives us the functionality that the WordPress core lacks, and can be an indispensable part of your workflow.

If you’re looking to take your programming skills to another level, check out our Techdegrees. Our faculty of tech professionals guide learners like you from mastering the fundamentals of coding to polishing the skills of a job-ready software developer. Try one of them out with a free seven-day trial today.

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

41 Responses to “How To Add Custom Fields to a Custom Post Type in WordPress”

  1. Abubakar on February 7, 2018 at 8:49 pm said:

    very helpful thanks for sharing

  2. my custom post values is not showing in a custom page but the values working in single.php please help me how can i disply in custom page

  3. Thank you so much for these tips.

    Loved it 🙂

  4. Hi,
    I try to create custom fields in wordpress custom post type but i struggled more any one can help me.

  5. Thank you so much! Exactly the solution I was looking for! Both the CPT, AND the ACF! Perfect! :) It’s like, you were reading my mind when you were creating it :)

  6. Don’t say it’s the right way to do something if you’re only downloading a plugin to do it for you.

    • Diego Juliao on September 2, 2016 at 7:53 pm said:

      I don’t see the problem. You don’t need to reinvent the wheel or the hot water if you already have it.

    • I Agree, using ACF is a bad habit when trying to use reusable plugins and code, you have to manually rebuild your custom fields… ‘right way’ should be 100% code based so its portable and reusable.

      • CleezyFoSheezy on March 30, 2017 at 5:43 pm said:

        I agree with you Phillip! Plus things get bloated and can cause performance issues when your site has a crap ton of plugins. I very careful of what plugins I use and this is why I’m on the fence about this one for 3 days now.

    • Matt Reider on April 20, 2017 at 6:05 am said:

      I agree! I was hoping to see how to do this within the functions.php file, not by just downloading a plugin…

    • Marcus on May 3, 2018 at 6:03 am said:

      Agreed. If you’re building a plugin, you don’t want those fields tied to ACF. It’s better to learn to do it yourself before you use plugins to do the heavy lifting for you.

  7. I’m disappointed that your “right way” goes straight to a plugin.

    This should be titled “easy way”.

    The “right way” for a project may exclude reliance on other plugins over integration to the custom post type plugin.

  8. Michael Sullivan on March 4, 2016 at 9:38 am said:

    Great tutorial. ACF is definitely the way to go. I can’t believe the number of people who are rejecting the idea of mixing some native functionality with a great plugin with super ratings and over 1,000,000 downloads. Yes, we don’t want to end up with a Frankenstein WP site, but we also don’t want to go reinventing the wheel either. The author’s concern for something more intuitive for THE CLIENT is completely valid.

  9. Anup Giri on February 6, 2016 at 9:55 pm said:

    My project shows only two screen options slug and custom type name whicj is testimonials. How can I add more options such as excerpt, author, and many more to the custom post type?? Please give me few tricks.

  10. Why not trying a ‘code solution’ ? Overloading with plugins can sometimes become a problem. And Advanced Custom Field is not the most lightweight of them..
    I personally used both methods and, despite the fact I found ACF really good, I will try to avoid that plugin in the future. Code is always better!
    I.e.: https://blog.teamtreehouse.com/create-your-first-wordpress-custom-post-type

  11. I applied this guide to a website that I did. Thanks. Great Work

  12. First you say the right way to do things is to hand code a plugin, but then you recommend using ACF? The intro and content seem to belong to different articles.

  13. Hi, Neat post. There is an issue along with your site in internet explorer, may test this? IE still is the market leader and a huge section of folks will leave out your great writing because of this problem.

  14. The first part of the post is pretty awesome, but the third party plugin dependent part is in my eyes worthless…

  15. If it wasn’t for ACF I’d be doing most of my work in Drupal. What some of the reviewers her e don’t seem to get is that it is a developers plugin. Not your typical WP plugin. You gotta write some php to get them meta values to work for you. CPTs with ACF makes wordpress a legit cms… a developer is pretty much only limited by their PHP skills from there.

  16. vixualizer on August 5, 2013 at 10:53 pm said:

    Great Tutorial 🙂

  17. Toni Romero on July 11, 2013 at 7:16 pm said:

    I’ve followed the instructions on here step by step but I cant seem to get it to work :/ The problem I’m having is that the “the_field( ‘field_name’ )” tags I’m adding to my template aren’t outputting anything :/ am I missing a step? :/

  18. The right way?…. the ‘quick and easy’ way.

  19. Tim Morris on June 22, 2013 at 9:38 am said:

    Great tutorial. My mind is continually being blown by how helpful ACF is. I just bought the repeater add-on and am looking forward to using it with clients.

  20. Joe Walker on June 19, 2013 at 2:46 pm said:

    Well this is a great tutorial but missleading what the title says, what I was looking for in an great and easy way to create custom post type fields ‘the right way’ not depending on third party plugins, perhaps third party js files that would be acceptable but making my plugin dependable to another seems not to be the right way.

  21. netyou on May 21, 2013 at 5:38 am said:

    Great tutorial!

    I have been using ACF for over a year now and it has changed my perception of wordpress as a CMS.

    Keep spreading the ACF love, maybe at some point some of it’s functionality and ease of use might be integrated into core WP.

  22. Thanks for this tips…

  23. Tracy! Thank you *SO* much for this awesome tutorial. I had been looking for an easy way to create a write panel for my custom post types… after two long days, I found this tut and voila! It all come together in moments!

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop