Develop a Wordpress Theme locally With Docker

In the last few days, I had to put my hands into Wordpress again. When I was a freelancer, 5 years ago, a major part of my job was to develop themes & plugins for Wordpress. I stopped when I started to work for SellSecure.

There is no way I install MAMP on my mac!

In 5 years a LOT of things changed in my way to work. The biggest one is probably Docker, of course. I don’t want to install a LAMP stack anymore (Do you remember MAMP, the local PHP server for Mac?)

Let’s go with Docker!

First, good news, Wordpress is a pretty basic solution, we’ll need PHP, a SQL database and a webserver. Second good news, Wordpress has a huuuge community so there is a nice Docker compose file to use - as a first step.

Here is the docker-compose.yml 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"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
volumes:
    db_data: {}

With this you’ll have a standalone WP instance running on your computer, you just need to finish the install - by setting your username and password, and you’re good to go. But, this basic compose file is painfull: you need to ssh into your container to change files or, even worse, use the WP editor.

Where is my autoreload?

To have a good setup we need to work with files on your host and make Docker refresh the WP after every modification. That way, it’s easy to version, it’s faster to debug, and it’s still fancy ‘cause you’re using containers (Woo!)

Just add these 2 lines in your docker-compose.yml right after the WORDPRESS_DB_* lines

working_dir: /var/www/html
volumes:
	- ./wp-content:/var/www/html/wp-content

And you’re good to go, Happy WP design!