IMPORTANT: Transition to the New Divi 5.0 API - Repository Deprecated

Please take note that this repository is no longer maintained and should not be utilized. We strongly recommend that you use the Divi 5.0 API for all new extensions. For further information and to participate in the Divi Beta Program, visit this page: https://devalpha.elegantthemes.com/.

Create Divi 4.x Extension

Create Divi 4.x Extensions with no build configuration.

• Creating an Extension – How to create a new extension (for the Divi 4.x API) (Deprecated).
• User Guide – How to develop extensions bootstrapped with Create Divi Extension.

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.

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 my-extension. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-extension
├── includes
|   ├── fields
│   │   └── Input
│   │       ├── Input.jsx
│   │       └── style.css
│   ├── 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
└── README.md

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

npm run build or 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 or yarn zip

Runs build and then creates a production release zip file.

User Guide

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

• Updating to New Releases
• Folder Structure
• Available Scripts
• Supported Browsers
• Supported Language Features and Polyfills
• Syntax Highlighting in the Editor
• Displaying Lint Output in the Editor
• Formatting Code Automatically
• Debugging in the Editor
• Installing a Dependency
• Importing a Component
• Adding a Stylesheet
• Post-Processing CSS
• Adding a CSS Preprocessor (Sass, Less etc.)
• Adding Images, Fonts, and Files
• Adding Flow
• Adding Custom Environment Variables
• Can I Use Decorators?
• Fetching Data with AJAX Requests
• Running Tests
• Debugging Tests
• Deployment
• Advanced Configuration
• Troubleshooting

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

Philosophy

• 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 -webkit- 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.

Contributing

We'd love to have your helping hand on create-divi-extension! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

Acknowledgements

We are grateful to the authors of create-react-app for creating the awesome tool on which create-divi-extension is based.