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.
cd .../wp-content/plugins npx create-divi-extension my-extension cd my-extension yarn start
Then open your WordPress site to see your extension. When you’re ready to deploy to production, create a minified bundle with
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.
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
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 │ ├── 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:
Inside the newly created project, you can run some built-in commands:
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 buildor
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 zipor
buildand then creates a production release zip file.
The User Guide includes information on different topics, such as:
A copy of the user guide will be created as
README.mdin 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.
Your environment will have everything you need to build a Divi extension:
-webkit-or other prefixes.
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
create-divi-extension! See CONTRIBUTING.md for more information on what we're looking for and how to get started.