The Divi theme comes with a filterable portfolio module which lets you filter a list of projects by category. These category 'tabs' are sorted alphabetically by default.
Here's how the filterable portfolio looks in this case:
Changing the Filterable Portfolio Tab Order using Divi Booster
Divi Booster includes an option to change the order of the filterable portfolio module tabs. It can be found at:
Filterable Portfolio Settings > Design > Layout > Tab Order
Like so:
Reverse Tab Order
To make the tabs display in reverse alphabetical order, set the Tab Order option to "Reverse":
Random Tab Order
To make the tabs display in a random order each time, set the Tab Order option to "Random":
Custom Tab Order (By Category Slug)
To make the tabs display in a custom order each time, set the Tab Order option to "By Slug". This will cause a new "Tab Order Slugs" option to appear. Entering a (comma-separated) list of category slugs here will cause the corresponding tabs to be displayed first, in the order given:
Here's how the filterable portfolio looks in this case:
Move "All" Tab to the End
Normally the main "All" tab will be shown at the start, regardless of the order you set for the individual category tabs. If you'd like to move the "All" tab to the end instead, you can do it using the "All Tab Position" option:
Here's how the filterable portfolio looks in this case:
The "All Tab Position" option is available in Divi Booster v4.2.3 onwards
Set a Custom Tab Order using PHP
To display the filterable portfolio tabs in a custom order without using a plugin, you can add the following PHP code to your site:
$filter = (new DBCFilterablePortfolioTabsTermsFilter());
$filter->init();
class DBCFilterablePortfolioTabsTermsFilter {
private $props;
private $atts;
public function init() {
add_filter('et_pb_module_shortcode_attributes', array($this, 'add_terms_filter'), 10, 3);
add_filter('et_module_shortcode_output', array($this, 'remove_terms_filter'));
}
public function add_terms_filter($props, $atts, $slug) {
if ($slug !== 'et_pb_filterable_portfolio') return $props;
$this->props = $props;
$this->atts = $atts;
add_filter('get_terms', array($this, 'portfolio_tabs_filter'));
return $props;
}
public function portfolio_tabs_filter($terms) {
return apply_filters('dbc_filterable_portfolio_tabs_terms', $terms, $this->props, $this->atts);
}
function remove_terms_filter($content) {
remove_filter('get_terms', array($this, 'portfolio_tabs_filter'));
return $content;
}
}
add_filter('dbc_filterable_portfolio_tabs_terms', 'dbc_sort_filterable_portfolio_tabs', 10, 3);
function dbc_sort_filterable_portfolio_tabs($terms, $props, $atts) {
$tab_category_slugs = 'charlie,echo,bravo'; // <- *** REPLACE these with your category slugs ***
if (!is_array($terms)) return $terms;
$slugs = explode(',', $tab_category_slugs);
$slugs = array_reverse($slugs);
foreach($slugs as $slug) {
$slug = trim($slug);
foreach($terms as $k=>$term) {
if (isset($term->slug) && $term->slug === $slug) {
$terms = array($k=>$term) + $terms;
break;
}
}
}
$terms = array_values($terms);
return $terms;
}Related Post: Adding PHP to the Divi Theme
Thank you for this information. I wonder: is it also possible to put 'all' at the end of 'Custom Tab Order (By Category Slug)?
Hey Hanneke, I've just updated Divi Booster (v4.2.3) with an option to move the 'all' tab to the end. I've added a section to the end of this post with details. I hope it helps, but let me know if you have any questions about it. Cheers!
Great overview of all the functionality Divi Booster entails thank you. I didn't realize how much it actually included easily worth the price.
You're very welcome, Jeff. Thanks!