WordPress development environment with Docker

We built a WordPress site for a client ages ago. Fast forward to today, and we're tasked with a much-needed update. The old process? Let's just say it was about as fun as watching paint dry. I realized the painfully slow workflow was a major pain compared to modern development standards. I knew I had to create somewhat automated development environment.. and I chose to do that using Docker.

Setting up WordPress with Docker means you can avoid the hassle of setting up set of server-side software for web applications. Even though Docker isn't made specifically for WordPress, the setup is rather simple. In this guide, we'll look at how to setup WordPress development environment using Docker.

Before you start

• Make sure you have Docker installed. You can quickly get started with Docker here.
• ⚠️ If you're running Linux - you'll also need to manually setup Docker Compose.

Project tree

To keep things lean, we'll avoid loading the entire WordPress source code into a shared volume. This can be a real resource hog! Instead, we'll focus on sharing just the wp-content/ folder. Let's break down the project structure:

wp-dev/
├─ wp-content/
├─ composer.yml
├─ dump.sql (optional)

Go ahead and create the project tree like one above.

⚡ If you have an existing WordPress project that you want to import (like I did), simply copy your wp-content/ folder and database dump file into the project's root directory.

Configuration

Here is the compose.yml configuration file for Docker Compose:

version: "3.6"
services:
  wordpress:
    image: wordpress:latest
    container_name: wordpress
    volumes:
      - ./wp-content:/var/www/html/wp-content
    environment:
      - WORDPRESS_DB_NAME=wordpress
      - WORDPRESS_TABLE_PREFIX=wp_
      - WORDPRESS_DB_HOST=db
      - WORDPRESS_DB_USER=root
      - WORDPRESS_DB_PASSWORD=password
    depends_on:
      - db
      - phpmyadmin
    restart: always
    ports:
      - 8080:80

  db:
    image: mariadb:latest
    container_name: db
    volumes:
      - db_data:/var/lib/mysql
      # This is optional!!!
      - ./dump.sql:/docker-entrypoint-initdb.d/dump.sql
      # # #
    environment:
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_USER=root
      - MYSQL_PASSWORD=password
      - MYSQL_DATABASE=wordpress
    restart: always

  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin:latest
    container_name: phpmyadmin
    restart: always
    ports:
      - 8180:80
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: password

volumes:
  db_data:

This is a standard configuration file to create a WordPress development environment. However, I've made a couple of adjustments to tailor it to our specific needs:

• volumes: - ./wp-content:/var/www/html/wp-content: this line syncs your local wp-content/ folder with the container's wp-content/ directory, allowing you to make changes locally and see them reflected in the container.
• ./dump.sql:/docker-entrypoint-initdb.d/dump.sql: will automatically import your database dump file after MySQL server is installed.

Running it

👏 You're almost there! With your compose.yml file in place, it's time to bring your development environment to life.

Open your terminal and navigate to your project directory. Then, run the magic command:

docker-compose up -d

⚡ This command will create and start all the containers defined in your compose.yml file in detached mode, meaning they'll run in the background without interrupting your terminal session.

Quick fix file permissions

Before we dive into your new WordPress development environment, there's one small adjustment to make. Docker has specific rules about file permissions, and the WordPress image is set up in a particular way. To ensure you can easily edit your WordPress files from outside the container, you'll need to change the ownership of the wp-content/ directory.
Open your terminal and run the following command, replacing {your-username} with your actual username:

sudo chown -R {your-username}:{your-username} wp-content

⚡ This command will give you the necessary permissions to work with your WordPress files without any hassle.

Ready!

🥳 Congratulations! Your Dockerized WordPress development environment is up and running.

To access your new WordPress installation, open your web browser and navigate to localhost:8080. You'll be greeted by the familiar WordPress installation screen (if you imported an existing project source, you'll see your homepage).

Follow the on-screen instructions to complete the setup process. Once you've finished, you'll be able to log in to your WordPress admin dashboard using the credentials you created.