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.
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:
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: