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

Divi Hosting Company Child Theme to Present Hosting Services

Divi Hosting Company Child Theme to Present Hosting Services

Hosting companies require a practical Divi hosting child theme for their WordPress website to introduce their business to the customers. This free Divi Hosting child theme perfectly displays all the services, solutions, latest updates, and faqs on your Divi website....

How to Create a Divi Custom Post Type Slider

How to Create a Divi Custom Post Type Slider

Custom post type is an innovative approach in WordPress and Divi also supports custom post types to provide smart solutions to its users. If you are using the Divi theme, you can unlock the full potential of custom post types. Divi custom posts give complete freedom...

Free Divi Martial Arts Child Theme to Display Combat Training

Free Divi Martial Arts Child Theme to Display Combat Training

If you have a martial arts academy website built with Divi on WordPress, an ideal combat sports theme is essential to showcase combat sports practices. This free Divi Martial Arts Child Theme is perfect for presenting training classes, academy history, important...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts