Limited Time Sale - 10% Discount! Use Code:U5ZBQTEY

Divi Change the Filterable Buttons to a Drop-down Select

by | Blog, Divi | 12 comments

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.

12 Comments

  1. renedchin on January 3, 2020 at 10:41 am

    Hi, it is not working with filter grid, I tried to changed from .et_pb_portfolio_filters to .dpdfg_filtergrid_0 .dp-dfg-filters. please help!

    • Brad Crawford on January 3, 2020 at 12:57 pm

      Hello! Can you please submit a support ticket and include the URL of the page you’re having issues with so we can take a look? Thanks!

  2. Michael Keultjes on May 15, 2020 at 4:58 am

    Any way to activate the dropdown at a specific breakpoint? I only need it, below 1280px screen width…

    • Brad Crawford on May 19, 2020 at 6:32 pm

      Hi Michael! You should be able to do this with CSS. At the bottom of the script above, we are hiding the original filters using jquery hide() function. You should be able to use a media query to display them only if the browser is over 1280px. Try this:
      @media only screen and ( min-width: 1280px ) {
      .et_pb_portfolio_filters ul li {display: list-item !important;}
      .et_pb_portfolio_filters select {display: none !important;}
      }

  3. Philip Borup on June 5, 2020 at 10:32 am

    Is it possible to tweak this script and use it with DIVI Filter Grid?

    • Brad Crawford on June 17, 2020 at 3:23 pm

      Hi Philip! We are in the process of adding this to the Divi FilterGrid plugin as an option. In the meantime, we do have a temporary javascript solution. If you could create a support ticket or shoot us a message, we would be happy send this to you. Thanks!

  4. Nadine Schmelzkopf on August 4, 2020 at 8:22 am

    I don’t see a code?

    • Brad Crawford on August 4, 2020 at 8:30 am

      Fixed! THANK YOU for bringing that to our attention Nadine!

  5. backman on September 30, 2020 at 12:54 pm

    Hi.

    How can u cosumize the dropdown menu in this code?

    /T

    • Brad Crawford on September 30, 2020 at 4:56 pm

      I’m not sure what you mean. The menu is generated by the filter buttons. This code will simply convert the buttons into a dropdown select. If you’re wanting to change the appearance of the dropdown, that’s well beyond this tutorial but you might want to take a look here – https://www.filamentgroup.com/lab/select-css.html

  6. Michael Roberts on December 8, 2021 at 8:09 pm

    This worked GREAT for me! But only one small item. The order is out of order. How would you add a sort function to this jquery? Thanks in advance!

    • Brad Crawford on December 14, 2021 at 12:36 pm

      Hi Michael! The order should be the same as the order of the buttons. Is this not the case on your page?

Submit a Comment

Pin It on Pinterest

Share This