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.
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.
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.
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
Nice, but … Why not part 2, 3, 4 ….. 🙁