How to move a module to child theme - kary4/divituts GitHub Wiki

User case

Sometimes user will need to customize various Divi modules, for example having the Blog module in full width but the featured image on the left and the post content on the left.

NOTE: this cannot be achieved only with CSS

Customize any Divi Module

All the modules PHP code can be found in Divi/includes/builder/module folder, each of the module has it's own PHP file

Each module is actually a PHP class which Extends the `ET_Builder_Module` class.

In this wiki page I will use the Blog module, but the same process will be the same for any other module.

This is how the default class for the blog module starts:

class ET_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased { {
	//all the PHP code that build that module
}

Now having that in mind, we can go ahead with our customization.

Step to follow

Create a child theme
In the child theme folder create a new folder - this will be a folder where all the individual module bits of code will be placed
in the above example - for the blog module, I will call my file (that holds the PHP code for the blog module) cbm.php
in cbm.php I will place the same exact original code for the Blog Module but I will prefix the default class name with WPC_ because you cannot have the same PHP class (in both the original blog.php and in the custom file cbm.php

The code will look like:

<?php
class WPC_ET_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased {
	//all the PHP code that build that module
}

At this moment, I can change anything in this new custom file
Next step, will be to load the custom file, deregister the default shortcode, and assign our custom PHP class to the same shortcode. So in Functions.php we need to add:

/*================================================
#Load custom Blog Module
================================================*/
function divi_child_theme_setup() {
	get_template_part( 'custom-modules/cbm' );
	$cbm = new WPC_ET_Builder_Module_Blog();
	remove_shortcode( 'et_pb_blog' );
	add_shortcode( 'et_pb_blog', array( $cbm, '_shortcode_callback' ) );
}
add_action( 'et_builder_ready', 'divi_child_theme_setup' );

function divi_custom_contact_form_class( $classlist ) { 
// Blog Module 'classname' overwrite. 
$classlist['et_pb_blog'] = array( 'classname' => 'WPC_ET_Builder_Module_Blog',); 
return $classlist; 
}

Code explanation:

get_template_part( 'custom-modules/cbm' );

We need to require that custom file that holds the custom blog module code

$cbm = new WPC_ET_Builder_Module_Blog();

Creates a variable which will have the new custom PHP Class that creates the blog module.

remove_shortcode( 'et_pb_blog' );

We remove the original shortcode that actually output the Blog Module

add_shortcode( 'et_pb_blog', array( $cbm, '_shortcode_callback' ) );

Assign our $cbm variable to the et_pb_blog shortcode.