Set up WordPress With Docker for Local Development

There are a couple of things you need to set up before you can begin work on a WordPress project. The most common stack for running WordPress is called LAMP, which stands for Linux, Apache, MySQL and PHP.

But, what if you don’t want to install or manage the versions of each part of the stack on your development machine? Docker is the solution.

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.