Step 1: Set up your category filter buttons
Begin by opening or creating a new page and adding a new Section.
- Create a new Section.
- Add a new Row
- Add a Code module.
- Edit your section settings by clicking on the section’s gearwheel icon and selecting the Advanced tab at the top. Now add the following ID into the CSS ID field filterButtons and save your changes. The ID is case sensitive so make sure it looks exactly as it appears here.
- Open your Code module and add the code below to create the structure for our category filters.
#1 and #2: Section and Row Structure Visual Example
#3: Add the ID Name filterButtons to your section:
Step 2: Set up your gallery items using Sections and Rows
Just like above, you’re going to make a new section below the category filter buttons section you just created. We are going to use individual rows to hold each gallery item, and then leverage flexbox to make the rows 1/3 width so 3 rows fit horizontally per line.
This method allows the rows to behave like columns so they re-align next to each other when category filters are applied, making sure we don’t have whitespace gaps when elements in a row are hidden by category.
- Create another new Section below the category filter section you just made.
- Add a new Row and ANY module you want to include per gallery item. In this example we’re using an image and a text module.
- Just like above, open the new Section settings by clicking on the section’s gearwheel icon and selecting the Advanced tab. Now add the following ID into the CSS ID field galleryList The ID is case sensitive so make sure it looks exactly as it appears here.
- Duplicate your rows until you have one row per gallery item. Each row should only contain one column. Using CSS we’ll make the gallery item rows display 3 per line.
- Now, set up your categories! For each gallery item Row, edit the settings via the gearwheel and navigate to the Advanced Options then add a class to each row that corresponds with the category filter options you made available in your filter buttons. Using our example, we would add the class ” shopify ” to the first row, ” wordpress ” to the second row, etc. These are also case sensitive!
The class on each row is what connects the filter buttons.
That’s it for the sections and rows. Save your page and let’s get into the fun stuff!
Example for #1 and #2: Gallery Section and Rows Structure:
#3: Add the ID Name galleryList to your new section:
Example for #5: Add Filter Class to Each Row
Step 3: Add the CSS
Now that we have two new sections that contain our category filters and our gallery item rows, we can wire up our code! In this example, we’re using Divi’s built-in CSS stylesheet for our CSS.
- From the WordPress dashboard’s left navigation, hover on Divi and click on Theme Options. Scroll to the bottom until you see the Custom CSS section.
- Add the CSS below and save your changes.
/* -----------------------------
WEBSITE CATEGORY/GALLERY FILTERING STYLES
------------------------------*/
/* Category Filters */
#filterButtons .btn,
#filterButtons button {
background: transparent;
border: none;
text-transform: uppercase;
margin: 0 20px;
}
/* Category Items */
#galleryList.et_pb_section {
display: flex;
flex-wrap: wrap;
padding-left: 0;
}
#galleryList .et_pb_column {
margin-bottom: 64px;
}
#galleryList .et_pb_module {
height: auto;
}
/* Animations */
/**
* ----------------------------------------
* animation scale-up-hor-center
* ----------------------------------------
*/
.scale-up-hor-center {
-webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-hor-center {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes scale-up-hor-center {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
/**
* ----------------------------------------
* animation scale-up-hor-left
* ----------------------------------------
*/
.scale-up-hor-left {
-webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* */
@-webkit-keyframes scale-up-hor-left {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
@keyframes scale-up-hor-left {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
/* Only break into thirds on desktop */
#galleryList .et_pb_row {
flex: 0 0 calc(33.333333% - 46px);
}
#galleryList .et_pb_column {
margin: 10px;
}
}
Example for #1: Navigate to Your Stylesheet:
Example for #2: Add Your CSS Styles:
Step 4: Add the jQuery
Now let’s add the logic that makes it so our category filter buttons show and hide our rows based on the selected filters.
In this example, you’ll need FTP access and a custom scripts file for your new jQuery code. Our scripts file for this tutorial is named custom.js and is located at /wp-content/themes/Divi-child/custom.js.
- Using your FTP client navigate to and open the custom.js scripts file.
- Add the jQuery code below and save changes.
Tip: Make sure you have jQuery installed on WordPress and check the console for errors if nothing appears to be happening.
jQuery(function($){
/* ======================================
CUSTOM CATEGORY FILTER FUNCTIONALITY
========================================= */
// buttons gallery filter
var $btns = $('#filterButtons .btn').click(function() {
if (this.id == 'all') {
$('#galleryList .et_pb_row').fadeIn(450).addClass('scale-up-hor-left').removeClass('scale-up-hor-center');
} else {
var $el = $('.' + this.id).fadeIn(450).addClass('scale-up-hor-center').removeClass('scale-up-hor-left');
$('#galleryList .et_pb_row').not($el).hide();
}
// active class on filter buttons
$btns.removeClass('active');
$(this).addClass('active');
})
});
Great! We should now see some excellent results if we refresh the page. Our rows now behave like columns, giving us 3 rows per line. Additionally, each row will now be filterable by the category buttons!
Example for #1: Add the jQuery to your custom.js file.
CONTRATULATIONS!
You now have an epic category filter that works with Divi’s sections and rows. You can filter just anything! From here you can style the containers with CSS to make things look the way you want them to. Get creative!
Live demo:
Thanks for reading the article! If you have any questions or need help getting this set up send us an email 😀
