Note: This tutorial series is intended for advanced users. An advanced understanding of coding in PHP and JavaScript is required.
Before creating Divi Extensions, you must ensure that you have the proper environment set on your local system. The requirements are:
You can use several options to get a local development environment up and running. A few examples are:
In this tutorial, we’ll use Docker with the official docker image for Divi Development.
Install Docker
The most complicated part of installing docker is figuring out which version to install. Use the following tables to locate the correct version for your operating system, and then download and run the installer for that version.
Mac
OS Version | Installer | Detailed Instructions | Complete Documentation |
OS X 10.11+ | |||
OS X 10.8-10.10 |
Windows
OS Version | Installer | Detailed Instructions | Complete Documentation |
10 Pro+ | |||
10 Home |
Linux
OS Version | Detailed Instructions |
Ubuntu 16.04+ | |
Fedora 25+ |
Using Linux? Follow the instructions in the table, as there is no Docker installer for Linux.
Start Docker Containers
The Divi Development Environment consists of two docker containers, one for the database and one for everything else. Starting/Stopping multiple containers for a single environment can be tedious. Luckily, we won’t have to worry about that because we’re going to use the docker-compose command.
Docker Compose is a tool for defining and running multi-container Docker applications.
Go ahead and create a new directory for your development workspace. The directory should be located somewhere below one of the following paths (depending on your OS):
Default Shared Directories
Mac:
/Users, /Volumes, /private, & /tmpWindows:
C:\UsersLinux:
/home
Now, create a file named docker-compose.yml Inside your workspace directory, as shown below:
version: '3.3'
services:
mariadb:
image: 'mariadb:10.2.14'
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: wordpress
DATADIR: /data
restart: on-failure
volumes:
- 'database:/data'
network_mode: 'service:wordpress'
wordpress:
image: 'elegantthemes/divi-dev'
hostname: divi-dev
volumes:
- '${PWD}:/workspace/wordpress'
ports:
- '80:80' # nginx
- '3306:3306' # mariadb
- '3000:3000' # webpack hmr
volumes:
database: {}
Using Windows? You need to replace ${PWD} in the compose file with the full path to the directory where the compose file is located.
Run WordPress Container Setup Script
Open a terminal window in your workspace directory and run the following commands:
docker-compose up -ddocker-compose exec -u 1000 wordpress divi-dev setup.
Depending on your internet connection speed, this could take a few minutes (or more). When it’s done, you should see the following:
Creating network divi-dev_default with the default driver Creating divi-dev_wordpress_1 ... done Creating divi-dev_mariadb_1 ... done Downloading WordPress 4.9.5 (en_US)... md5 hash verified: f009061b9d24854bfdc999c7fbeb7579 Success: WordPress downloaded. Initializing database... ████████████████████| 100% Success: Generated 'wp-config.php' file. Success: WordPress installed successfully. Success: Rewrite rules flushed. Success: Rewrite structure set.Setup Complete! Here's how you can access WordPress:URL: http://local.divi-dev.site Username: divi-dev Password: password
Final Step: Access WordPress Dashboard And Install Divi
Divi isn’t included in the container. The final step is to install it via the WordPress Dashboard.
Commands Quick Reference
You can use the following commands to manage your containers.
Be sure to run them from inside your workspace directory:
Enter Container (get command prompt inside the container)
docker-compose exec -u 1000 wordpress /bin/bashExit Container (return to your system’s command prompt)
exitStop Running Containers
docker-compose stopStart Stopped Containers
docker-compose startRemove Containers (WordPress database will be deleted!)
docker-compose downStart New Containers
docker-compose up -ddocker-compose exec -u 1000 wordpress divi-dev setup