Hi everyone, today we continue our Divi 3.1 Series post; we have already seen how to setup our Divi development environment and how to create our Divi plugin using the “Create Divi Extension” tool by Divi team.
Today we will see how to create a custom Divi module. So let’s get started!
ABOUT THE PLUGIN
The plugin we are going to create is just for example purposes; however, we want to achieve some useful results.
Among the others we thought of a custom Audio module with some advanced settings that till now lacks or that we can achieve by using css in the Advanced Custom Css but not with easier settings in the Design Tab.
We will define our new settings in our next Series post without adding a new custom module: we will just customize the Divi Audio module using some filter hooks; for now, however, we want to see how to create a custom module based on the Divi Audio one.
ADDING OUR CUSTOM MODULE
So, first of all we have to browse our Divi Extension folder, we will see a Modules folder and a “HelloWorld” folder inside of it. The “Create Divi Extension”, in fact, added a sample custom module here; in this folder you will find the three main files you need for adding a custom module: the main .php file, the .jsx one that is responsible for the ReactJS visual builder rendering and a Style file for the css of the module. We just have to customize it to fit our needs.
LET’S RENAME
As first step we will rename both the folder and the main files inside of it (the ‘HelloWorld.php’ and the ‘HelloWorld.jsx’) with our module name that will be ‘AudioAdvanced’ so that our final structure will look like this:

 

  • AudioAdvanced
    • AudioAdvanced.jsx
    • AudioAdvanced.php
    • style.css
HOW DIVI MODULES WORK
Before we move to the code let’s give a look at the working system of Divi Modules. As we have seen there are inside the main folder three files; while the ‘style.css’ one is optional (we need it for adding our custom css relative to the custom module) even if in practice it is essential for complex modules, the other two files are the core of Divi modules.
In our ‘AudioAdvanced.php’ will live the real module code; inside this file we will have basically a class that extends the ‘ET_Builder_Module’ Divi one. In this class we’ll have two ‘public’ variables (the $slug and the $vb_support) and three main functions (the ‘init()’, the ‘get_fields()’ and finally the ‘render()’ one).
Essentially what we will have to do will be to add all the fields we need in our ‘get_fields()’ function (not really all indeed, cause the background one and many others concerning the module design will be added automatically by Divi). Then in the ‘render()’ function we will render the fields in a Html output thanks to the ‘->props()’ method for getting our settings and input values.

START RUNNING DOCKER AND YARN

First of all let’s open the terminal, change directory to our Divi Environment folder and execute the code “docker-compose exec -u 1000 wordpress /bin/bash“; then we have to move to the plugins directory

and execute the command “yarn start”. Now we are ready to develop our custom module also in the Visual Builder and we will see in real time our code changes.

OUR AUDIO ADVANCED MODULE
It’s time to code! So enter our main .php file and edit the class name, the slug name, the module name in the ‘init()’ function, but above all we will copy all the field of a standard Divi Audio module. These ones will be, in fact, our base for adding new settings and customize our Audio Advanced module.
If you wonder where you can find both the ‘fields’ array and the ‘render’ code of a specific Divi module – in our case the Audio one – you just have to go in ‘themes/Divi/includes/builder/module/’. In each php module file you will also find the code about the Advanced Fields (here the documentation) and about the  Custom Css Fields (here the documentation). Our final code in the php file will look like this:
IN THE VISUAL BUILDER
With the code above we can easily add our custom module in posts and pages and customizing it so that the final result is ok.
However if you work on your module in the Visual Builder you will see all the fields and options properly but nothing will be rendered. You will have to edit your .jsx file as described in the Divi documentation React section.
You will also have to open the ‘index.js’ file in the ‘modules’ folder and modify it according to our .jsx file.
NEXT TUESDAY POST
Next tuesday we will deepen how to work in our .jsx react component and subsequently we will add our new settings to the Divi Audio module using some filter hooks.
Stay Tuned. Cheers!

SupportHost

You have Successfully Subscribed!

CodeCanyon Plugins

You have Successfully Subscribed!

Elegant Themes

You have Successfully Subscribed!

Try Divi!

You have Successfully Subscribed!

Divi Plugins

You have Successfully Subscribed!

Advanced Blurbs Plugin

You have Successfully Subscribed!

Bloom!

You have Successfully Subscribed!

Divi Cake Layouts

You have Successfully Subscribed!

Divi Cake Plugins

You have Successfully Subscribed!