Introducing The Divi Developer API
We are proud to announce the Divi Developer API, a new foundation that will allow developers to extend Divi in new and exciting ways.
Today we are incredibly excited to announce the release of Divi 3.1, the biggest and most ambitious update that we have tackled since the release of Divi 3.0 well over a year ago. This update opens up Divi with a new API for developers that makes it easy to create custom modules that are compatible with Divi’s Visual Builder. This new API comes with extensive documentation and tutorials, as well as a Create Divi Extension utility that will help you jumpstart your own custom Divi modules. This massive update lays the foundation for a thriving development community that will greatly benefit every single Divi user as more and more third party modules are made available.
Create Your Own Custom Modules
And Extensions For the Visual Builder
You can now create your own custom modules that will work in Divi’s Visual Builder using a simple API.
Now you can take advantage of Divi’s Visual Builder technology to create custom modules and extensions that meet your unique needs and the needs of the community. Using a custom react component, a live preview of your module will be rendered in the builder, allowing users of your module to configure it in a visually intuitive manner. Once the base of your module has been created, replicating the PHP render method in React is a relatively simple process. Module settings are passed down to your component as props and then Divi takes care of the rest, automatically re-rendering your module as its settings are modified.
This represents a huge and amazing opportunity for the Divi community. We want to empower developers by giving them the ability to create custom Visual Builder modules that they can use for their clients or release to the wider world of Divi users. If you have ever had the inkling to dig a bit deeper into Divi, now’s the time to get started!
Automatic Support For
Current Third Party Modules
Current third party modules will work automatically in the Visual Builder, even if no Visual Builder support is added.
A lot of great custom third party modules already exist for Divi. Until now, these modules did not work in the Visual Builder and could only be edited in the classic Divi Builder. That changes today! Not only are we giving developers the tools they need to update their modules with full visual editing support, we are extending support for these modules automatically in the Visual Builder in a limited capacity. To make a long story short: you can now edit all third party modules in the Visual Builder just like you can in the classic Divi Builder. If no visual editing support is enabled for the module, it will simply be rendered as a block element. All of the module’s settings will still be editable.
This means that if you have been avoiding the Visual Builder due to incompatible third party modules, you will be happy to learn that those modules can now be edited in the Visual Builder without any additional setup required from the module’s developer.
The New Developer Documentation
New developer docs and tutorials will teach you how to create custom Divi modules with ease!
Browse The Divi Developer Documentation
Along with Divi 3.1, we are introducing a new developer section to our documentation. Our developer docs include step by step tutorials that will teach you how to create your own Divi modules, and also provide a full overview of the Divi API. Even if you are just getting started with web development, our beginner tutorials will guide you through the process and help you get started.
Divi Developer Tutorial Series
- Setting Up Your Divi Development Environment
- Creating A Divi Extension
- Creating A Custom Divi Module
- Adjusting Settings Field Visibility
- Defining Divi Module Settings
- Grouping Divi Module Settings
- Defining Custom CSS Fields For Modules
- Enabling Visual Builder Support For Your Module
- Advanced Field Types For Module Settings
- Divi Theme Hooks
The Create Divi Extension Utility
This Divi extension utility does all of the grunt work for you, setting up your local development environment and giving you a huge jumpstart on creating your custom modules.
Download The Create Divi Extension Utility
Along with our documentation comes the Create Divi Extension utility, including a boilerplate for quickly creating custom Divi modules. It offers a modern build setup with no configuration. A single command will set up your development environment, install dev dependencies, and build a base React app within a WordPress plugin with all the necessary files and the correct structure for registering your new extension with Divi and WordPress. Finally, it will produce a basic module that will work right off the bat. You can then jump in and start configuring your extension and building your module. When you are finished, a single command will optimize your extension and ready it for production.
This new utility is open source and based off Create React App. You can use it, fork it and modify it however you like. You are also welcome to open and comment on issues within the open github repo.
The Divi Extension Example
In addition to the Create Divi Extension Utility, we have also created a basic Divi Extension Example that you can use to learn from. This is the perfect blueprint for how a custom Divi module should be created. If you are the type of person that likes to learn by jumping in and digging through the code, this is the perfect tool for you!
This Is Just The Beginning
Divi 3.1 is a massive update and a huge step forward. It’s also just the beginning, and we are already thinking about how we can improve the developer side of Divi and open up even more possibilities for the community. The new Divi Developer API is available today, so download Divi and take it for a spin. Let us know what you think in the comments, and don’t forget to check back next week for even more great Divi features coming your way.