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.

29

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 in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

52 Comments

  1. Dave

    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).

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Dave,
      I do mention quite throughout the video. It’s pretty much wide open, any time of content that you want to organize and display. books, reviews, testimonials, team members, portfolios, dogs, catalog, events, news, documentation, etc.

      Reply
  2. Gavin Fenton

    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

    Reply
  3. Vera Schafer

    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.

    Reply
  4. Tony

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      That sounds great, Tony. I don’t think you missed anything, sounds like you did it great. There is no way to use custom taxonomies in the blog module, so be sure to suggest that to ET!

      Reply
  5. Victor

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Victor,
      Just change the ‘rewrite’ => true, to ‘rewrite’ => [‘slug’ => ‘cats’], and make sure you have ‘has_archive’ => ‘cats’, as plural.

      Reply
  6. Eric

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hey Eric,
      Why not use the Divi Builder for the page? It’s been years since I used the actual blank Divi pages. This would also solve your second question.

      Reply
      • 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 an error “page not found” (wordpress error msg). If i create a CPT “like post”, no problem to create and display but i have the wordpress title, no options in the page to not displayed the title as Divi standard posts.

      • Eric

        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.

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Eric,
        Thanks for explaining, but the part I’m still confused on, if you are using the Divi Builder, then the settings for sidebar are totally irrelevant and not used. In the Divi Builder or that page, just add a sidebar module if needed.

      • 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.

        1. I have created a CPT named “exams” with the capability “page”.
        2. I activate Divi Builder for this CPT.
        3. 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 but no fullwidth (container 1080px, impossible to have 100%) and the wordpress title to the top of the page. Is it normal ? there is options in the generator that i don’t see to avoid that ?

        Thanks for your help.

      • 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 🙂

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Eric,
        That’s where the Divi Theme Builder comes in. Have you tried that? You should absolutely check it out if you havn’t used it yet.

      • 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.

  7. Mamdouh

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Mamdouh,
      I believe this is because you have a dash in your file, “results-2020” so just change all references of that to something like “results2020”

      Reply
      • Mamdouh

        Thanks

  8. Matias Gencarelli

    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?

    Reply
  9. Andy Tate

    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 a list or grid format.

    I thought I hade done so well creating the custom posts, but now it looks like they will be no use to me.

    P.S. like the look of your course. Any taster vdeo clips to tempt me to sign up????

    Reply
  10. Adam

    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.

    Reply
  11. Fran

    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!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Fran,
      I’m not quite sure what you mean. You mentioned the Divi Page settings, but I think you are referring to the WordPress backend. Is that correct? I don’t know how to make those items show, but I can honestly say that in all my life I have never actually used those settings, so I’m thinking they are pretty useless. But maybe I’m missing something.

      Reply
      • 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!

      • Fran

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

      • Nelson Lee Miller (aka The Divi Teacher)

        I understand, but I’m confused as well. Are you not using the Divi Builder on the page? If you use that, it will be fullwidth.

      • 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 🙂

  12. Sean Craig

    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.

    Reply
  13. Terry

    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 !

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Terry,
      If you have it hard set like that in the permalinks then I’m not sure. I’m not an expert on that though, so maybe check some other sources about permalinks.

      Reply
      • 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,)

  14. Jacob Reinholdt

    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)?
    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Jacob,
      That’s a very common feature request of the blog to be able to choose custom post type taxonomies, but there is not way to do it. You could always ask Elegant Themes about it!

      Reply
  15. ryan

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Ryan,
      That is something you should bug Elegant Themes about, as this is a very, very common feature request and the more they get is how they prioritize new features.

      Reply
  16. Laurence

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Laurence,
      502 is a server error, not related to this. You can certainly use multiple custom post types, just make sure they are unique of course with a different key.

      Reply
      • 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

  17. Honey

    Hi! I’m creating a product catalog website (not online shop), so I wanted to create two custom post types – products and recipes. I watched your video and used the generator and successfully got them on my website. However, I am having trouble with editing the post types. If I click on “add new product” I can input information in the traditional WordPress blog form, but what I want to do is use a particular divi layout, which I already created and assigned in the Divi Theme builder to use for products. So if I click “use divi builder” everything disappears except the title, and the right hand of the screen says there is a fatal error. If I go to “all products” I can click “preview” and I can see the correct divi layout. I can then click “enable visual builder” and I can edit it that way. But if I click “edit product” it brings me back to the blank page. So I can’t adjust the back end, categories, tags, anything. I tried going to the Divi Theme options and click “enable classic editor”, and now it seems to work for “recipes” but not for “products”. Is this because the post type “products” is usually linked to e-commerce and WordPress is confused that I don’ have an e-commerce plugin installed? Do I have to make a different new instead of “product” for my post type? Or is there a different work-around so I can still use the word “product” which I prefer? Thank you so much for your time!

    Reply
    • Hemant Gaba

      If you are using Products as a name of Custom Post Type and you also have Woocommerce Products then also I don’t think that WordPress might be getting confused between the two so please try using the Products as a name of your CPT.
      If you want to create a template of your Custom Post Type in Divi then please create a Template using the Divi Theme Builder. Go to Divi > Theme Builder and add a new template. When you click add new template plus icon there are a lot of options that you will see so as you have two things with Products name, when you will scroll down you will see two Products heading and in that you need to check the box under the second heading to assign this template to your CPT products.
      Please try this out and let us know if it helps. 🙂

      Reply
  18. Britt

    Wow, I just found your tutorials and I am blown away! Love the whole set up of the presentation, from theory to practice. Really brilliant. I may not have found what I was looking for exactly but I have immediately subscribed to keep ongoing nuggets trundling into my email! Keep up the fab job!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Thank you so much Britt! I appreciate you taking the time to comment, I definitely plan to continue this have tons of new content on the way every week!

      Reply
  19. Victor Beil

    Hi there Nelson,

    really like the tutorial and the generator, it worked out great for me. However, i hit a roadblock when i tried to customize the category page using the blog module in the Divi Theme Builder. I can pull some stuff like the category name dynamicly. But i´m not able to display only posts with a certain category, it only allows me to display all posts. When i try to set it to a specific category there´s a “no results found” notification. Any idea on how i could resolve this?

    Best regards and keep up those awesome tutorials!

    Victor

    Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart