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
Table of Contents
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
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
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
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
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.
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
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
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.
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..
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.
<?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.
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.
Name
Give your Custom Field a name that describes it well, we used Time to Cook.
Value
45 Minutes.Add Custom Field
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 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
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.
love this tutorial for a non coder guy like me :), thank you for the divi engine for this inspiring work!
Hi there does divi machine work with META BOX customfields?