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.
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
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
Rename the file (from the child theme folder) to custom-FilterablePortfolio.php
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 {Replace this line of code:
$this->vb_support = 'on';
With:$this->vb_support = 'off';
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();
}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' );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.