Need help with create-divi-extension?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

155 Stars 47 Forks MIT License 1.6K Commits 326 Opened issues

Services available


Need anything else?

Contributors list

Create Divi Extension <!--CircleCI-->

Create Divi Extensions with no build configuration.

Create Divi Extension works on macOS, Windows, and Linux. If something doesn’t work, please file an issue.

Quick Overview

cd .../wp-content/plugins
npx create-divi-extension my-extension
cd my-extension
yarn start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open your WordPress site to see your extension. When you’re ready to deploy to production, create a minified bundle with

yarn build

npx create-divi-extension my-extension

Get Started Immediately

You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

Just create a project, and you’re good to go.

Creating an Extension

You’ll need to have Node >= 6 on your local development machine.

To create a new extension, run a single command from inside your WordPress plugins directory:

npx create-divi-extension my-extension

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

It will create a directory called

. Inside that directory, it will generate the initial project structure and install the transitive dependencies:
├── includes
│   ├── modules
│   │   └── HelloWorld
│   │       ├── HelloWorld.jsx
│   │       ├── HelloWorld.php
│   │       └── style.css
│   ├── loader.js
│   ├── loader.php
│   └── MyExtension.php
├── languages
├── node_modules
├── scripts
│   └── frontend.js
├── styles
├── my-extension.php
├── package.json

No configuration or complicated folder structures, just the files you need to build your extension. Once the installation is done, you can open your project folder:

cd my-extension

Inside the newly created project, you can run some built-in commands:

npm start
yarn start

Runs the extension in development mode. Open your WordPress website to view it.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

Build errors

npm run build
yarn build

Builds the extension for production. It correctly optimizes the build for the best performance.

The build is minified. Your extension is ready to be deployed.

npm run zip
yarn zip


and then creates a production release zip file.

User Guide

The User Guide includes information on different topics, such as:

A copy of the user guide will be created as
in your project folder.


  • One Dependency: There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

  • No Configuration Required: You don't need to configure anything. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

  • No Lock-In: You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

What’s Included?

Your environment will have everything you need to build a Divi extension:

  • React, JSX, ES6, and optional Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Auto prefixed CSS, so you don’t need
    or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • Hassle-free updates for the above tools via a single dependency.

Check out this guide for an overview of how these tools fit together.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain the configuration.


We'd love to have your helping hand on

! See for more information on what we're looking for and how to get started.


We are grateful to the authors of

for creating the awesome tool on which

is based.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.