Skip to content

How to move a module to child theme

Karen Balozyan edited this page Aug 20, 2018 · 1 revision

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' );

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.

At this time everything is done properly and we have the ability to properly customize, the blog module, in this case.

Clone this wiki locally
You can’t perform that action at this time.