How to create custom Divi module part 4: Functions used in the Divi module file

We learn about setting up the Custom Divi Module in our previous tutorials. Now we will deep dive into the coding part of the module. Before moving further, we need to learn about the order class.

Understanding the concept of order class

Divi dynamically adds a unique class in every module, which is called order class. This class created in a way module_slug followed by a numeric value. This numeric value depends upon the number of instances on any particular page. For example, If we have two occurrences of Divi Extension Tutorial module on our page order class for the first occurrence, will be divi_extension_tutorial_0; the order class for the second occurrence will be divi_extension_tutorial_1.

Divi Module functions and their use

When you set up the module using npx create-divi-extension command, We will get the default module with the name Hello World. This module code resides at the following path plugins/divi-extension-tutorial/includes/modules/ HelloWorld. This folder has three files.
PHP Code: HelloWorld.php(responsible for displaying module to the user)
JSX Code: HelloWorld.jsx(responsible to render module on builder)
CSS: style.css (Modules stylesheet)

Function: init
This function contains the initialization information.

Function: get_fields
We can define setting fields in get_field functions.

Function: render
This function returns the output to display on the user end.

Except for these functions, we have three variables $slug, $vb_support, $module_credits.
$slug is the unique identifier of your module.
$vb_support variable used to turn on the visual builder support to your module.
$module_credits defines the Author details of the module.

We need two more functions to set up the basic module, although complex module may have many functions within the module class depending upon the functionality of your module.

Function: get_settings_modal_toggles
This function creates the toggle in the module.

Function get_advanced_fields_config
This function used to set up the default module values and to change their selector like Margin, Padding, Background. The default selector is an order class of modules. We can change the selector in this function.

How to add toggles & sub-toggles in the module

As I mentioned above, that toggle and sub-toggle code go into the get_settings_modal_toggles function. We have three tabs in Divi Module, Content, Design, and Advanced.
The Content tab index is general.
The Design tab index is advanced.
The Advanced tab index is css.

For the addition of tab in Content, tab array will be; for example, we want to add a tab with Module Content.

[php]
'general' => array(
'toggles' => array(
'blurb_content' => array(
'title' => esc_html__( 'Module Content', 'text-domian' ),
),
),
),
[/php]

For addition tab in Design tab array will be; for example we want to add tab with the name Module Layout

[php]
'advanced' => array(
'toggles' => array(
'blurb_layout' => array(
'title' => esc_html__( 'Module Layout', 'text-domain' ),
'priority' => 1,
),
),
),
[/php]

Here priority index defines where you want to display that toggle in any particular tab. Priority with 1 display that toggle on first position. We can add sub-toggles inside toggles.
[php]'advanced' => array(
'toggles' => array(
'text_settings' => array(
'title' => esc_html__( 'Text Settings', 'text-domain' ),
'priority' => 1,
'sub_toggles' => array(
'global_settings' => array(
'name' => esc_html__('Global', 'text-domain' ),
),
'general_settings' => array(
'name' => esc_html__('Text', 'text-domain' ),
),
'link_settings' => array(
'name' => esc_html__( 'Link', 'text-domain' ),
),
),
'tabbed_subtoggles' => true,
),
),
),[/php]
Like this we can create as many toggle & sub-toggles as per our module’s requirement.
In the next tutorial, we’ll learn about the module’s setting fields and how to render those setting fields in PHP and JSX side. Drop a comment if you face any issue till now.