Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsFilterable Portfolio Module
How to Move the Filterable Portfolio Module From the Parent Theme to a Child Theme
How to Move the Filterable Portfolio Module From the Parent Theme to a Child Theme

Learn how to move the Filterable Portfolio Module from your parent theme to a child theme to preserve customizations during updates.

Updated over 3 months ago

Customizing your WordPress site often requires moving elements from the parent to a child theme, ensuring your modifications are preserved during updates.

One such customization might involve the Filterable Portfolio Module, a powerful tool for showcasing projects and portfolios dynamically.

In this guide, we will walk you through the process of moving the Filterable Portfolio Module from your parent theme to a child theme.

Note: Please ensure you already have the Divi Child theme activated on your WordPress Site. If you don't have a child theme yet, check out the How to Create a Child Theme for Divi article.

  1. Using your hosting File Manager app or using the Advanced File Manager WordPress plugin, browse the wp-content/themes/child theme folder, create a new folder, and name it includes

  2. Copy the file called FilterablePortfolio.php located in wp-content/themes/divi/includes/builder/module/ into the wp-content/themes/child theme folder/includes/ folder

  3. Rename the file (from the child theme folder) to custom-FilterablePortfolio.php

  4. Open up the custom-FilterablePortfolio.php file and replace this code (the first line):

    class ET_Builder_Module_Filterable_Portfolio extends ET_Builder_Module_Type_PostBased {


    With:

    class custom_ET_Builder_Module_Filterable_Portfolio extends ET_Builder_Module_Type_PostBased {

  5. Replace this line of code:

    $this->vb_support = 'on';


    With:

    $this->vb_support = 'off';

  6. Remove these lines of code (from the bottom of the file):

    if ( et_builder_should_load_all_module_data() ) {
    new ET_Builder_Module_Filterable_Portfolio();
    }

  7. Open the functions.php file from your child theme folder and add the following code at the very bottom:

    /*================================================
    #Load custom Filterable Portfolio Module
    ================================================*/
    function divi_custom_filterable_portfolio_module() {
    get_template_part( '/includes/custom-FilterablePortfolio' );
    $dcfm = new custom_ET_Builder_Module_Filterable_Portfolio();
    remove_shortcode( 'et_pb_filterable_portfolio' );
    add_shortcode( 'et_pb_filterable_portfolio', array( $dcfm, '_shortcode_callback' ) );
    }

    add_action( 'et_builder_ready', 'divi_custom_filterable_portfolio_module' );


    function divi_custom_filterable_portfolio_class( $classlist ) {
    // FiterablePortfolio Module 'classname' overwrite.
    $classlist['et_pb_filterable_portfolio'] = array( 'classname' => 'custom_ET_Builder_Module_Filterable_Portfolio',);
    return $classlist;
    }

    add_filter( 'et_module_classes', 'divi_custom_filterable_portfolio_class' );

  8. Save your changes

Note: After moving the Filterable Portfolio module in the Child theme, Divi Visual Builder will assume it is a third-party module; therefore, it will show as a Grey box in Visual Builder. However, it should work fine with its settings front-end.

Did this answer your question?