DIRECTORY STRUCTURE
- For all custom modules
- Within each custom module
For all custom modules
- We highly recommend always putting modules in a child theme (otherwise they get deleted every time you update your theme). If you don’t understand the how to use child themes and why, see this great post…
- Then in “Modules/Module-Name”
- Best to match the folder name with the name of that custom module as defined by the init.php definition file
Within each custom module
- To create your own modules with the Module Extender for Divi plugin you MUST have a definition file called “init.php”. This is what the plugin looks for, so without it the module will not be loaded.
- You can also place in the folder you can also place other files, such as css and js files that your module uses, and the creation and editing of css and js are outside the scope of this tutorial.
HELLO WORLD LINE BY LINE
Divi Module creation Step 2. Your first custom module:
<?php
This opening php tag should be familiar to you. If not, here’s a php beginner’s link: http://code.tutsplus.com/courses/php-fundamentals
class ET_Builder_Module_MW_Helloworld extends ET_Builder_Module {
Here is where we assign a class. Literally making a class, and adding it as an extension to Elegant Themes builder module. This class name must be unique to that site.
function init() {
$this->name = 'Hello World';
$this->slug = 'et_pb_hellowworld';
$this->whitelisted_fields = array( );
$this->custom_css_options = array( );
}
$this->name is what is visible in the module selection list.
$this->slug is a unique identifier you nominate for the module. It must be prefixed by “et_pb_”. All lower case. No space.
Lines 6-13 are covered in a future post dealing with adding fields to a module.
function get_fields() {
$fields = array( );
return $fields;
}
function shortcode_callback( $atts, $content = null, $function_name ) {
$module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name );
This uses a divi function to assign a css class. We discuss this further in future posts but will become very important for styling purposes as our module grows.
It is in cued in the output using the $module_class variable.
$output = '<div class="'.$module_class.'"><h1>Hello World</h1></div>';
return $output;
}
This function returns an output that is what is displayed on the front end. Each module, in order to display anything, must “return” something from this function. In this case it is the result of $output, which in this case is a h1 Hello World string.
}
new ET_Builder_Module_MW_Helloworld;
This tells the site to make an instance of the class we just designed without this the class will just sit there and do nothing.
$module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name );
This uses a Divi function to assign a css class. It will be discussed further in future posts and will become very important for styling purposes as our module grows.
It is included in the output using the $module_class variable.
new ET_Builder_Module_MW_Helloworld;
This tells the site to make an instance of the class we just designed. Without this the class will just sit there and do nothing.
You should now have a module that will display a h1 tag containing Hello World. This is just the beginning of our explainer articles.
<?php
class ET_Builder_Module_MW_Helloworld extends ET_Builder_Module {
function init() {
$this->name = ‘Hello World’;
$this->slug = ‘et_pb_hellowworld’;
$this->whitelisted_fields = array( );
$this->custom_css_options = array( );
}
function get_fields() {
$fields = array( );
return $fields;
}
function shortcode_callback( $atts, $content = null, $function_name ) {
$module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name );
$output = ‘<div class=”‘.$module_class.'”><h1>Hello World</h1></div>’;
return $output;
}
}
new ET_Builder_Module_MW_Helloworld;
$module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name );
new ET_Builder_Module_MW_Helloworld;