A Recipe for Success

Let’s think of Divi Custom Post Types as a defining factor in building Divi Websites that are truly bespoke. Yeah, wow, I went for the jugular there, but it is not without purpose. I used to shun Custom Post Types myself, but once you see how easy it is to add Custom Post Types to Divi, and what you can achieve, you will almost never build another site without it.

I know, yet another Divi “guru” being their own prophet…but bear with me, I’m here to help. I’m going to walk you through a very real example of adding a Custom Post Type to Divi (without a plugin) which should get your gears turning.

More in this series.

NOTE: Ok, so if much of what we said above seems like a foreign language, quickly take a minute to go read our previous post about Divi Custom Post Types and Fields and why you want to use them.

Oh, hey there! Welcome to the first step in some real game-changing skills for your future Divi Theme projects. Totally not for SEO purposes, let me reiterate what we are doing in this Divi tutorial. We will be adding a custom post type to our Divi website using no plugins, just a bit of code. I know, exciting, and it should be!

To keep things relevant, we will be feeding off our previous post detailing Custom Post Types and Fields in Divi and why your ears should pay attention. We will continue with our example of adding a Recipes Custom Post Type to Divi. And no, you do not need to know PHP to do any of this, we will be using a handy Custom Post Type Generator to be the code brain for our project.

Let’s gooooo!

Video Tutorial

Divi Custom Post Types, Coders Only?

Nope. Thank you for coming to my Ted Talk.

Couldn’t resist, but seriously, while being a coder is a huge advantage, it is definitely not a barrier to entry here. But, don’t get me wrong, not being one will only marginally limit you when implementing Custom Post Types in Divi. There exists a bevy of plugins that will allow you to add Custom Post Types to WordPress. Then you can always add code to create your new bespoke custom post types, but this option gets scary.

Enter Divi Engine, here we are to show you how you can add a “coded” Custom Post Type to your WordPress site using code, without writing a single line of code. Not a typo, you read that right, we will use a generator that collects a bit of information from you, which then spits out a copy/paste solution for you.

Wild, I know, but why reinvent the wheel? The tool we will be using to generate the code for our Recipe Custom Post Type for Divi is made by the team at Meta Box.

How to Generate Code for a Divi Custom Post Type

Generate a Custom Post Type with metabox.io

No no no, this is not laziness, this is working smarter and not harder. Metabox.io has a great Custom Post Type Generator that not only speeds up creating your Custom Post Type in Divi, but it also makes it incredibly easy to do. It literally just collects a few pieces of information from you, and BAM! you have the code you need to go add to your functions.php file.

Let’s go throw one together by clicking the button below.

General Tab

Meta Box Custom Post Type Generator General Tab

Plural Name

Since we are creating a Recipes Custom Post Type for our Divi sites, we will set this to Recipes.

Now if this a team member Custom Post Type, you would call this “Team Members”, you get what I’m cooking?

Singular Name

Now since “Recipes” represents a collection of recipes, each item in the collection is a Recipe as you might have guessed. Equally, if you were creating “Team Members”, this would be “Team Member” instead.

Function Name

You can really call this whatever you want, as long as it is unique. It is a good idea to make this descriptive of our Custom Post Type, so we will call ours recipes_register_post_type

Text Domain

This is used to make your new Custom Post Type translatable into other languages, but is outside of the scope of what we are whipping up here, so we will just delete the default text in there.

Labels Tab

Meta Box Custom Post Type Generator Labels Tab

There is not much to be done or said about the Labels Tab other than this is the language or words that will be used to describe how our new Divi Custom Post Type will be referred to on the backend of our Divi site.

If you for some reason want to change these, be our guest, but calling Team Members, Recipes, could be a recipe for disaster 🥁

Advanced Tab

Meta Box Custom Post Type Generator Advanced Tab

Description

You can add a description here is you feel like talking about it.

Show in Menu

We will set this as Show as top-level-menu.

Menu position after

Here we will select where we want our Recipe Custom Post Type to be displayed and we think after Posts will do nicely.

Meta Box Custom Post Type Generator Advanced Tab

Menu Icon

Not much to explain or figure out here, just select the icon you want in your WordPress Dashboard sidebar to represent you new recipe custom post type. We went with the 📋 clipboard.

Supports Tab

Meta Box Custom Post Type Generator Supports Tab

Here you need to select the base post features you’d like to use in your Divi Custom Post Type.

For us, we felt the following would compliment our Recipes the best:

  • Title
  • Editor
  • Thumbnail
  • Custom fields
  • Comments
  • Revisions
  • Page attributes

Taxonomies Tab

Meta Box Custom Post Type Generator Taxonomies Tab

The Taxonomies allows you to better sort your content so we will be using Categories to sort our recipes into the main ingredient such as Beef, then we will use the Tags to sort it further to include ingredients used, or maybe to note if a recipe is vegetarian or something crazy like that (just kidding).

GENERATE THE CODE!

Ok, and that was is, not so bad. All we need to do now is hit that GENERATE CODE button and you should end up with something like this which we’ll go paste into our functions.php file in the next step.

Meta Box Custom Post Type Generator Code

Adding the Code for your Custom Post Type to Divi

Ok, so you’ve copied your generated code for the Divi Custom Post Type and you are ready to roll, but you come to a fork in the road because there are a few ways to add it to your Divi site.

WordPress Theme Editor

Depending on the permissions you have on your site, this might be the easiest way to add the code for your custom post type.

FTP

You can FTP into your server and go edit the functions.php file in your child theme directly.

Webhost

Some webhosts have a file editor that will allow you to edit the file right from your hosting providers file explorer.

NOTE: We will be messing with your functions.php file, so it is very important to use a child theme when adding a custom post type with code to Divi. Check out our post on Dynamic Child Themes to download a free Divi Child Theme and learn more about why we use them..

Adding Custom Post Type Code to Divi

We will be using the first option mentioned here, so if you find you do not have the same options for the process detailed below, just hit the googler or contact your webhost to help you out.

To get started we will need to go to Appearance > Theme File Editor

Now you will want to make sure that your Child Theme is selected, then you click on functions.php in the right column.

Depending on how much you have going on in your functions.php file, you’ll want to go paste the code you generated above the closing PHP tag ?> at the bottom of the text.

With your code pasted, just hit Update File and watch the magic happen.

NOTE: If you get an error, it is likely that your generated code contained an opening PHP tag <?php. Just delete that second opening tag and you will be all good. We actually had this happen in the video, so check that out if you get stuck because we show you how to fix it in there.
Newly Added Custom Post Type in WordPress Dashboard

If you have refreshed your WordPress Dashboard you’ll now see the newly added Recipe Custom Post Type on the dashboard of your Divi install. You can even already Divi in and add your first recipe by completing all the fields like Title, Body, Categories, Featured Image, and more.

Add a Custom Field

The fun does not have to stop here, we add some custom fields to further define our recipes like add how long it takes to cook. You can later use these to further filter your recipes and it is just useful. If this was a used car post type, you might have added a mileage custom field. This is pretty easy and can be done by scrolling to the Custom Fields area when you create a new recipe.

Add a Custom Field to Custom Post Type with Divi

Name

Give your Custom Field a name that describes it well, we used Time to Cook.

Value

Go ahead and assign the relevant value, in this case the time to cook for our Beefcake recipe is 45 Minutes.

Add Custom Field

When you click the button your new Custom Field will be added to the Custom Fields list right above.
Easy peasy! Because you added this custom field, in the future when you add recipes, it will already be listed in the custom fields list and you can just add the value.

Display Your New Custom Posts with Divi

Almost there! We are quickly going to talk about a couple of different ways to let you display your added Custom Post Type and Custom Fields with Divi. We are not going to go through the entire process as this warrants its own tutorial, but we do cover it in more detail in the video at the top of this tutorial.

Divi Theme Builder

Divi Theme Builder Custom Post Template

Divi Theme Builder Custom Post Type Template

This is the easiest method and should feel pretty familiar. All you do here is go to the Divi Theme Builder and build a template for your Custom Post Type just as you would for something like a WooCommerce Product. As I mentioned above, we do walk you through the process in the video tutorial, but we will do a separate tutorial on this real soon.

Coded Template Files

Coded Custom Post Type Template

Coded Custom Post Type Template

Understandably, this is the more involved way of getting this done, but you can do this even if you are not a master coder. Divi already comes with template files for Single posts and Archive pages, all you need to do is copy the code in those files and add it to a new appropriately named file that contains the name of your custom post type. 

On Behalf of the Recipe Post Type, we Thank You!

Conclusion

Another Tutorial under the belt, and another skill added to your repertoire. Well done, you! We learned How to Add a Custom Post Type to Divi without a Plugin and how to display them on the frontend. We added a sprinkle of Custom Fields and BAM! Now the world is your oyster.

We hope this tutorial already has you thinking about new ways to implement and supplement your Custom Divi websites by adding Custom Post Types and Fields. And no, we are not done as we are staying on the topic of Divi Custom Post Types and will be getting into using Advanced Custom Fields in our next tutorial.

Definitely drop a comment below to let us know what you think, and for sure share any suggestions.