Code by Day | Explore By Weekend

How To Create And Use Custom Post Types In Divi Tutorial by Pee Aye Creative

How To Create And Use Custom Post Types In Divi

This tutorial will show you how to create your own custom post types with our free generator and how to add and use them in your Divi website.

What Is A Custom Post Type

Pages and Posts are considered post types in WordPress, but we can also add our own custom post types. This will help you classify your content better and more seamlessly. A custom post type allows you to go beyond pages and posts and contain whatever type of content you would like based on your needs.

With our free generator, you can create your own custom post types in Divi and name them whatever you want. A custom post type can even have its own menu item in the WordPress dashboard for easy access, just like pages and posts.

Projects

When you install Divi, it comes with it’s own custom post type. I don’t know why they do this, but I guess it is there simply to show how a custom post type can be used and how it can interact with the Divi Theme and Builder.

Projects are used to create a portfolio, and you can use the Portfolio or Filterable Portfolio Modules to display those project post types on a page.

You can build the actual project page with Divi.

Products

Another custom post type that you may be familiar with is Products. This post type is created by Woocommerce. Products are their own post types with their own attributes and can have their own categories.

By default, Divi has built-in integration with WooCommerce, and comes with a great selection of Divi modules. You can build out the entire product page for example using Divi. All you have to do is enable the Divi Builder on products and you can build the layout however you want.

How To Use Custom Post Types In Divi

The big question remains. How do you use a custom post type in Divi? Thankfully Divi makes it super easy to integrate custom post types, and there are two main areas that have seamless integration with Divi.

Enable Divi Builder On Post Types

To enable the Divi Builder on post types, just go to Divi>Theme Options>Builder and you will land on the Post Type Integration tab. Then under Enable Divi Builder On Post Types you can toggle on or off the Divi Builder support for any post type.

Theme Builder Support

Another really great custom post type integration with Divi is in the Theme Builder. When you go to Divi>Theme Builder and assign a template, you can choose to assign a template to the custom post type pages just like any other post type.

example of a custom post type in the Divi Theme Builder

Blog Module

You can display an archive of your custom post types in Divi in the blog module. Be sure to check out our tutorial on how to use custom post types in the Divi blog module.

How To Display Custom Post Types In The Divi Blog Module Tutorial by Pee-Aye Creative

How To Create A Custom Post Type In Divi

There are at least two ways to make a custom post type. You basically can choose to use a plugin, use a generator, or hire a developer.

Use A Plugin

If you want to use a plugin, you could check out Custom Post Type UI, Pods, or another similar plugin. These plugins provide an interface for you to enter the data. Just remember, this is not automatic, but manual. Just because it is a plugin does not mean it is easier. I honestly think our generator is easier.

Use A Generator (Recommended)

You may think that a plugin will be easier, but I disagree. You will end up following the same steps here as in a plugin, so you may as well have one less plugin on your site! Besides, learning is good for you and this will be fun! And our generator auto-populates the fields, which is super cool! You can access our custom post type generator for free.

How To Use Our Free Divi Custom Post Type Generator

As we said before, we have a new free resource on our website! You can now generate custom post types using our generator, which also works for custom taxonomies (which we will talk about in the next tutorial).

If you haven’t yet, be sure to keep our Custom Post Type Generator open in a new tab as we go along.

The rest of this post will be an explanation of each of the features of the generator. I’ll do my best to break it down into simple language.

General

Name (singular)

This is the singular name you want to call your custom post type.

Notice that when you type the name into the field, most of the other fields in the generator under the General and Labels sections auto-populalate!

Name (plural)

This is the plural form of the name.

Key

This is the main value that the code uses to reference the custom post type. This is usually a singular small case version of the name. This needs to be one word without any dashes or underscores.

Description

This is the description of the post type that may be useful in rare cases on an archive page. You might want to say what it does and why you are using it.

Hierarchy

A hierarchical post type can have a parent and one or more children. The pages post type in WordPress is a good example of a hierarchical post type. One page can be the parent of other pages, that can be parents of other pages in a hierarchical fashion.

Features

Supported Features:

Below is a list of the options you can choose to select based on your needs. Any item you select will be included. I’m not going to explain each of these since they are mostly self-explanatory. These are the fields that will be available on the custom post type, similar to how pages and posts.

  • Title
  • Excerpt
  • Featured Image
  • Custom Fields
  • Revisions
  • Post Formats
  • WYSIWYG
  • Author
  • Trackbacks
  • Comments
  • Page Attributes

Taxonomies

You can choose to use the same categories and tags to organize your custom post types that you use for posts. Note that this will not give the new post type its own categories and tags. To do that, you would need to create custom taxonomies.

  • Categories
  • Tags

Custom Taxonomies

Besides categories and tags, you can also add your own taxonomies. Make sure the value or values you enter here match the “key” when you use the other tab to make the custom taxonomies. (Our guide on custom taxonomies will be linked here as soon as it is posted.)

Labels

This allows you to configure how each of the post types labels will appear. If you want to see this in action, just browse around your site and look at how this works for pages and posts. Our generator will add these automatically, but you can edit them as needed.

Menu Icon

The menu icon is the icon that shows up in the WordPress dashboard. As an example you can see that Posts uses a thumbtack icon. You can choose an icon from the list of WordPress dashicons avaible at this page. Then once you have selected an icon, enter the icon name into the input field, such as “dashicons-admin-post.”

Visibility

This allows you to configure how you would like your post type to appear in the back end of WordPress.

Public

This option changes the visibility of the WordPress custom post type to authors and visitors. Just keep this set to True to make it appear in the WordPress Dashboard.

Show in Navigation Menus

This sets whether the new custom post type items will be available in the WordPress navigation menus. Most likely you would want to to be set to True.

Show Admin UI

This determines where the custom post type is shown in places like the “+New” menu at the top of the WordPress back end. This should be set to True.

Show in Admin Menu

This determines where the custom post type is shown in the WordPress admin menu. This should be set to True.

Menu Position

This determines the position of the new custom post type name in the WordPress admin area navigation menu in relation ot the other default items that are there. You can select any option you want from the dropdown. 

Options

This allows you to configure how you would like your post type to appear in the back end of WordPress. These settings are more for advanced users and developers, so you can usually leave them on the default setting.

Publicly Queryable

This is more of an advanced technical setting that determines whether queries for this post type can be performed from the front end. Just leave this set to True.

Exclude From Search

This setting is where you get to choose whether the new custom post type should appear in search results. So if someone uses a search widget or search module on your site, you can decided if you want to show your new post type in the search results.

Has Archive

This setting allows you to choose whether or not the custom post type will have a main archive page like https://yourdomain.com/custom-post-type/. Don’t foreget, you can use the Divi Theme Builder to design the archive page!

Export via WordPress Import/Export Tool

Use this setting to decide whether posts belonging to your custom post type can be exportable via the WordPress export tool.

Capabilities

This again is a technical setting, but basically it has to do with the ability of certain user roles to perform certain actions, like delete or edit posts. Most users can keep this set to Post.

Query Variable

This again is for advanced users. It allows you to control the query variable used to get posts of this type. This cannot be the same value as the key.

Rewrite Permalink

This advanced setting allows you to define the permalink structure of your posts when viewing the single post. For example, you may want to have a structure like www.yourdomain.com/something/custom-post-name. WordPress will set up a default structure based on your taxonomy name.

There you go! That’s how you can use our free generator to use custom post types in Divi. Be sure to watch the video above.

If you want to take this further, we have a lesson on custom post types and more in our Beyond The Builder course, so consider purchasing that if you build or manage websites with Divi and WordPress.

25
Last updated Feb 27, 2021 @ 12:13 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
47 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dave
10 months ago

Great tutorial on how to create custom types but why would one want to? A use-case would be helpful in understanding the purpose of custom type (beyond products, that is).

Gavin Fenton
10 months ago

Hi Nelson, great tutorial. If I need to add more custom fields to my cpt do I need a plugin like advanced custom fields or is there another way you’d recommend to add them and when I do how do I display them on my post and archive e.g. category tag and icons etc

Vera Schafer
Vera Schafer
10 months ago

Thank you for this much expected tutorial. Since I need my CPT to have its own set of categories, I wonder when the next tutorial about taxonomies will come up.

Vera Schäfer

Thank you!

Tony
10 months ago

Hi Nelson – great tool 🙂 I have created a CPT called ‘Documents’ and added categories for ‘Doctors’, ‘Nurses’ and Admin. When using the divi blog module I can filter by Documents, but the categories are not showing, so cannot filter further. Have I missed a step? Thanks

Victor
Victor
9 months ago

Thanks for a really nice tutorial! One question about the permalink structure part in the end: The URL for the archive is site.com/cats/ but the URL for a single cat post is site.com/cat/cat-name/ so I (or a search engine crawler) can’t go back in the structure by removing the last part of the permalink.
 
From a SEO and UX perspective, I would like the single cats to be under the archive structure, in this case site.com/cats/cat-name
 
How could I achieve that?

Eric
Eric
9 months ago

Hi, i created a CPT for pages with the generator but when i create a page with “no sidebar”, i have an error “page not found”, it works if put a sidebar. Is it possible to have an option fullwitdh page? One more thing : is it possible to not displayed the title as the standard Divi pages (with the dont diplayed option at the top) ? thanks for your help.

Eric
Eric

hi, i think my explanations are not cleared i don’t speak english very well, sorry.(french). First, i generate a CPT called “Cats” with capabilities “pages” (i need a CPT for pages, not posts), i create a mu-plugins (or i copy to the child theme functions.php), i activate Divi in the Divi options for the CPT. Now i create a new page “mycat” in the cpt Cats. I activate divi builder on the page “mycat”. I select “no sidebar” (i want a full page, its not a post). I publish “my cat”. After that if i display the page, I have… Read more »

Eric
Eric
Reply to  Eric
9 months ago

ok, i make an another test, the page displayed with the link but the preview in worpdress page edit don’t Work. But I still have the standard title WordPress before the divi builder zone, have you a tips to deactivate it please ? The page don’t displayed in fullwidth too (container fix 1080px, no fullwith option).. thanks for your help. PS : i buy the divi responsive helper, very useful.

Eric
Eric

Hi Nelson, ok sorry to be not clear and take your time Just an example. I need to create this cpt to regroup my pages exams instead to mix them with others pages to organize my content. I have created a CPT named “exams” with the capability “page”. I activate Divi Builder for this CPT. So now i create a new page “firts exam” in my exams CPT. By default this page has a wordpress sidebar (not a divi sidebar, the standard sidebar of wordpress default post). I can choose “no sidebar”. Finaly, my page “first exam” have no sidebar… Read more »

Eric
Eric

Hi Nelson, to complete your excellent tutorial and tool to generate CPT, i think it will be interesting to explain how to create a template for the CPT, for page or post (based on the model single-page for example) to avoid standard displayed elements of WordPress (title, sidebar..), finally its the object of my multiple posts and what i don’t understand from the begin, sorry 🙂

Eric
Eric

OK, thanx i understand, so we must create a template on theme builder for the cpt with a content module. A last thing, my last question : i can’t preview the cpt page, when i click on the wp preview button i have the msg wp error “page not found, no results”, but the absolute link work, have you the same problem ? thank you very much for your help.

Mamdouh
Mamdouh
8 months ago

Hi I get an error when adding the code to functions.php file “Parse error: syntax error, unexpected ‘-‘, expecting ” on the “function register_cpt_results-2020() {”
line

Mamdouh
Mamdouh

Thanks

Matias Gencarelli
6 months ago

Hi David, this tutorial is fantastic. I have a question. After creating and using custom post types I’m going to create fields with the ACF plugin.

That content, I would like to be completed by users who register on the site. I want to create a specific interface for these users that looks customized on the frontend

With what plugin can I do this?

Andy Tate
Andy Tate
6 months ago

Hi, Great Tutorial. I have created a custom post type and it works fine, but the issue is viewing the custom posts in a list or blog format. I have tried to use the theme builder to create a template I can use to pull the posts back in a blog list format, but I have not been able to get that to work. From reading the comments would I be right in thinking that the blog module will not recognise the custom posts to pull them in. If this is right is there anyway of pulling them back in… Read more »

Andy Tate
Andy Tate

Yes you are right, My BAD!!!
Too many long nights! I have it working now.

Adam
5 months ago

Excellent tutorial and tool for generating CPT’s! I ran into an error with my execution of things. I created the CPT “Messaging Guide.” When I generated the code and added to functions.php file I received a syntax error on line 10. I eventually figured out that it didn’t like the dash in between “messaging-guide” and just changed the CPT title to “Guide” which resolved the issue.

Screenshot (191).png
Fran
Fran
5 months ago

This is a game-changer! So excited to put it into use. Only thing I can’t seem to do is this: when I use the Divi builder to edit my new post, I don’t have the usual features in the ‘Divi Page Settings’. Example: Fullwidth layout and don’t show post title. Have you come across this? Any tips on how to make it happen? Thanks again, actual angel!

Fran
Fran

Hey Nelson! Thanks for the reply. Maybe this test link will show what I mean: https://hemlow.franholder.co.uk/resources/energy-performance-certificates-epc-display-energy-certificates-dec-and-a-c-inspections The content isn’t fullwidth. Normally to change this, I’d go into the Divi Page Settings in the WordPress backend and change the Page Layout to Fullwidth. However, I’m not getting this option for the posts in my newly created post type. Any tips so super appreciated!

Last edited 5 months ago by Fran
Fran
Fran

On other blog posts, one of the options here would be ‘Fullwidth’ which normally fixes the problem.

Screenshot 2020-11-09 at 17.19.36.png
Fran
Fran

Hey Nelson, yeah it’s odd isn’t it? I’m using the Divi Builder but it’s framing it in a box. Never mind, ended up using CSS to force it into full-width! Thanks again for this How To 🙂

Sean Craig
Sean Craig
4 months ago

With this method, can we build a restaurant menu that would be simple to update, like ACF plugin does? I just tried, but I can’t wrap my head around how to get the custom post content onto a page.

Terry
3 months ago

Hi Dave,

Nice tuto’, thank you !

I’ve /blog/%postname% set for my blog. But now that i’ve CPT like “press” my urls are /blog/press/%postname%.
Have you any clue how to remove /blog/ from CPT but keep it for my blog…

Maybe i’ve missuse permalink rewrite ? Tried to figure out but not the right way…

Thank for your work !

Terry

Hello Nelson (idk why i called you Dave, my bad !!)
Thank you for your answer, i’ve found the solution over night and i’m glad to share it here :

just replace the rewrite true or false by :

‘rewrite’ => array(
‘slug’ => ‘yourslug’,
‘with_front’ => false,)

Jacob Reinholdt
Jacob Reinholdt
3 months ago

Really great tutorial. Thank you, Miller
I have one question about the use of the DIVI blog module and CPTs…
It is possible to do the following:

  1. Build an Archive Page
  2. Insert the Blog Module on the page
  3. Set the Blog Module to display a CPT combined with Custom Taxonomy (like ‘cats’ + ‘long haired’ from your tutorial)?
ryan
ryan
1 month ago

Is there a way to add custom categories to custom post types? For example, if I have a video series… it would be great to have the series and all of the videos in that series grouped together in the blog module.

Laurence
Laurence
1 month ago

Hey Nelson,

Thank you for providing this resource and the fantastic CPT generator. How would one register multiple custom post types? If I pull the code from the generator and place two instances of it in my Functions.php i receive a 502 error.

Thanks,
Laurence

Laurence
Laurence

Could it be the fact that I’m using the Name: Case Study? Every time I add the generated code for this CPT my site will throw an error. If I remove all of my PHP code except for the “Case Study” CPT, my site throws an error.

As a test, I registered the CPT “Books” and added it to my PHP. The site loaded just fine. Could there be an issue when generating a two word CPT?

Thanks,
Laurence

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart