Apr 20, 2020 | Divi Resources

How to create custom Divi module part 2: Setting up basic module structure

In the previous tutorial, we setup development environment for Divi module creation. In this tutorial, we will create the Divi extension and will set up a necessary custom Divi module. If you’re getting confused between Divi extension and Divi modules than I would like to clarify that Divi extension is nothing less than a plugin which extends the functionality of Divi theme in some way by adding some new features or by changing the theme behavior while Divi module is the content creation block. Single Divi Extension could have more than one Divi Module.

Before moving further, I assume you have already installed all dependencies, the latest version of WordPress & Divi theme on your local machine.

Running Create Divi Extension Command:

Divi provided the create-divi-extension command to set up a basic module structure. We need to navigate through our plugin directory using the command line(cmd for Windows) or Terminal(for Mac).

cd wp-content/plugins

When you’re in plugin folder your prompt will look like this:

Now run the below command to create Divi extension:

npx create-divi-extension divi-extension-tutorial

This command will install divi-scripts, react & react-dom in your extension folder after that It will ask for few more details which include extension name shown on the WordPress dashboard, extension URL, extension description, author name, author URL, a prefix which is the unique identifier for variables, functions & classes.

Once done, you can see your extension in the plugin directory. Your module file structure looks like:

Let’s navigate through folders, files & their usability

After setting up Divi extension, you can locate several files & folders inside your extension folder. I’m explaining the functionality of some files which we’re playing with during the phase of development.

Folder: divi-extension-tutorial

This is the parent folder where our extension files reside. This folder has the same name we have chosen while running the create-divi-extension command on terminal.

  • File: divi-extension-tutorial/divi-extension-tutorial.php
    This file has the same name as our extension folder. This is the traditional WordPress approach that there must be a file which should the exactly similar name to the plugin folder. We could define or alter plugin header information in this file. Like the author, description and other things.
  • File: divi-extension-tutorial/package.json
    We will include all the dependencies in this file. If we would like to add any other dependency other than pre-installed one, like jQuery, owlCarousel, we need to define those dependencies in this file, and later we can install them by running the command npm install.
Folder: divi-extension-tutorial/scripts

This is the folder where we place JavaScript files. frontend.js is the default one we can add some other external JS files as well and later on can enqueue them.

  • File: divi-extension-tutorial/scripts/frontend.js
    This is where you can write your custom JavaScript. You need not enqueue this file in the traditional way. This file will be included automatically after compilation.
Folder: divi-extension-tutorial/includes

This folder contains our module files.

  • File: divi-extension-tutorial/includes/loader.php
    This file loads all the module on the backend.
  • File: divi-extension-tutorial/includes/loader.js
    This file load all the modules on the frontend.
  • File: divi-extension-tutorial/includes/DiviExtensionTutorial.php
    This file is responsible for initializing our module. This file also controls the text domain for translation.
Folder: divi-extension-tutorial/includes/modules
  • File: divi-extension-tutorial/includes/modules/index.js
Folder: divi-extension-tutorial/includes/modules/HelloWorld

This is the core file of our module. We’re going to define the setting fields and all the custom functionality of our module in this file.

  • File: divi-extension-tutorial/includes/modules/HelloWorld/HelloWorld.php
    This file is responsible for displaying our module on the visual builder. Divi is using the combination of React & JSX to set up the module on the frontend.
  • File: divi-extension-tutorial/includes/modules/HelloWorld/HelloWorld.jsx
    This file is responsible for displaying our module on the visual builder. Divi is using the combination of React & JSX to set up the module on the frontend.
  • File: divi-extension-tutorial/includes/modules/HelloWorld/style.css
    This file is located under the module folder. You can write each module specific CSS in their respective style.css file.

These are the primary files we’re going to use in the next tutorial to create custom Divi modules. Other files are useful, but the are only used for the compilation purpose you need not worry about those files. In the next tutorial, we will learn about some yarn commands followed by adding setting fields in Divi module and how to display them on jsx side for the visual builder.

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.

3 Comments

  1. Kirb Ratilla

    Thanks for this, Mohd.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Comments

  1. Kirb Ratilla

    Thanks for this, Mohd.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Facebook modules to Share, Update, Like, Comment, and much more

Divi Facebook modules to Share, Update, Like, Comment, and much more

Over the last decade, Facebook has become one of the online platforms that can bring huge profits to any business. Nevertheless, Facebook alone doesn't create the buzz about your business in the world, but the community behind it makes the difference. The comments you...

Divi Sticky feature & everything you can do with it

Divi Sticky feature & everything you can do with it

The Divi 4.6 update brought an impressive feature to the theme, which was missing for a very long time. The Divi sticky element option for every module. Using this particular option, you can now stick any module of the builder on the edge of the browser. Furthermore,...

How to create Divi post carousel & recent posts slider

How to create Divi post carousel & recent posts slider

Post carousels are very useful when it comes to increasing user sessions on a blog. You can add a recent post slider at the bottom of an article, and when users interact with it, they might navigate to it. That's it, from one blog post, you've brought readers to...