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

Divi Custom Post Types – What we’ve Learned

WordPress Custom Post Types and Advanced Custom Fields. What are they? And Why You Should Care!

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.

Adding a Custom Post Type to Divi

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

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 Create a Layout Template for your Custom Post Types in the Divi Theme Builder

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

Divi Machine CPT Settings
This takes us to the Add/Edit Custom Post Type screen where we will now populate all the different aspects of our Recipe Custom Post Type. There are tons of options here which you can explore on your own, we will focus on the ones that pertain to the mission. Check out the video at the top of the page if you want a little more information.

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

Divi Machine Custom Post Type Settings
Select the dashicon you want to use on your Custom Post Type

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.

Divi Machine Custom Post Type Settings

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

Add Meta Custom Field Group in Advanced Custom Fields

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

Divi Machine Custom Post Type Settings

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 some Recipe Posts

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

Now do that a bunch more times!
Added Recipes

Creating a Custom Loop Layout using the Divi Builder

The ability to build your own loops is one of the most useful things you will learn in Divi Machine as this is what WordPress used to display all of your awesome posts. This goes for both the standard WordPress posts as well as the Custom Post Types you add to your Divi site.

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

New Divi Library Layout

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 1
SAVE

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 0px
SAVE

Build a Recipe Loop in the Divi Builder

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: Recipes
SAVE

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: Recipes
SAVE

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: 15px
SAVE

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:

Build a Recipe Loop in the Divi Builder

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

The Ajax filters are so powerful, that we packaged it as a whole separate plugin for those that did not need all the features found in Divi Machine. Now we will go and add the Ajax Filters to a Recipe Index page that will help sort through larger datasets.

Pages > Add New > Build from Scratch > Add a 2-Column Row (1/3) and (2/3)

Adding Ajax Filters to Divi

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 Scroll
SAVE

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: #f4f4f4
SAVE

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: 3000
SAVE

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

Ding ding, we are dunzo! If you followed along, your piece of interpretive art should look something like this:
Finished Recipe Index Page with Ajax Filters

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 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 ACF Gallery

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

Custom Post Types on 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!