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.