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.

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Running a website for the business is one of the crucial aspects of running a business in today’s time. Whether you’re manufacturing fashion apparel or designing web projects, an online platform is always a plus. Based on this, more and more businesses are adopting...

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

Divi Scroll Effects are a great way to turn a simple Divi website into a modern one. And not only modern but highly interactive with enhanced engagement for different areas of the site. You could highlight CTAs, content sections and hook users to the purpose you've...

7 Easy Steps To Create Popups for Divi With Divi Modal Popup

7 Easy Steps To Create Popups for Divi With Divi Modal Popup

Popups can help you do many beneficial things on your site. For example, showing discount coupons, sales, announcements and much more. With them, you could easily boost interaction on your site and turn more leads into conversion. Therefore, if you're looking for a...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts