Follow us

Custom Tab Order in the Divi Filterable Portfolio | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

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 wink )

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:

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

 

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:

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

 

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.

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

 

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

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

 

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

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

 

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

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

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 smile

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

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

 

 

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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!