June 20, 2022

Filter Posts in Divi Blog Module Based On Category + Free Layouts

$

View Demo

Download Layouts

Even though you can filter your projects based on their category in the Filterable Portfolio module, you couldn’t do so with the Blog Module. This is now possible thanks to an amazing Divi Filter plugin by Daniel Voelk – for free! With the plugin’s premium version, you can add some cool features such as active button styling, animations, and more.

You can also download 3 filterable blog layouts I prepared for you as a freebie.

Follow the tutorial below to create your own filterable blog module.

1. Create your posts and post categories

Simply create your posts and assign them to post categories.

2. Download the free Divi Filter plugin from Daniel Voelk

Download the plugin from the official website for free and install it. For the purpose of this tutorial, you’ll only need the free version. However, you can add some cool features such as animations and active button styling if you decide to go for the premium.

3. Create your blog section

Create a new section on your page and add a blog module.

4. Give your blog section df-area and df-post classes

Open the section settings, go to the Advanced Tab → CSS ID & Classes, and add df-area & df-post classes.

5. Insert a new section above the blog section

Create a new section and place it above the section with our blog module. This is going to be a section with our filtering buttons. You can also have other elements in this section, it’s only important to have the filtering buttons in a different section than our blog module.

6. Create your filtering buttons

Add filtering buttons to the newly created section. You can use other modules for the filtering as well (text module, images, blurbs, etc.). If you want to know how to display more buttons next to each other without using the columns, check out my tutorial.

7. Add df-button & dfc-yourcategory classes to your buttons

To each filtering button (or another filtering module), add a df-button class. Additionally, add a class of the particular post category dfc-yourcategory. For example, if my category is Africa, I add the dfc-africa class in addition to the already added df-button class. For the Americas category, my class would be dfc-americas. It is always the slug of a particular category.

Note: for the ‘All‘ button that shows all your posts, you only need to add the df-button class.

You now have a filtering blog module!

Additionally, you can style your blog module and filtering buttons or download the 3 layouts I prepared for you as a freebie.

You can also go for the premium version of the Divi Filter plugin to unlock these cool features:

  • active button styling
  • animations
  • pre-filtered elements on page load
  • … and more

How to import the freebie layouts

After submitting your email here, you’ll receive an email with a ZIP file. Download the file and unzip the folder.

Create a new page (or edit an existing one), enable the Divi Builder, and click on two arrows symbolizing export and import.

Select import and choose one of the 3 layouts you’d like to import. Click on Import Divi Builder Layout.

The custom CSS is located at the end of each layout as its last module. If you’d like to change the accent color used, find the code and change the hex code.

That’s it! Don’t forget to create your own posts and post categories and overwrite the particular classes of filtering buttons!

Subscribe to Download the Freebie

You’ll receive an email with a link to download your file. If you are my subscriber already, don’t worry, you won’t be added twice 🙂

Filterable Blog Sections
5 6 votes
Article Rating
Subscribe
Notify of
guest
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Peter Pavlov
3 months ago

Great tutorial! Thanks for the freebies!

Keegan
3 months ago

Excellent tutorial!

Rachel Taylor
3 months ago

Would this work with Custom Post Types as well?

Jan
Jan
2 months ago

thanks for the great tutorial! The new Divi interface looks different than the screens above, I figured it out. It’s at the bottom of the page now.

Last edited 2 months ago by Jan
Sarah Haynes
2 months ago

This isn’t working for me. I even tried your freebies and I can’t get them to work either. I submitted a support ticket but I don’t know if here will be faster reply.

qaisar
2 months ago

stuck on blog section i am about how to design with divi or compatible plugin of wordpress.

$49

Check out my new Divi child theme

Tias is specifically designed for plumber, electricians, handymen, interior designers, contractors & more

Check These Divi Resources, Too:

Check Out My New Child Theme

Use the code summer2022 to get 15% off

View the Child Theme