Customizing your Divi site often involves modifying Divi elements to better suit your needs.
Moving the Portfolio Module from the parent to child theme ensures that your customizations are preserved during theme updates, maintaining the integrity of your site's design and functionality.
This article will provide step-by-step instructions on how to move the Portfolio Module from the parent theme to a child theme, ensuring a smooth and effective customization process.
Note: The process requires you to have installed and activated a Divi Child theme. If you don't have an active Divi child theme, 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 Portfolio.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-Portfolio.php
Open up the custom-Portfolio.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_Portfolio();
}Open the functions.php file from your child theme folder and add the following code at the very bottom:
/*================================================
#Load custom Portfolio Module
================================================*/
function custom_portfolio_setup() {
get_template_part( 'includes/custom-Portfolio' );
$custom_portfolio = new custom_ET_Builder_Module_Portfolio();
remove_shortcode( 'et_pb_portfolio' );
add_shortcode( 'et_pb_portfolio', array( $custom_portfolio, '_render' ) );
}
add_action( 'et_builder_ready', 'custom_portfolio_setup' );
function divi_custom_portfolio_class( $classlist ) {
$classlist['et_pb_portfolio']['classname'] = 'custom_ET_Builder_Module_Portfolio';
return $classlist;
}
add_filter( 'et_module_classes', 'divi_custom_portfolio_class' );Save your changes
Note: After moving the Portfolio module into 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.