Building a website with WordPress is mostly a simple and straightforward process. WordPress makes it easy to add new pages and blog posts that make up your site. Feature-rich page builders like Divi make it easy to control the layout and fill these pages and posts with content like images, contact forms, sliders, etc. If all you need are a handful of pages and blog posts, you won’t find a much easier solution.
What many new users to WordPress don’t realize though is how much more it can do with very little effort. Custom post types allow you to create a highly customized website that serves you and your visitors better than the default pages and post types can alone. And they’re so easy to create!
What are Custom Post Types?
WordPress comes with two primary post types for adding content to your site – pages and posts. But it also has a method for adding new post types using the register_post_type() function. We’ll show you much easier ways to add custom post types below. The point is to understand that it’s even possible to add your own custom post types.
There are several examples of custom post types you may already be using and don’t even know it. For example, the Divi theme adds a “project” post type to WordPress. These projects can then be displayed using the built-in portfolio modules or a more advanced module like our Divi FilterGrid plugin. Lots of plugins also add additional custom post types: WooCommerce (products), Easy Digital Downloads (downloads), The Events Calendar (events), WP Job Manager (jobs) and so on.
These plugins all use the register_post_type() function to add new post types to WordPress, and for good reason. Once a new post type is created using this function, it inherits the same admin interfaces as the built-in post types (pages and posts). This makes the new custom post type really easy to work with and start using right away. Below we’ll show you a plugin that creates an easy-to-use, front end interface for this function.
Registering Custom Post Types in Divi
Registering custom post types to your Divi site, or any WordPress site, is a very easy and straightforward process thanks to the free plugin Advanced Custom Fields (ACF). This plugin has been around for over a decade, is very stable, and has over 50 million downloads! It’s an all-in-one solution for adding custom post types, custom taxonomies and custom fields – everything you would need to get started with custom post types.
There is a Pro version of the plugin that adds additional field types and other features not included in the free version. However, the free version is more than enough for most scenarios and is the version we’ll use for this tutorial. Let’s get started!
Once the plugin is installed and activated, go to your WordPress admin dashboard -> left sidebar -> ACF-> Post Types. At the top of this page you’ll see several inputs to define your custom post type. Simply enter the post type plural label, singular label and post type key:
- Plural Label – this is the plural label of your custom post type that will be displayed when viewing from the admin interface. For example “Events”. If your custom post type was “mouse”, the plural label would be “Mice”.
- Singular Label – this is the singular label of your custom post type that will be displayed when viewing from the admin interface. For example “Event” or “Mouse”.
- Post Type Key – the key is the unique name of your custom post type (in case you have multiple). This is mostly used behind the scenes by WordPress and plugins as an identifier when querying and displaying your custom post type. This will generally be the same as the Singular Label (in lowercase). For example “event”.
Below the custom post type labels and key, you’ll find a Taxonomies select dropdown allowing you to add a taxonomy to your custom post type. You can ignore this for now. We’ll cover this in our taxonomy tutorial.
Below the Taxonomies dropdown, you’ll see a few toggles. The Public toggle is on by default so that your custom post type is visible. You would only want to turn this toggle off if you were creating a very specialized, hidden custom post type like the Divi layouts in the Divi Library.
The Hierarchical toggle is off by default. You can turn this on if you want to create a hierarchy for your post type like you can with pages (parent -> child). We will create our hierarchy using our custom taxonomy in the next tutorial.
The Advanced Configuration toggle will display an Advanced Settings section when turned on. For the sake of this tutorial, we’ll leave this toggle off and accept the default advanced configuration options. Feel free to look through these settings which control options such as:
- Allowing comments, excerpts, revisions, etc.
- Granular control over labels
- Visibility in the WP dashboard including which icon to display and the icon position in the admin left sidebar
Once you’re happy with the basic settings, toggles and advanced settings, click the blue Save Changes button in the top right corner of the screen. That’s it! You should now see your post type listed in the left admin sidebar below posts, pages and projects.
Adding and Editing Custom Post Types in Divi
Now that the event custom post type has been registered, we can easily add and edit events within the WordPress dashboard just like adding posts and pages. Simply find the events custom post type in the left sidebar and click on the Add New button. You’ll see an interface that is nearly identical to the interface used to add pages and posts. If you’re missing an option (revisions, excerpt, etc,), you can go back to the ACF -> Post Types page, click on the Events post type, and edit any of the settings.
Displaying Custom Post Types in Divi
Now that you’ve added new events, you’ll need to display them on the front end of your website for your visitors to view them. This is easy to do using the Divi theme and our Divi FilterGrid plugin.
Simply create a new page using the plural of the custom post type created. Staying with our example, you would create a new page titled “Events”. On this page you would add the Divi FilterGrid module. Once added, go to the Query section of the module and change the Query Type to Advanced. In the new Select Post Types field that appears, remove Posts and add the new Events custom post type we created.
By default, Divi FilterGrid will display post category filters. We’ll show you how to add custom taxonomies to your custom post type and display filters for those in another post. For now we’ll simply remove the filters. Scroll down to the Taxonomy Filters section of the module and turn off the Show Taxonomy Filters toggle to remove the filters.
In just a few steps, we’ve created a new page to display our events in a grid layout. By default, Divi FilterGrid will display the event featured image, title and author for each event. However it’s capable of displaying so much more. If you want to create a custom taxonomy to filter your custom post type by, please have a look at our custom taxonomy tutorial. If you want to display custom fields for your new custom post type, please have a look at our custom field tutorial. The same ACF plugin is used in both tutorials.
