Introduction

In this guide, we will walk you through the step-by-step process of setting up a local development environment for WordPress using Docker. You will learn how to install Docker on your system, configure the WordPress container, and access the WordPress dashboard.

By the end of this tutorial, you will have a fully functional WordPress installation running on your local machine, ready for customization and testing. Let’s dive in and get started with setting up WordPress using Docker locally!

Using the official WordPress Docker image combined with Compose, you can set up the needed development environment for WordPress.

Setting up WordPress Locally With Docker

To set up a WordPress project locally using Docker, you will need to create a docker-compose.yml file. In the file, you will set up two services — one for WordPress, and one for the MySQL database.

These are the steps to create a local WordPress setup:

1. Create your project folder and an empty docker-compose.yml file inside of it

   wp-project/
   ├─ docker-compose.yml

2. Optionally, you can create a .env file next to docker-compose.yml to store configuration variables. You can skip this if want to just type the configuration data right inside docker-compose.yml in step 3

   MYSQL_DATABASE=wp_db
   MYSQL_USER=wp_user
   MYSQL_PASSWORD=wp_user_password
   MYSQL_ROOT_PASSWORD=wp_root_password
   MYSQL_HOST=database:3306 # use the same name as database service

   Use the same name as database service from step 3 for the host address of your database stored in MYSQL_HOST.

3. Edit the docker-compose.yml file and add the following configuration

   services:
     wordpress:
       depends_on:
         - database
       image: wordpress
       ports:
         - 80:80
       environment:
         WORDPRESS_DB_HOST: '${MYSQL_HOST}'
         WORDPRESS_DB_NAME: '${MYSQL_DATABASE}'
         WORDPRESS_DB_USER: '${MYSQL_USER}'
         WORDPRESS_DB_PASSWORD: '${MYSQL_PASSWORD}'
       volumes:
         - ./wp-content:/var/www/html/wp-content
   
     database:
       image: mysql:latest
       ports:
         - 3306:3306
       environment:
         MYSQL_ROOT_PASSWORD: '${MYSQL_ROOT_PASSWORD}'
         MYSQL_DATABASE: '${MYSQL_DATABASE}'
         MYSQL_USER: '${MYSQL_USER}'
         MYSQL_PASSWORD: '${MYSQL_PASSWORD}'
       volumes:
         - mysql-data:/var/lib/mysql
   
   volumes:
     mysql-data:

   If you set up a .env file, Compose will automatically use it. Otherwise, replace the variables starting with $ sign with actual config values.

   There are a couple of things happening in this docker-compose.yml file:

   • database service sets up a new database specified in MYSQL_DATABASE and creates a user with MYSQL_USER as name and MYSQL_PASSWORD as password
   • wordpress service environment variables contain the configuration used to connect to the MySQL database
   • the environment variable values can be changed to whatever you want, but they need to be the same for wordpress and database
   • mysql-data volume is created to preserve data inside MySQL database between Docker restarts
   • volumes in wordpress create a mount of wp-content folder from the container to host, that way you can edit WordPress files locally

4. Run docker compose up from the project folder to start the WordPress and MySQL containers. The first time you run this command it can take a while to download both images.

Now you should be able to visit localhost in your browser and install WordPress.

If you are not using the mysql:latest image, but mysql:5.7, your database service might be exiting. Most likely it’s due to the container’s lack of available memory. The solution is to allocate more memory.

You can allocate more memory to a service in docker-compose.yml like this:

services:
  database:
      image: mysql:5.7
      mem_limit: 2048m # allocate more memory as needed

Editing WordPress Files

If you have correctly mounted the wp-content folder to your host machine, you can edit or create themes and plugins with ease.

Let’s say you want to edit the default Twenty Twenty-Three theme that WordPress comes with.

Open the twentytwentythree folder inside your project/wp-content/themes/ folder with your code editor.

If you want to remove default WordPress styling, create a functions.php in the root of the theme directory and add the following code:

<?php

function remove_global_styles(){
  wp_dequeue_style('global-styles');
}

add_action('wp_enqueue_scripts', 'remove_global_styles');

If you can’t edit any files due to lack of permissions, you can fix that using chown command.

sudo chown -R username:username /path/to/project

Substitute username with the name of your user that you use in your terminal.

For example, if you have opened your project in terminal already, you can use current path (.):

sudo chown -R john:john .

Now edit style.css and add your custom CSS.

body {
  background-color: #e9e9e9;
}

And edit functions.php by adding the following code to load the CSS file in the theme.

function add_custom_styles() {
  wp_enqueue_style('custom-styles', get_stylesheet_uri() );
}

add_action('wp_enqueue_scripts', 'add_custom_styles');

Congratulations, now you can work on your WordPress project running inside Docker.