Stop wasting time setting up your local environment and start developing.

Today I want to share with you how I set up my local WordPress with Docker-Compose. Hopefully you can get some use out of it.

As the first step of the Modern WordPress Project We are going to start setting up our local WordPress Multisite environment with Docker and Docker-Compose. This will allow us to start our WordPress locally in a few steps.

Step 1:

Download Docker on your Mac or PC: https://www.docker.com/products/docker-desktop

Once you have downloaded and installed the Docker desktop let’s jump to Step 2 :

Create a new folder for Modern WordPress Project anywhere in your hard drive. For example mine is in:

~/Documents/ModernWPSeries/WordPress_With_Doccker_compoose

now please create a new file in this folder called: docker-compose.yml

Step 3: Copy this code into your docker-compose.yml file:

version: '3.3'

services:
  # Database
  db:
    image: mysql:5.7
    container_name: mysqldb
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      DB_HOST: localhost
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - wpsite
    ports:
      - "3306:3306"
  # phpmyadmin
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin
    restart: always
    ports:
      - '8080:80'
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: password
    networks:
      - wpsite
  # Wordpress
  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - '80:80'
    restart: always
    container_name: modern_wordpress
    volumes: ['./public/:/var/www/html']
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_CONFIG_EXTRA: define('WP_ALLOW_MULTISITE', true );
    hostname: modernwordpress.com.local
    labels:
       com.theimpossiblecode.expose.domain: "modernwordpress.com.local"
       com.theimpossiblecode.expose.domainIsHost: "true"
       com.theimpossiblecode.expose.subdomainHosts: "de at it"
    networks:
      wpsite:
          aliases:
            - modernwordpress.com.local
networks:
  wpsite:
volumes:
  db_data:

Let me explain a few things about this file ^

As you can see at line 50 there is a hostname. That means we will have a local domain for our project also with subdomains (modernwordpress.de.local, modernwordpress.at.local). Later on we will have to add this domain to your host file.

There is a service called phpmyadmin. Once we start this setup you are able to login to phpmyadmin using the port 8080. This makes things much easier if we need to do any changes to the database.

Step 4:

Open up your terminal and navigate to the folder where you created docker-compose.yml and run this command:

docker-compose up -d

It will take a minute to create all the containers and volumes.

Once it is ready you will see a folder called ‘public’ created in the root folder. This is where the WordPress code lives.

Ok now I’m tired of all the steps. Let’s test this:

Open your browser and navigate to http://localhost:8080/

You should see the phpMyAdmin login screen. You can login to the database using username: wordpress and password: wordpress.

And now the magic: If you navigate to http://localhost/ you will see the WordPress installation screen. But wait a minute. Earlier we said we are going to use a custom local domain for this. Yes, let’s complete the setup.

Last Step:

Open the terminal and open your hosts file using vi /etc/hosts. (If you are on a Mac)

Add these domains to your host file:

127.0.0.1 modernwordpress.com.local
127.0.0.1 modernwordpress.de.local
127.0.0.1 modernwordpress.at.local
127.0.0.1 modernwordpress.it.local

After you’ve done this, let’s try to navigate to the main domain: http://modernwordpress.com.local/ 🎉

Congratulations! You successfully set up WordPress using Docker-Compose.

You can download the full code in github. https://github.com/malithmcr/wordpress-docker-multisite

Modern WordPress Project: Learn to build full stack websites using headless WordPress and Next.JS.

Thank you everyone for reading. Feel free to leave a comment if you have any feedback.