How to create custom Divi module

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 version check

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.

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:
Arif
Dreamer, Schemer, Music & Technology enthusiast. He enjoys building things that speak HTTP. Arif is Development Head at Elicus and has over 13 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.

How to Set Up a Knowledge Base or Wiki Site With WordPress and Divi

How to Set Up a Knowledge Base or Wiki Site With WordPress and Divi

If you have developed a software or SaaS, it's needed you provide your customers with a guide on how to use it. If you don't, the chances are you'd get many support tickets just only for the use of it. To overcome this situation, you can create a knowledge base or...

Divi Travel Agency Child Theme to Showcase Your Travel Services

Divi Travel Agency Child Theme to Showcase Your Travel Services

Travel Agencies, holiday planners, and other tour-travel businesses need something unique to provide an awesome online virtual experience of their travel services. If you also belong to the same business niche running your website on WordPress with Divi, this Travel...

Top Divi Website Examples to Inspire Your Design in 2024

Top Divi Website Examples to Inspire Your Design in 2024

Divi is a renowned name in the web design industry that offers unmatched flexibility to open your creativity.  It doesn’t matter how experienced you are with Divi, finding inspirational design ideas from top Divi websites can be a game-changer. To clarify it more...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts