Jan 7, 2019 | Divi Resources

How to create custom Divi module. Part 1: Development environment setup

Elegant Themes provides blocks to create content when we use to Divi Theme or Page Builder. These content creation blocks called Divi Modules. Divi theme and page builder already have some pre-built modules. One can set up a website using those modules but some user comes with specific requirements and for that, we can create custom Divi modules. Some example of Custom Divi Modules are Divi Blog Extras, Divi Blurb Extended. In this tutorial series, we will learn how to create custom Divi module similar to Divi Blurb Extended and how to add front-end support which is recommended after WordPress Gutenberg release. This is going to be a long journey so I’m dividing this tutorial into few parts.

We need to set up the development environment, before the creation of any custom Divi module. We need to install the dependencies. You can find the lists of items here to set up the development environment. You need following things to be installed before the creation of Custom Divi Module:

Latest Version of WordPress

You need to install the latest version of WordPress on your local server. You can use Local By Flywheel, XAMPP, Docker or Vagrant to create a local development environment. To check if your installation is working or not try to open localhost on your browser.

Install the latest Version of Node.js

Node.js is an open source server environment which uses JS on the server. To install the Node.js on your local machine you can navigate through their official website and simply install Node.js. We’re going to use some basic features of Node.js in Divi custom module creation. We need not take a deeper dive into this although you’re free to explore details. To check if the node has installed correctly run command node – -version in your terminal(Mac User) or command prompt(Windows User). If it returns the version, the node has installed successfully.node version check

Install the latest version of Yarn

This is optional to install but Elegant Theme recommended this to install than why not we? Yarn is an open source package manager. Yarn will help us to install dependencies and to manage them. To install Yarn visit their official website. You can choose your machine and latest stable version to install Yarn. To check if Yarn has installed correctly run command yarn – -version in your terminal(Mac User) or command prompt(Windows User). If it returns the version, yarn has installed successfully.

yarn version check

Install gettext

Get text is translation software. This will automatically translate our module to the different language. To install gettext visit their website. To check if gettext has installed correctly run command xgettext – -version in your terminal(Mac User) or command prompt(Windows User). If it returns the version, gettext has installed successfully.

xgettext version check

Conclusion

If you have installed all these dependencies and everything is working fine you are all set to create the Divi Module. I will cover more details about Divi custom module development in the coming post. You can subscribe to receive a newsletter about the next update. Meanwhile, feel free to drop a comment if you face any problem in the above steps.

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

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.

1 Comment

  1. Rocher Vincent

    Nice, but … Why not part 2, 3, 4 ….. 🙁

    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.

1 Comment

  1. Rocher Vincent

    Nice, but … Why not part 2, 3, 4 ….. 🙁

    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.

15 Best eCommerce Website Builders to Use in 2021

15 Best eCommerce Website Builders to Use in 2021

If you’re here, then it would be wrong to say that you’ve not ever interacted with an eCommerce platform. Most of the people living today, once in their lifetime, have come across an eCommerce platform and interacted with it. Because according to an Inviqa report it’s...

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

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts