The Divi theme comes with an excellent filterable portfolio module (that we’ve extended to to work with any custom post type with our Portfolio Posts Pro plugin). The module works by creating filter buttons for each category. Clicking on a category shows only the items in that category.
By default, the first filter button is “All”, which shows all categories. But we can modify this behavior using a custom jQuery function. You can add the following code either to your footer.php file just before the closing </body> tag or in the WordPress dashboard in the Divi->Theme Options->Integration->Add code to the < body > (good for tracking codes such as google analytics):
<script>
jQuery(document).ready(function(){
// CHECK IF FILTERABLE PORTFOLIO IS PRESENT ON PAGE
if(jQuery('.et_pb_filterable_portfolio').length) {
// TRIGGER CLICK ON FIRST CATEGORY AFTER PAGE HAS LOADED AND INITIAL JAVASCRIPT FUNCTIONS RUN
setTimeout( function(){
jQuery('.et_pb_portfolio_filters ul').children().eq(1).find('a').trigger('click');
}, 500);
}
});
</script>
In this function, we’re triggering a click on the first category button after the “All” button. To trigger it on a different category, you can change eq(1) to a different number in the code above. Also notice we are wrapping our trigger function inside of a timeout function of 500 milliseconds. This is to give Divi time to run through the initial javascript functions that come with Divi. Otherwise our function would run first and then get overwritten by Divi’s function. You may need to increase the 500 value if it’s not working for you.
If you want to hide the “All” button, you can add the following to your Custom CSS section or child theme stylesheet:
.et_pb_portfolio_filters ul li:first-of-type {
display: none;
}
Hi Guys,
Thanks for this tip. It seems to work but Divi still loads ALL the projects initially before the script kicks in and then loads the first category only.
FYI I have the script in the Divi Body (Intergration section).
Its active here https://www.breezway.com.au/inspiration/projectprofiles/
The reason why I do not want all the projects loading is because of the sheer number of projects we have. I was hoping by removing ALL it would only initially load the first category and thus reduce the loading time for this page.
I notice you have quite a few plugins on your site. Do you have a solution for my issue? Happy to invest in your work.
Thanks. Steve
Hi Steve! There will be a slight delay in the script but it shouldn’t be as noticeable as what I’m seeing on your site. You could always try a simple caching plugin like WP Super Cache to see if that helps.
If you’re looking for a better solution, our latest plugin should do the trick for you:
https://diviplugins.com/downloads/divi-filtergrid/
This plugin is built from the ground up and utilizes AJAX pagination, so it will only ever load the first page of projects (12 by default). The remaining pages are loaded on demand. It also has a built-in option that allows you to set the default filter.
My client bought the plugin! You were not kidding Brad – excellent job! Will implement it live soon.
Great!