Divi Builder - Custom Post Types and Category Selection

Jason Sohl
Full Stack developer, security enthusiast, Flutter developer, pretty much whatever you need me to be

Okay, okay, I know it's not security - haven't had the free time to do any of that unfortunately, but in my normal work I came across an issue that I couldn't find a documented solution for... So I'm here to document it.

I do a lot of quick Wordpress sites in my day-to-day job, we like to use Divi Builder (https://www.elegantthemes.com) to quickly make nice looking layouts. Works great, highly recommended. As is the case with most things Wordpress related, unless you pay for expensive plugins or hack your own solution, you're locked into what they like to do. Such was the case for something I wanted to do.

The end result I wanted was a grid of items that I could display how I wanted with custom fields, pretty simple. After it was all said and done, it worked like I wanted, but I decided I wanted to show these custom Post Types on multiple pages, but only show certain ones based on their category. Easy, right? Not really if you're using Divi's Blog Module. They only allow you to select categories for the posts to show if you're using the native Post Type of 'post'.

Let's start at the beginning for anyone who wants to do something similar:

I wanted a custom Post Type with custom fields, the following plugins are free and accomplish this beautifully:
Custom Post Type UI: https://github.com/WebDevStudios/custom-post-type-ui/
Advanced Custom Fields: https://www.advancedcustomfields.com/
Post Types Order: http://www.nsp-code.com/

With these three, I was able to make Custom Post Types with custom fields, but when I wanted to output those fields, I ran into a problem - the Blog module on Divi doesn't do that when you want to list those posts.

I came across this post: https://intercom.help/elegantthemes/en/articles/4532813-customizing-divi-blog-module-to-add-custom-fields which shows you how to modify the blog module to include the custom fields into the output - Great! Note that you have to follow the first link there (https://intercom.help/elegantthemes/en/articles/4532734-moving-blog-module-in-child-theme) to move the Blog module to a child theme so you can do all this modification without breaking anything.

So now, I have my custom Post Types with my custom fields being displayed on the page - but now I wanted to categorize these and display them only on specific pages. For instance, I have 3 Parties (using that name for my custom Post Type), if they're free, I add the category Free to the Party. I want to have a page that shoes all the Parties, but then a page that only shows the free ones. When you change the Post Type in the Divi Blog module, the "Include Categories" section disappears. Let's bring it back:

In your child-theme include Blog.php, search for the get_fields function - in that function look for include_categories in the $fields array. We're looking for the show_if section, it should have a post_type set to post. We're going to change that to an array and include our new Post Type slug:

'show_if' => array(
    'use_current_loop' => 'off',
	'post_type'        => array(
	    'post',
		'party',
	),
),

Easy peasy, save the file, reload the page you want to modify and check the blog module, you can now use the categories with your custom Post Type.

Hope this is helpful to someone else!

Jason Sohl
Full Stack developer, security enthusiast, Flutter developer, pretty much whatever you need me to be