Develop your WordPress themes and plugins on Docker

Hey 👀✨

It's been a long time since I wrote my last post. I've been through a lot of changes, both dev-related (new job ✨) and in life.

As I'm expecting to encounter some WordPress work during my new path, I decided to do it in the most comfortable and efficient way. I started to learn Docker not so long ago, and I think it's time to move the WP-Homestead setup to the shelf so my dev life gets even easier than before.

This tutorial is made for those who want to develop anything related to WordPress on any OS without suffering with Homestead or XAMP/LAMP/WAMP/whateverAMP stuff. It also will work as an introduction to the uses of Docker.

So, first of all, why would you want to use Docker to develop WordPress?

Well, by following this post, you can setup and run any WordPress environment with just one file and one command. Actually, the TL;DR of this post would be this simple if you already have Docker installed:

• Clone the wp-content folder from your repo.
• Add a docker-compose.yml file to the directory you want to work with.
• Run docker-compose up -d .
• Visit localhost:8000, done, WP is up & running.

We are going straight into battle, so I won't stop with the "what is ...?". I'll just add a link so you can read it if interested.

Click me if you want to know what Docker is!

Okay, let's start.

How to install Docker

First of all, we've got to download it. You can do this in one of the following pages. I'll be following Windows, which is pretty similar to the Mac one. Don't worry if you get lost, everything is perfectly explained in the documentation of the websites below.

• For Windows, Mac, Ubuntu, Debian

This is Docker saying hello to your system.

Once we finish the installation, which is a simple Next, Next, Next, Finish one, it is recommended to restart the system. Once we've done it, we can access now to our Docker app, or run docker info to check everything is fine.

Setting up WordPress

Perfect, now that we have Docker ready to work, it's time to set-up our WordPress site. For testing purposes, I'll be doing (and also recommend this for first-timers) a setup with a fresh and clean WordPress site, which you can get here.

Unzip it, and we can continue. If you for example want to work with an existent wp-content folder from a repo, it is also possible. In this case, the directory should look like this:

Preparing the environment

Did you notice the docker-compose.yml file in the last image? Great. This is the file we will have to create in order to make everything work between Docker and WordPress.

Your Docker & WordPress working together smoothly

So, once we have created this file INSIDE the directory we want to work with (in this case, the wp-content directory) we are going to add this to the file:

version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     volumes:
       - .:/var/www/html/wp-content
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
volumes:
  db_data: {}

A little bit of explanation here:

• We've got two services
• One for the database db and one for our WordPress wordpress
• They use an image, which will decide which version of database and wordpress are we using, in this case, MySQL 5.7 and the latest WP version.
• We can also set up the environment to decide which passwords and database names are we using.
• With ports, we decide on which port our app will be running
• And finally we have volumes. Here, we decide which of our folders will be copied into the docker environment.

In this case, looking at our wordpress: volumes part, we can see defined .:/var/www/html/wp-content, which means: Copy this directory (.) into (:) /var/www/html/wp-content inside our Docker container.

By doing this, we can edit anything in our editor, and it will be copied in our container, so we can visualize every change we make.

Save it.

Running our environment

Well, this is pretty straightforward. Just run docker-compose up -d on the folder directory through a terminal, and a container will be created and started.

Output: 

PS C:\Users\brownioDEV\Desktop\WP_Docker_DEVTO\wp-content> docker-compose up -d
Creating network "wp-content_default" with the default driver
Creating wp-content_db_1 ... done
Creating wp-content_wordpress_1 ... done

Now, if we access our Docker Desktop App, we'll see this.

This means everything is good to go, so, if you access now to http://localhost:8000/, you'll be redirected to your WordPress installation site, and once you finish, you can now work on anything you want!

Next time you want to run your environment, you just need to click the Play button on the Docker App, and everything will be up!

You can follow me so you are tuned to whenever I post something through my Twitter account. Hope you liked it, and enjoy the festivities!