The Divi theme includes a Filterable Portfolio module that will create a layout of projects, allowing users to filter the projects by category using horizontal buttons above the project results. Our Portfolio Posts Pro plugin adds a Filterable Blog module that is similar but allows you to display posts and any custom post type and adds additional features.

In this tutorial, we’ll show you how you can easily change the filter buttons to a drop-down select menu. When a user clicks on a category in the dropdown, the results will filter just like they do when the filter buttons are clicked. The code provided in this tutorial will work on both the default Divi Filterable Portfolio module and the Filterable Blog module from our Portfolio Posts Pro plugin.

The solution is actually a simple copy and paste javascript function provided below. You can paste the function in your child theme’s footer.php file just above the closing </body> tag or you can paste it into the Add code to the < body > (good for tracking codes such as google analytics) section located on the Integration page by clicking Divi -> Theme Options -> Integration.

Here is the breakdown of what we’re doing in the code above:

  • Creating a select and adding it just before the first filter button
  • Adding options to the select with the same values as the category slugs from each filter button
  • When a select option is selected, we’re triggering a click on the matching filter button
  • Hiding the original filter buttons so only the select is visible

It’s important that we keep the original filter buttons from the layout, which is why we’re simply hiding them. Divi is using their own javascript functions included in the theme that perform the filter action based on the filter button clicked. All we’re doing in the code above is “tricking” Divi into thinking the buttons are clicked so the filter action can still take place.

Share This