How to make a Filterable Blog Module with Divi

The Filterable Projects module in Divi is great and we love using it for various projects, unfortunately, Divi didn’t make the Blog Module filterable out of the box. Luckily making the blog module filterable is possible and pretty easy to do, with just a little CSS knowledge and a basic understanding of HTML and PHP you can make a simple filterable blog module for Divi.

There are a few draw backs that I will go over first. The Filterable blog module that we will make won’t be pageable, it also won’t show the posts in the perfect date order. That said it’s perfect for filtering a few categories or latest posts from a few of your categories. You can also filter using tags.

Getting startedBefore we jump in I’ll explain a few drawbacks. You will need to have posts and categories, this effect is really only suitable for a few categories. The other drawback is that you can’t use this with pagination, so you will have to display all the posts from your selected categories on the page. This works perfectly if you are filtering a small number of posts from a few different categories.

The ModulesYou will need to create a page using the Divi Builder, on your page all you will need is a blog and code module. Within the blog module select the categories you want to display and select to display full width, you need to display full width and Divi uses a column effect layout to display posts in a masonry grid and because the posts are in columns they can’t be filtered within a single parent element. Don’t worry we will add our own CSS later to make the posts appear in a grid layout again.

Select just the categories you want to display, we have entered the number of posts as an infinite value of ‘-1’ to display all posts from the selected categories.

Add the following CSS ID to the blog module “filterposts”, you can also add the class if you want to achieve the same styles as in our sample.

We can start working on our filter buttons now within a code module, these buttons are very simple and you just need to create a button for each category you want to filter plus one extra to display all posts again.

This is what your buttons should look like, these are from our sample in the link above. You will need to change data-filter=”.category-articles” to reflect your category, this is simply the class added to each post in the loop and it will be ‘category-CATSLUG’ so just find your category slug and add it to the data-filter and also change the text of your button.

You need to then insert these buttons in a code module as shown below.

Adding ScriptsNow you have finished with Divi, the rest we will have to make the ‘old fashioned way’ with some functions and scripts.

To make the filter function work we are using the jQuery plugin MixItUP. You can enqueue this script using our function below in a child theme or even better with a plugin, we suggest the My Custom Functions plugin. Feel free to load the script from the CloudCanvas CDN or download the MixItUp script from the link above and host yourself. We have also enqueued a Google hosted jQuery library, you can remove this if you have already done this or don’t want to use Google jQuery.

You will notice that the function is conditional so it only loads on the news page. You can either remove the conditional ‘if’ statement and enqueue on all pages or you can change the slug to the page you want to have the filter function display on.

Now the jQuery plugin is enqueued we need to add the options to make the plugin work with our setup. These are the options required to display the filter, we have placed these in a PHP function and enqueued them using this function to display in the footer of the site. Again this is a conditional script so you can remove the conditional statement or add your page slug again.

The Styles All that you need to do now is add some styles to make the posts appear in a grid again. To add the styles activate Jetpack and enable the CSS module, we can then use SCSS within the CSS editor in customizer. Its important that you enable SCSS within the Jetpack CSS editor if you are going to copy and paste our styles. If you want to convert the SCSS to CSS for use on your site you can convert it here: www.sassmeister.com.