Change Default Tab in Filterable Portfolio Module

|

The Divi theme comes with a filterable portfolio module which lets you filter a list of projects by category. By default, all categories are shown initially. If you'd instead like to set a particular category as the default, here's how.

Setting the Default Portfolio Category using PHP

The following PHP code can be used to set a specified category as the default, to be shown when the portfolio is first loaded:

$feature = new DBC_Default_Portfolio_Tab('cat1');
$feature->init();

class DBC_Default_Portfolio_Tab {

    private $slug;

    public function __construct($category_slug) {
        $this->slug = $category_slug;
    }

    public function init() {
        add_filter('et_pb_filterable_portfolio_shortcode_output', array($this, 'dbc_set_default_portfolio_tab'));
        add_action('wp_head', array($this, 'dbc_default_portfolio_tab_css'));
    }

    function dbc_set_default_portfolio_tab($output) {
        $output = str_replace(
            'class="active" data-category-slug="all"', 
            'data-category-slug="all"', 
            $output
        );
        $output = str_replace(
            'data-category-slug="'.esc_attr($this->slug).'"', 
            'data-category-slug="'.esc_attr($this->slug).'" class="active"', 
            $output
        );
        return $output;
    }
    
    function dbc_default_portfolio_tab_css() {
        ?>
        <style>
            .et_pb_portfolio_filter_all {
                display: none !important;
            }
            .et_pb_portfolio_item:not(.project_category-<?php esc_html_e($this->slug); ?>) {
                display: none;
            }
        </style>
        <?php
    }
}

The only part you should need to change is the first line which specifies the slug of the category which is to be displayed by default. I've used 'cat1' in this example, but you should replace that with your own category slug.

There are a few things to be aware of with this code:

  • It removes the "all" category from the tabs list
  • It doesn't change the order of the remaining tabs (but here's a post on changing the tab order)
  • In its current form it will affect all portfolios on a site, so it is probably best suited to a situation where there is only one portfolio in use

If you need any of these limitations lifted, please let me know.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *