Like Mac & Cheese, It Just Belongs Together
Who knew learning how to add Custom Post Types to Divi and get them to display along with Advanced Custom Fields using the Divi Theme Builder could be so involved? Like I’m totally ready for a beer cup of tea after all that. Now only if there was a 100% no-code solution that would make adding Custom Post Types and filtering them using beautiful customs loops with Ajax efficiency a breeze…
Lucky for you my dear Divi crusader, Divi Machine will do that and then some. Divi Machine and all things Custom Post Types and Fields were made for each other. But we won’t leave you non-Divi Machine heathens up the creek without a paddle, we’ll recap this series first, and then get to that easy button.
More in this series.
Ok, we have come to the culmination of this 5-part Divi Tutorial Series on How to Add Custom Post Types and Advanced Custom Fields to Divi. We learned a ton of useful skills that you can use in your agency or freelance business without spending a penny on any plugins that have now enabled you to charge more for your services. Building more complex and dynamic sites is a great way to pivot and start earning, but time is money, so we would be remiss if I did not show you one last way you can save time and make more 💵 GREEN 💷 when adding Custom Post Types to your Divi sites.
Enter Divi Machine.
For this Divi Tutorial, we will recap the things we have learned so far, but then we smash that easy button and show you how to work with Divi Custom Posts Types in a whole new way that will save you time and frustration. We’ll cover adding custom post types to Divi, creating custom fields using the Advanced Custom Fields plugin, Creating a Custom Loop Layout using the Divi Builder, Adding Ajax Filter to Divi, and then we’ll briefly cover some additional Divi Machine features that will transform your Divi workflow.
Let’s get busy!
Video Tutorial
Table of Contents
Difficulty
Easy
Time
35 Minutes
Divi Custom Post Types – What we’ve Learned
WordPress Custom Post Types and Custom Fields. What are they? And Why You Should Care!
We have learned that Custom Post Types are a way to create your own content types that are specific to your site. Each Custom Post Type you define will have its own set of fields and display options which you can control from the WordPress Dashboard.
This works exceptionally well for content that will have many posts or duplicates such as Team Members, Properties, Used Cars, Recipes, and more. You get the idea!
Now, to help better describe these Divi Custom Post Types you need to add some Custom Fields to them. For example, if you wanted to add a “Recipe” Custom Post Type, the recipe would have its own set of fields for the event title, ingredients, time to cook, images, etc.
You can see the endless amount of ways that this could be beneficial to your aunties’ pickled chicken wing business, and others, of course.
This barely scratches the surface on why you should use Custom Post Types and Fields in Divi, so click the button below to get that deep custom post type massage treatment for free-99.
How to Add a Custom Post Type to Divi without a Plugin
At first glance, adding Custom Post Types to your Divi install without a plugin by coding it yourself seems like a lot, but this process can be fairly easy when using one of the many Custom Post Type generators in the wild. In this tutorial, we covered how to use a generator by the team over at metabox.io and then add it to your Divi site by editing the functions.php file of your Child Theme.
The keyword here is Child Theme, it is a very bad idea to add some spaghetti code to your Parent Theme’s functions.php file. If you don’t yet know how to make or add a Child Theme to your Divi site, you should check our post on Dynamic Divi Child Themes.
The other benefit here is that by skipping an extra potentially bloated plugin, you stand to also avoid slowing your site down with all that extra bloat.
This is a very valuable Divi tutorial that will teach you how to create even more bespoke solutions for your clients.
How to Get Started with Advanced Custom Fields (ACF) in Divi?
So what do you do once you’ve added some fancy Custom Post Types to your Divi sites? You pimp them out with some Custom Fields friend! Now what does adding Custom Fields do for your Custom Post Types? Think of the Custom Fields as additional information that helps define and describe your Custom Posts.
For example, if I was creating a Recipe Custom Post Type in Divi, I would probably add some fields like Time to Cook and Ingredients to help better define its purpose and collect information that will be common amongst all the recipes you’ll be adding to your site.
The best tool to do this is the Advanced Custom Fields (ACF) plugin by the team at Delicious Brains. It is easy to use and has an extremely polished and intuitive workflow. In this tutorial, we show you the basics of how to add and use these Custom Fields to enhance and enrich your Custom Post Types.
Regardless of the type of site you are building, adding Custom Fields is basically essential if you are also adding Divi Custom Post Types.
How to Style a Custom Post Type Template using the Divi Theme Builder
Yewwwww, you are still with us, nice one! Time to use some more of those handy Divi features that just make life so super simple. The one in question here, the Divi Theme Builder is something you should be using on every single Divi site you are building regardless of using Custom Post Types or not.
The Divi Theme Builder enables you to build custom Divi layouts for both the stock post types you’ll find in any WordPress install, but also the ability to style your Custom Post Types without having to do anything crazy. You build your Custom Post Layouts using the Divi Builder you already know and trust. No real new skills to learn here, you just need to know where to go.
That is exactly what we do here. Together we built a Custom Single Post layout for our Recipe Custom Post Type. We then went a head and showed you how to display those on a page using the Divi blog module. All these features hiding right underneath our noses the whole time.
Excellent!
Adding Custom Post Types with Divi Machine
Hey! Yeah, you…got 2 minutes to spare to add a Custom Post Type to your Divi site?
Seriously.
Divi Machine makes adding a Custom Post Type to Divi an absolute sinch and really only takes 2 minutes. So much so I have run out of things to say about it and will just have to show you.
Let’s log into the back end of a Divi site and take a look.
Divi Engine > Add/Edit Post Types > Add New
Add a New Divi Custom Post Type
General Settings
Post Type Name: “Recipes”
Description: “Collection of Recipes”
Now we need to tell WordPress where we want this new Custom Divi Post Type to be displayed and what icon we want associated with it. We will keep most of these settings at default and just set it up with an icon that makes sense and for that we need go select the dashicon code.
Add a New Divi Custom Post Type
Visibility Settings
Admin Sidebar Icon: “dashicons-media-document”
Finding a DashIcon Code
Go to the DashIcons Page
Search for a “Document” icon
Copy the code in Step 2 above
We are pretty set now, we will just a couple of extra features in the Advanced Options. Since we want folks to be able to comment on our recipes we’ll enable that and leave the rest as is. Also, since is the last setting we change here, we will go ahead and Save our new Custom Post Type when we are done.
Add a New Divi Custom Post Type
Advanced Options
Supports: Check the box next to “Comments”
SAVE
And that is seriously all there is to it! Now, you can further change things like labels to change the words that describe adding or removing a new post in our recipes custom post type under the Labels settings, but we won’t be diving into self-explanatory things like that because you folks all have that big 🧠 brain energy.
You’ll also notice something new in your WordPress Dashboard sidebar there, a brand spanking new Recipes menu item.
Take a bow!
Adding some Advanced Custom Fields
Adding some Custom Fields to our Recipe Custom Post Type will help describe each individual recipe with things like how long it takes to cook, how many people it serves, the nutritional information, and pretty much whatever else you feel it needs to have. You can get as creative as you like.
So, on the first assessment, we will need 2 field groups:
Recipe Metadata
This group will have all the metadata for the recipe.
Prep Time, Time to Cook, and Servings.
Nutrition
This group will have all the nutritional information for the recipe.
Calories, Fat, Protein, and Carbs.
We covered this in quite some detail in our tutorial on How to Get Started with Advanced Custom Fields in Divi, so check that out if you get a little lost, or watch the video for this tutorial (we will add a timestamped link for you). Below we will go through just the fields and settings for each group.
Custom Fields > Add New
Recipe Meta Field Group
Field Group Title: “Recipe Meta”
Adding Fields
Prep Time
Field Label: “Prep Time”
Field Type: Range
Instructions: “How long does it take to prepare before cooking.”
Required: NO
Default Value: 0
Minimum Value: 0
Maximum Value: 1000
Step Size: 5
Cook Time
Field Label: “Cook Time”
Field Type: Range
Instructions: “Add the amount of time it takes to cook.”
Required: NO
Default Value: 0
Minimum Value: 0
Maximum Value: 1000
Step Size: 5
Servings
Field Label: “Servings”
Field Type: Number
Instructions: “How many people does this recipe feed?”
Required: NO
Default Value: 1
Minimum Value: 1
Maximum Value: 99
Step Size: 1
Location Settings
This controls where these Advanced Custom Fields will be shown or not shown. We are going to tell it that we want these fields to be associated with the Recipes Custom Post Type.
Rules: Show this field group if [Post Type] [is equal to] [Recipes]
SAVE
And that is that one field group down! As Jay-Z would say, 🎵 On to the next one! 🎵
Custom Fields > Add New
Nutrition Field Group
Field Group Title: “Nutrition”
Adding Fields
Calories
Field Label: “Calories”
Field Type: Range
Instructions: “How bad is this for you?”
Required: NO
Default Value: 0
Minimum Value: 0
Maximum Value: 100
Step Size: 1
Fat
Field Label: “Fat”
Field Type: Range
Instructions: “How much fat is in here?”
Required: NO
Default Value: 0.0
Minimum Value: 0.0
Maximum Value: 100
Step Size: 0.1
Protein
Field Label: “Protein”
Field Type: Range
Instructions: “How swole does this dish make you?”
Required: NO
Default Value: 0.0
Minimum Value: 0.0
Maximum Value: 100.0
Step Size: 0.1
Carbs
Field Label: “Carbs”
Field Type: Range
Instructions: “How many carbs are in here?”
Required: NO
Default Value: 0.0
Minimum Value: 0.0
Maximum Value: 100
Step Size: 0.1
Location Settings
This controls where these Advanced Custom Fields will be shown or not shown. We are going to tell it that we want these fields to be associated with the Recipes Custom Post Type.
Rules: Show this field group if [Post Type] [is equal to] [Recipes]
SAVE
Ok, we nailed it. Now you have some fancy fields for that fancy custom post type, but, we need some data to work with.
Adding some Custom Posts to Divi
Time to bust out those working gloves folks! We want to be able to get a good feel of what our Recipe custom post type will look like both on the single recipe post page as well as on the Recipe index page, so we need to add some dummy data in there to do so. About 12 should do.
For this, you’ll need to go over to your new Recipe custom post type in the WordPress Dashboard sidebar and get cracking with adding New Recipes. We will walk you through one dummy recipe and then you take the reigns and create more until there are at least 10.
Recipes > Add New
Add New Recipe
Basic Recipe Details
Recipe Title: “Recipe Number #1”
Body: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan semper nunc, a euismod dolor mollis at. In vitae nunc ac urna laoreet semper. Aenean gravida at quam in tristique. Phasellus at mauris tempor, lobortis nisi vel, egestas urna. Fusce id sem varius lacus efficitur mattis a sed nulla. Aliquam erat volutpat. Fusce accumsan condimentum metus. Nulla egestas leo quis justo suscipit pretium. Morbi scelerisque, erat vitae accumsan sagittis, arcu metus posuere lorem, vehicula dictum risus sapien vitae lacus. Aliquam erat volutpat. Donec pulvinar tincidunt lorem, sed facilisis neque elementum eu. Maecenas eu lorem rhoncus, vehicula arcu ut, eleifend velit. Donec tincidunt convallis dolor.”
We just generated some Lorem Ipsum placeholder text.
Recipe Tags: Add or select a tag. Our first one is “Fish”.
Featured Image: Either use an image you have or download one from pexels.com
Custom Recipe Fields
Recipe Meta
Prep Time: 15
Cook Time: 45
Servings: 2
Nutrition
Calories: 100
Fat: 1.6
Protein: 12.2
Carbs: 7.5
SAVE
Creating a Custom Loop Layout using the Divi Builder
What makes Divi Machine so great is that it has broken down all the elements of a loop into individual modules, and even added a bunch, that together turn you into a Loop Building Ninja! We will now build a quick loop that will hit on a bunch of the basic features and skills you need to build amazing Divi sites. It won’t be the prettiest thing you ever see as we will focus on showing how to use Divi Machine to build a loop, I’ll be leaving the design skills to all of you!
Divi > Divi Library > Add New
Add New Layout
Layout Name: “Recipe Loop”
Layout Type: Layout
Submit > Build from Scratch > Add a Single Column Row
Section Settings
DESIGN TAB
Margin: 0px 0px 0px 0px
Padding: 25px 25px 15px 15px
Rounded Corners: 25px
Box Shadow: Option 1SAVE
Row Settings
DESIGN TAB
Use Custom Gutter Width: YES
Gutter Width: 1
Width: 95%
Max-Width: 2560px
Margin: 0px 0px 0px 0px
Padding: 0px 0px 0px 0pxSAVE
Building the Custom Loop
Add a Thumbnail - Divi Machine module
Thumbnail – Divi Machine
CONTENT TAB
Enable Title Tag: NO
Image Style: Image Only (no overlay)
Visual Builder Post: RecipesSAVE
Add a Post Title - Divi Machine module
Post Title – Divi Machine
CONTENT TAB
Title HTML Tag: H2
Link Title to Single Page: YES
Visual Builder Post: RecipesSAVE
Add a Repeater/Table/Tabs - Divi Machine module
Repeater/Table/Tabs – Divi Machine
CONTENT TAB
Repeater Type: ACF Items
Grid Columns: 3
Add New ACF Item +
Repeater Custom Label: “Prep Time”
ACF Name: Prep Time – Recipe Meta
Suffix: ” Minutes”
Use Icon: YES
Icon: Search or select an icon that makes sense.SAVE
Add New ACF Item +
Repeater Custom Label: “Cook Time”
ACF Name: Cook Time – Recipe Meta
Suffix: ” Minutes”
Use Icon: YES
Icon: Search or select an icon that makes sense.SAVE
Add New ACF Item +
Repeater Custom Label: “Servings”
ACF Name: Servings – Recipe Meta
Suffix: ” Servings”
Use Icon: YES
Icon: Search or select an icon that makes sense.SAVE
Add a Divider module
Divider
CONTENT TAB
Show Divider: YES
DESIGN TAB
Padding Top: 15pxSAVE
Add a Repeater/Table/Tabs - Divi Machine module
Repeater/Table/Tabs – Divi Machine
CONTENT TAB
Add New ACF Item +
Repeater Custom Label: “Calories”
ACF Name: Calories – Nutrition
Suffix: ” Calories”SAVE
Add New ACF Item +
Repeater Custom Label: “Fat”
ACF Name: Fat – Nutrition
Suffix: ” g”SAVE
Add New ACF Item +
Repeater Custom Label: “Protein”
ACF Name: Protein – Nutrition
Suffix: ” g”SAVE
Add New ACF Item +
Repeater Custom Label: “Carbs”
ACF Name: Carbs – Nutrition
Suffix: ” g”SAVE
Phew, that was it. Now we didn’t go too crazy on design here, but when you are done, you should have something that looks like this:
Wow, such a transformation already. Who knew it would be so quick and easy? Thing is, as our recipe site grows and we get more and more posts in there, we will need a convenient way to filter through all this content. Next up, we will add the best and most flexible way to do that!
Adding Ajax Filters to Divi Post Archive Pages
Pages > Add New > Build from Scratch > Add a 2-Column Row (1/3) and (2/3)
Adding Ajax Filters
Add a Archive Loop - Divi Machine module to the second column
Archive Loop – Divi Machine
CONTENT TAB
Post Type: Recipes
Custom Loop Layout: Recipe Loop
Choose how to display load more posts: Infinite ScrollSAVE
Add a Filter Posts - Divi Machine module
Filter Posts – Divi Machine
Filter Update Type: Update after each field change
Add New Filter Item +
CONTENT TAB
Admin Filter Name: “Search”
What do you want to search/filter: Search Text
Post Type: Recipes
Placeholder Text: “Search recipes…”
DESIGN TAB
Fields Background Color: #f4f4f4SAVE
Add New Filter Item +
Admin Filter Name: “Calories”
What do you want to search/filter: Advanced Custom Field (ACF Plugin)
Post Type: Recipes
ACF Name: Calories – Nutrition
Filter Type: Number / Range
Filter Type Value: Numeric
Range to Number: 3000SAVE
Add New Filter Item +
Admin Filter Name: “Main Ingredient”
What do you want to search/filter: Tags
Post Type: Recipes
Filter Type: Checkbox / Radio Buttons
Display Filter Count: YES
Range to Number: 3000
SAVE
I keep saying this, but she ain’t pretty. What she is though is super fast and functional. When you adjust any of the filter values it will filter the recipes accordingly instantly with the power of Ajax and if you scroll down it will load more results with infinite scroll. Not bad for a 5 minutes job.
Other Great Divi Machine Features
Where to begin, or rather, where to end? Divi Machine is a pretty robust and complicated beast, but such is its nature. Luckily we have some awesome support and constantly improving documentation to help you to utilize the plugin to its full extent. And yeah, speaking of full extent, let’s talk about a couple of great Divi Machine features that you need to be using to build out one of your upcoming projects, or enhance your existing projects.
Linked Post Types
Divi Machine lets you link two related post types, or any really, but related is probably best 😂
This is extremely useful when you have relationships that are one-to-many. No, it is not an episode of the “Real Housewives” (you can have my man card). A one-to-many relationship is when you have one post type that will have multiple posts from another post type that are related to it.
I’ll give you two examples:
Real Estate Listing Site
When you are building a site with real estate listings, it would probably be good if your agents could be associated with all the properties they are representing. You could then create a page that lists all of that agent’s listings, and you could display the related agent on the individual property listing pages.
Here, we have a one-to-many relationship between the Agent custom post type (one) and the Property custom post type (many).
Staff or Team Pages
When working on a site for a business they might have the need for a well-organized team or staff page. Depending on the size of the company, it may have different departments or regions, and each has its employees that work there. Each employee would be associated with their department or region, so with linked post types, you can create pages that would list the employees for each region or department.
Here, we have a one-to-many relationship between the Department or Region custom post type (one) and the Employee custom post type (many).
ACF Galleries without ACF Pro
Divi Machine allows you to create both Galleries and Sliders with your images in Advanced Custom Fields without having to purchase the PRO version of ACF. We are able to group together individual image fields and use some genius-level code to display ACF Galleries and Sliders in your Divi Layouts.
It is super simple to use, and as you can see, they look absolutely fantastic!
Custom Post Types on a Map
Probably one of the most underrated features in Divi Machine is the ability to display your Divi Custom Posts that have an address custom field as a pin on a Google Map. This can have so many uses that will enhance any site where geography is pretty important. We’ve seen clients use this for Event Listing sites, Real Estate Listing sites, Business Locations pages, and so much more.
We also recently added map clustering which will cluster posts together that are relatively close to each other.
We ran a simulation of what adding Custom Posts Types to Divi was like WITHOUT Divi Machine
Conclusion
I really hope you all enjoyed this Divi Machine tutorial on The Easiest Way to Add and Display Custom Post Types in Divi. We know you will go on to build some awesome Divi sites using tools like Ajax Filters, Custom Loop Layouts, Linked Post Types, and more. Our goal is to keep adding value to your agency through in-depth content just like this Divi tutorial.
Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!
Catch you folks next week!
Salam n Hola
Any plans to implement ACF Flexible Content Type in Divi Engine?