How to Create Custom Post Types in WordPress

Here is the best way to create custom post type in WordPress. Use Elementor to visually edit and style your dynamic content coming from ACF or other CPT plugins.

WordPress is not just a blogging platform. By using Custom Post Types, you can build all kinds of complex websites, turning WordPress into a full content management system.

There is a NEW way to work with custom post types. By utilizing Elementor, you can manage custom post types and build content that is custom fit to your needs. 

Use this method to build advanced WordPress sites:

  • Movie review sites
  • Real estate listings 
  • WooCommerce products

All this functionality is possible thanks to custom post types.

What Are WordPress Custom Post Types?

Post Types are “types of content”, grouped in a structured way within WordPress. Because WordPress’ most famous post type is called “Posts”, it is easy to make the mistake of thinking that Post Types are inherently about WordPress Posts. But a Post Type is a generic term that encompasses all types of content.

The Default WordPress Post Types

Currently, there are 8 default WordPress post types.

  • Post
  • Page
  • Attachment
  • Revision
  • Navigation Menu
  • Custom CSS
  • Changesets
  • User Data Request

Most users are familiar with the two most common post types: Posts and Pages. Although similar, Posts are time-based listings while Pages are hierarchical in structure, with Parent > Child relationships. Also, Posts make use of taxonomies such as Categories and Tags, while Pages do not, and Pages use Page Templates for display, while Posts do not.

Each post type is used for a specific purpose, for a particular type of content.

Although WordPress comes with a few default post types, there is an infinite number of content types that do not fit well into those specific post types. For that reason, WordPress allows users to create their own Custom Post Types, often referred to as CPTs.

You may have encountered Custom Post Types before. Many themes and plugins come with one or more Custom Post Types built-in.

Examples of a Few Custom Post Types

Some of the more common Custom Post Types you’ve probably come across include:

  • Movies
  • Testimonials
  • Reviews
  • WooCommerce Products
  • Events
  • Portfolios

Each of these defines a “type of content”, and each creates a simple way for users to enter information about that content in the standard “WordPress way”. A custom post type is accessed via the standard admin, with options such as Add New.

The editing screen looks very similar to the default Post and Page editors, as shown in this example of a Movie Custom Post Type.

When to Use Custom Post Type

Let’s imagine you manage an art gallery, in which you will be hosting events on a regular basis to showcase an artist’s work. You would like to be able to list these events on your website in an organized, easy-to-manage way.Another common use of a CPT is an eCommerce website. Products are a specific type of content that don’t fit into the Posts or Pages default post types. Products need to include many extra pieces of information, such as Price, Size, and Color.
WooCommerce Products as Custom Post Types
WooCommerce Products as Custom Post Type

Usually, you wouldn’t want these types of content to be intermixed within your regular post archive listings. By creating a custom post type for this content, it can have its own archive pages and feeds and can be organized and displayed independently of the default post types.

Custom Taxonomies and Custom Fields

A Custom Post Type can also include Custom Taxonomies and Custom Fields. While not required, custom taxonomies and custom fields can enhance and expand custom post types even more.

Custom Taxonomies

Just as the Post Type uses Categories and Tags taxonomies to help organize posts, a Custom Post Type can use its own custom taxonomies.

Note: A taxonomy is a classification of a group of things. In WordPress, taxonomies are used to group types of content together. “Category” is a classic example of a taxonomy that helps place posts into similar groups.

CPT for Movie Sites

A Movie Review CPT, for example, might use Genre as a custom taxonomy, to categorize movies into groups such as SciFi, Romance, etc.

An Art Events CPT might use Style as a custom taxonomy, to categorize the event into styles such as Impressionist, Modern, Pop Art, or Abstract.

Custom Fields

A Custom Post Type might also make use of Custom Fields. Custom fields store extra information about the content. Just as a blog post has an Author field, and an Excerpt field, a Custom Post Type might have several custom fields assigned to it as well.

Setting up an Art Events custom post type would enable you to quickly enter an event’s Name, Date, Time, Artist Name, and Artist Bio into custom fields created to hold this data.

A Book Review Website might set up the custom post type using Genre as its custom taxonomy. The CPT might consist of several custom fields, including Book Title, Author, Date of Publication, and Rating.

An eCommerce Site might use Department as a custom taxonomy. This would allow the site to group products together such as Electronics, Clothing, Housewares, etc. The Product CPT would also make use of custom fields to keep track of each product’s name, description, price, etc.

Because CPTs are separate from Posts and Pages, they can be displayed separately, organized by their own taxonomy categorizations, and filtered based on their custom fields.

The ability to create your own Custom Post Type enables you to use WordPress as a framework for building a website that fits your exact needs, opening up limitless possibilities for managing and displaying content.

Overview: Add Custom Post Types to Any WordPress Website

While it might sound complicated, the process of creating CPT content is actually quite simple.

The steps include:

1. Create Custom Post Types with code or plugin. Creating the CPT can either be done manually or using a plugin like CPT UI.

2. Set custom fields for the CPT. We will show how this is done using ACF.

3. Create demo content. In order to display the CPT content on your site, you need to add some demo content to your site. 

4. Embed the CPT content in your single and archive templates. Adding the dynamic content is done using Elementor’s Theme Builder templates.

Once you finish these steps, your custom post type content will be ready for publishing, and you can display it on any chosen CPT.

Create Custom Post Types With Code

To register the custom post types in WordPress, you can either write the code manually: 

function create_post_type() {
    register_post_type( 'elementor_product',
        array(
            'labels' => array(
                'name'=> _('Products'),
                'singular_name' => _('Product')
             ),
            'public' => true,
            'has_archive' => true,
        )
    );
}
add_action( 'init', 'create_post_type' );

Create Custom Post Types With Plugins

Or use one of the three most popular plugins designed to make the process much easier:

  • CPT UI. This is one of the most popular plugins for adding CPT. Once added, CPT UI will be used to add the custom post type. A different plugin, ACF, will be used to add the custom fields.
  • Toolset Types. Types is part of a whole list of Toolset addons, that all play a role in building listing, membership and other types of advanced sites using CPT. Toolset has a wider range of solutions than other CPT plugins. For example, you can use it to create an advanced search form for your CPTs.
  • PodsThis is another plugin that gives you the ability to add custom content that includes custom post types and custom fields.
These plugins differ in various ways. If we try to summarize the difference, Toolset and Pods are better suited to use when you need to integrate conditions and relationships between CPTs and custom fields.

Using CPT UI

Before you start, go ahead and install two plugins: CPT UI. 

6-dashboard of cpt ui with recipe

Once you install CPT UI, go to the plugins dashboard. Add all the required fields:

Post type slug: recipe
Plural label: Recipes (notice the capital R)
Singular label: Recipe

Under ‘Additional labels’ you can customize the names of other native WordPress fields, but for this example we’ll leave it as the default.

Under ‘Built-in taxonomies’, check Categories and Tags, so we can later order our recipes under parent categories and allow the user to browse through recipes using tags.

That’s it regarding our CPT, now hit ‘Add post type’. You’ll notice a ‘Recipes’ CPT appearing as a new WordPress dashboard item.

If we go into that item, we see it behaves similarly to Posts and Pages, and I can already add a new recipe. 

The next step is to add custom fields to make our CPT structure unique and different from posts and pages.

Create Custom Fields Using ACF

Now, go ahead and install ACF. To embed ACF custom fields in Elementor, you have to enable the beta version of ACF 5. 

  • Under Dashboard > Appearance > Editor > Theme Functions, add this code:
/**
 * Enable ACF 5 early access
 * Requires at least version ACF 4.4.12 to work
 */
define('ACF_EARLY_ACCESS', '5');
  • Then, you will get a notification to upgrade to ACF version 5. Run the upgrade, and then click on the notification to update your database.
  • Now, under Dashboard > Elementor > Settings, make sure ‘Recipes’ is checked as a supported CPT. This is how to enable Elementor on the custom post types you are creating.
  • In the WordPress dashboard, Under ‘Custom Fields’, add a new custom field and call it ‘Ingredients’.
  • Set Field label to ‘Ingredient’. The field name will automatically get filled as ‘ingredient’.
  • Set the field type to ‘Text area’.
  • Under Location, set a rule to show this field group if Post Type is equal to Recipe.
create custom fields with acf

This example of building an ingredients field shows how to list custom fields using the text area field type. This is handy in many occasions where the custom field comprises of a list of information. If you’re starting out with CPT, it is recommended to study the various field types and be sure to choose the right one for each custom field you create.

Create Demo Content

Demo Content of New Recipe Using CPT

This is the stage where we add the demo content to our newly added CPT. Add a new recipe, and call it ‘Pancakes’. Under the ingredients field add the ingredients, separating each ingredient with a new line.

Displaying CPT Content in Single & Archive Templates

With Elementor and custom fields you can create dynamic pages without the use of code. By utilizing Elementor’s Theme Builder, you can create Archive and Single Post templates for your Custom Post Types, and you can easily select your custom fields from any Dynamic Content list to display them anywhere you wish. And of course, it is all easily styled, the Elementor way! 

Create a single page Template for a Custom Post Type

To get the custom post types to show on blog pages, it’s important to understand how CPT enters into different areas of your site. 

If we take the recipe site example from before, each recipe can be published inside your blog. Instead of the standard format of the blog post, you are using CPT to create a custom recipe structure for your blog posts.

Here is the process you should follow to achieve this:

  • Create a new single template, and add a new text widget. As an example, we’ll use the heading widget. 
  • Click on the dynamic icon, and choose ACF Field. Click on it again, and under ‘key’, choose ingredient. The ingredients you added earlier will now appear.
  • Now, all that’s left is to publish. Under the conditions choose ‘All Recipes’ and hit publish again. 

Here in Elementor, we released several tutorials which show the process of styling CPT content and custom fields using the power of the Elementor editor. These tutorials show how to add css styling to WordPress custom post types and taxonomies without having to manually code the CSS. For designers, this is a much more streamlined process of dealing with dynamic content, and saves a lot of time, as well as guesswork.

Create An Archive Page Template For A Custom Post Type

CPT Archive Template

Elementor’s Archive template can be used to setup archive pages for any custom post types. 

To create a custom post types archive page that displays custom fields, you need to use Elementor’s Custom Query Filter functionality. Bare in mind that this is oriented towards advanced developers. We wrote a tutorial about this in our Developers area, so be sure to check it out.

Conclusion

In this post, we presented a much simpler and more streamlined way to add custom post types to WordPress. This method offers a complete workaround to manual coding, and enables designers and developers to develop a better workflow for creating custom made websites for their clients.

Liked This Article?

We have a lot more where that came from! Join 715,710 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Donna Cavalier
Donna Cavalier
Donna Cavalier is a novelist and WordPress specialist, who has been in the website design and online marketing industries since 2003.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

58 Responses

  1. Do you have any articles that talk about working with the integration with ACF (Advanced Custom Fields) plugin when concerning Custom Post Types?

  2. Good article but a slight correction. You cannot use ACF (Advanced Custom Fields) to create a CPT. ACF is used to add Custom Fields to an existing Post type. Personally I use the plugin Custom Post Type UI to add a CPT, then ACF to add the additional custom fields if I have any.

    1. That’s an excellent point, Larry. You’re right, ACF is just for adding custom fields, and most people use CPT UI plugin for the custom post type creation portion. I should have mentioned that, so thanks for bringing it up!

  3. Great article Donna, made the whole taxonomy stuff a lot clearer to me. I also posted this question in the No stress group but do you know how to make facetwp work with elementor? In the group they said to use facetwp as I need to make a filterbar for real estate, or do you maybe have another good solution to make ACF and elementor posts filterable on price, sort accommodation and sale or rent? Thanks for this article, it is really helpful

  4. Be aware that the use of CustomFields here is quite restricted
    There is no way yet to define conditions for outputting the CFs or to output confitional texts…
    I hope this will be realized in Elementor soon, in the moment you still havevto rely on theme page templates for more complex content

  5. Thank You for your article,
    I’m in trouble from a lot of days with the search action.
    how do you suggest to implement this basilar action that, for me, appear to not work.
    I’ve created followed the tutorial https://www.youtube.com/watch?v=f1tN4em56uA&t=646s and i’ve crated a test site how that on tutorial.
    I’m not able to search the post or to show a category page on that to see all the specific post.
    Someone can help me ?
    Thank you

  6. Hi Donna,

    and for archive template, i will like use a flip widget or other widget, how can to do this ? with ACF

  7. Hey there. Is Elementor working on conditional display options for data/modules/etc based on dynamic data values? Maybe also data manipulation(changing the way data is displayed vs how it’s stored)? Thanks.

    1. see my comment above… I had a hard time to find out about the priority of templates and theme-page-templates and it ended up in writing all the conditions in the theme-page-templates as we did before

      I think this part of Elementor has to ripen… it is not really dynamic to output every value without any condition…

      and be aware to deactivate your templates when you want to use theme-page-templates, there will be some confilicts otherwise…

      I whish this would be explained more in detail in the documentation.

      I know Elementor is growing more and more and I trust in it and like it as it is already but I whish there wouldn’t be so big announcements… ;=)

      Cheers, Connie

  8. Hi Donna, Thanks for the article. Would you have an idea how one could insert multiple pieces of dynamic data in a native Elementor text widget such as the items in bulleted list a list, for example? I’ve achieved this with Enhanced Text widget but it’s formatting options aren’t that great.

  9. Feedback to the current unsatisfactory “Toolset Elementor” Integration Implementation:

    I’m currently a very convinced toolset & elementor user and use it in all my customer projects. The stronger cooperation between Tools and Elementor it’s very good and necessary, so not only ACF or POD as a “Dynamic Fields” is supported! An important step …

    But this was already positive part of the feedback, because the current implementation of the Toolset integration into Elementor is really unsatisfactory:

    1) Not all kind of custom fields in Types are supported in Elementor “Dynamic Fields” and therefore they are not listed / displayed in the Dropdown List of the Dynamic Field of Elementor e.g. URL fields. This is a totally inadequate & incomplete (technical) implementation of Toolset in on Elementor side.

    2) As the selected Dynamic Field in the Elementor Template is a Toolset Types customer field [“WYSIWYG”, “Single Line”, “Multi Line”] and these fields contain “Embedded Media” content links or “Shortcodes” as content, then these “Embedded” or shortcode content simply will not appear/shown on the website. Also here, I had to undo all the changes made in a customer project after switching to use Dynamic Fields instead of Toolset shortcodes, because I assumed that the quality assurance processes would find such a kind of serious mistake …

      1. Hi Donna,

        Thanks very much for your helpful notice: “… log them on the github page at https://github.com/pojome/elementor/issues …”

        But after the detailed discussion with “Toolset” Support I have the impression: with this missing functionalities I have identified, I found out some deap archtictional issues, how the Integration of Custom Post/Page Types is implemented from Elementor side … ;-(

    1. “Also here, I had to undo all the changes made in a customer project after switching to use Dynamic Fields instead of Toolset shortcodes, because I assumed that the quality assurance processes would find such a kind of serious mistake …”

      It’s a pretty straightforward process to become part of the beta process; if you have strong feelings about making things work and test out well in a certain way, I’m sure your feedback would be appreciated. I know I’d be on top of that if there was ever going to be support for Carbon Fields.

  10. Hi Donna,
    It’s a great tutorial. I have 1 question and I think most of dynamic templates need it:

    As I’m working on a directory site, the custom post type (called Place) has many custom fields. I can show them all as in your tutorial but sometime, a Place doesn’t has all information on custom fields so it will show some thing like this in the front-end:
    – Address: 123 abc street
    – Website:
    – Email: [email protected]

    As you can see it doesn’t has information of website and I want to hide the text “- Website:” when there is no information for it. How can I do it with Elementor?

  11. I have been trying to figure out how to index Elementor Pages to be searchable via a live Ajax search. The plugins i have attempted to use are Ajax Search Pro: https://ajaxsearchpro.com/

    and SearchWP: https://searchwp.com

    Ajax Search Pro will let me select the Elementor My Template library and other associated elementor post types, but text from the pages it claims to have indexed do not appear in the search results.

    Searchwp does not even list any Elementor pages, post types etc whatsoever. Is there a method to get these plugins working? I would like to be able to integrate all of my content within one search box, and these plugins easily allow me to do so.

  12. Is there a way to bring in custom fields through the Posts Element/Module. If I created an Events custom post type but I want a landing page or feature set on the Homepage to show the Events (title, description, date, button) I am able to bring in the image, title and button but not the custom fields I created for description and date

  13. Happy New Year Ms Donna. There is no way to display list of taxonomies. I could do it but displaying it as menu. I wish you guys can include it in future versions. Also It would be great you do a filtering addon and search system for CPT dynamic content. Thank you

  14. Hi Donna,

    I am looking for displaying custom fields on the archive templates and I feel quite happy on reading your article. But the article you attached at the end is not what I am looking at. It is very disappointing to see Elementor plugin not able to create a custom archive template for CPT. CPTs are very famous nowadays and I wish you could implement a feature in near future.

    It is better to remove the attached article at the end as it is misleading everyone.

  15. Hi
    I am trying to add ACF fields to a CPT (EDD Downloads)
    The video you reference doesn’t have the same menu options in the back end.
    The options for adding ACF Fields don’t follow
    In fact I don’t know where to go to find the information to make this most simple task work.
    Hope you can help

  16. Thank you for sharing this detailed guide regarding WordPress custom post types. Can you help me to include Gutenberg editor using custom post type? I am trying to add an Media but I am having an issue while implementing the code. I am having an unknown error. Can you help me out in this code as I have seen this from the tutorial https://www.cloudways.com/blog/gutenberg-wordpress-custom-post-type/

    function cw_post_type() {
    register_post_type( ‘portfolio’,

    array(
    ‘labels’ => array(
    ‘name’ => __( ‘Portfolio’ ),
    ‘singular_name’ => __( ‘Portfolio’ )
    ),
    ‘has_archive’ => true,
    ‘public’ => true,
    ‘rewrite’ => array(‘slug’ => ‘portfolio’),

    )
    );
    }

    add_action( ‘init’, ‘cw_post_type’ );

  17. Hi, I am trying to add radio button options(so that people can be able to choose specific shoe sizes and T-shirt color) on the front end of my woocommerce website on the product tab. I’ve tried using ACF but I can’t seem to find my way around it. Am using elementor to create the website. How can I go about this?

    1. You won’t want to use ACF (or Elementor for that matter) to add these options to your products. What you’ll want to do is make these products Variable Products. This is a WooCommerce feature. You can read more about Variable Products at https://docs.woocommerce.com/document/variable-product/ . You’ll need to add attributes (like size and color) and then variations of those attributes (like small, medium, large and blue, black, and green) within the WooCommerce options of the product. I know it took me a while to be able to wrap my head around Variable Products and all the ins and outs of variations, but hang in there. Eventually the light bulb came on for me, and I “got it”. I remember the first thing that I missed when reading the instructions was that I didn’t change the first option from Simple Product to Variable Product and I couldn’t figure out why I couldn’t find the attributes and variations options. LOL. I guess i skimmed the instructions too quickly. Another thing I didn’t notice for the longest time was that I could click the little arrow to the right of the variations to open each one and set price, stock level, etc. for each individually. Sorry, probably more info that you wanted, but I just remember vividly how difficult it was for me to get that going. I think I finally watched a how to video on Youtube somewhere on how to set up WooCommerce variable products and that finally made everything click. Hope that helps!

  18. It seems that custom post types created with CPT UI will not show up as an option when creating a single post template.

  19. This is a super capability.

    I’m using it a lot on a new website I’m working on. For example, we have a “podcasts’ library where we create a custom post type called “podcasts” and then manage all our podcasts in one area, with ACF fields “iFrame Audio urll” where we fill in the podbean iframe url. The Single template in Elementor then displays all of our podcasts beautifully.

    Here’s my problem.. in ACF you can add custom fields like “text” or “text area” or “wysiwyg”. But this is not good enough for one of our CPT types… they’re video application notes, where there is a video on each post (simple URL for Youtube mapped using the video player – dynamic – ACF – video_url field). But each application note post also has rich content associated with it.. much richer content than WYSIWYG.

    I’d like a field called “elementor content” which bring up the elementor editor where you can edit the content, and then inside the single page template there is a placeholder where that is filled in.

    There is a workaround using shortcodes and templates. Create a template for each rich content “blob” needed, then create an ACF (e.g. “content” type text) in the group used by the CPT. Then assign the template shortcode into the ACF field for each custom post. Very awkward.. we end up with one new template for every single post.

    So embedding it inside as a custom field type where it just “works” would be much more convenient…. the custom field in the post edit would have a “edit with elementor” beside the field name….

    Unless I’m missing something? Is there another way to do this that does not explode my templates with a new template for every post required?

    I realize i’m trying to merge posts with pages, but there is a lot of standardization in the ingredients of a post and post/single template I’m trying to leverage. Just the “content area” that i want to edit with elementor.

    Thanks
    Terry

  20. Really helpful! One thing I can’t get to work is that I have some fields that are for URLs but they don’t show up in the theme builder dynamic option. Is there something I’m missing?

  21. I used ACF version 5.8.3, do I need to install this code?

    Under Dashboard > Appearance > Editor > Theme Functions, add this code:

    /**
    * Enable ACF 5 early access
    * Requires at least version ACF 4.4.12 to work
    */
    define(‘ACF_EARLY_ACCESS’, ‘5’);

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 715,710 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.