Jun 2, 2020 | Divi Resources

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.

Posted By:
Mohd Arif
Dreamer, Schemer, Music & Technology enthusiast. He enjoys building things that speak HTTP. Arif is Development Head at Elicus and has over 8 years experience in the WordPress development industry.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

How to add Google reCAPTCHA in Contact Form 7 in easy steps

How to add Google reCAPTCHA in Contact Form 7 in easy steps

It’s a must that a contact form should have Google reCAPTCHA or any other security options enabled on it. Well, reCAPTCHA is most recommended. It protects your contact forms from getting filled out by bots or spams. And if you want to add reCAPTCHA on your contact...

Divi Content Toggle to display key information in compact manner

Divi Content Toggle to display key information in compact manner

Having long pages with detailed information can delight Google bots, however, for users, it can be a bulky experience. They might find themselves overwhelmed or either confused when looking over pages overtaken by content. Then there comes the Divi Content Toggle...

Create Divi structured data pages easily for Google rich snippets

Create Divi structured data pages easily for Google rich snippets

Having Divi structured data markup pages can help you and your website in many ways. It not only features your web pages as Google rich snippets. But it brings a valuable amount of organic traffic. And it can be done for any website of any CMS, such as WordPress,...

Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.

One Plugin, Many Possibilities

You have Successfully Subscribed!