R39: How to Set a Custom Tab Order in the Divi Filterable Portfolio Module

Updated 22.04.18: Provided more efficient jQuery code.

There are a fair few solutions floating around showing how to change the order of the Divi filterable portfolio tabs/filters, these generally show how to change the order from ascending to descending and require some PHP.

The tabs are shown in alphabetical order by default, but what if you want them in a completely custom order, neither ascending or descending? Fear not, we can do this with some creative thinking and a little jQuery. (I am sure there is a PHP way to do this too but that is not my thing )

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes

Cooking time

Less than 15 minutes!

Preparation

For your prep just make sure you have some projects created and all the ones you want to display are in a category.

Then navigate to Projects > Categories and we are going to prefix our categories so we can order them.

Hover over the category you want displayed as the first filter and click the Quick Edit menu item that appears. Change the title (not the slug) by prefixing it with a ‘1‘ like this:

Then click Update Category.

Next go ahead and repeat the process with all your other categories, incrementing the number each time. When you refresh the page your categories will list in ascending order like this:

That’s our prep done.

Method

Now let’s create our module:

Anywhere you like on your page, add a new filterable portfolio module. Select the categories you just set from the list in the Content tab, then go ahead and adjust any other settings in this tab you want.

Next, click the Design tab and set the Layout to Grid (I am assuming you want a grid layout here ). Again, adjust any of the other setting you like.

And finally, click the Advanced tab and give your module a CSS class of ds-portfolio-custom-order, then Save & Exit.

Now if you preview your page it will look something like this.

You will see your tabs are in the order you have set, but it’s not ideal having that number in front of the tabs or the categories. So let’s fix that.

We are going to add a little jQuery. Here’s what we are doing:

The filterable portfolio uses ajax for its pagination, so we wrap our code in a bind function to make sure it still works when pagination in on.

Then we target the categories in the tabs, the post meta of our module and also the post meta on the single project pages and tell the browser to replace the number in each category with nothing, basically removing the number from the page.

<script>
//Custom portfolio tab order by Divi Soup
(function ($) {
$(document).ready(function () {
$(document).bind('ready ajaxComplete', function () {
$(".ds-portfolio-custom-order .et_pb_portfolio_filters li, .ds-portfolio-custom-order .post-meta, .single-project .et_project_categories").html(function () {
return $(this).html().replace(/[0-9]+/, '');
});
});
});
})(jQuery);
</script>

So copy the code above and paste into Divi > Theme Options > Integration > Add code to the < head > of your blog. Be sure to keep the script tags too or it won’t work.

Now when you view your portfolio and projects you will see all the numbers have been removed but the order you chose remains

And that’s it! You can use this method in loads of other ways too once you understand how it works.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X