WordPress Docker

Recently I’ve spent a lot of time learning how to make plugins and themes for WordPress. To make this process easier, I’ve created a repository with everything needed to spin up a new instance of WordPress with a lot of good stuff along with it.

To make this process easier, I’ve created a repository with everything needed to spin up a new instance of WordPress with a lot of good stuff along with it. The setup is meant to be used in combination with the Remote – Containers extension for Visual Studio Code.

Here’s a summary of what you’ll get if you use the setup:

• A Docker container running the latest WordPress version exposed at http://localhost:8000
• A Docker container running MySQL 5.7
• A Docker container running phpMyAdmin at http://localhost:8080

In addition to this, the setup adds:

• PHP code linting and formatting based on the WordPress Coding Standards.
• Preinstalled Node so that you can use the npx @wordpress/….
• Xdebug automatically configured and ready to be used.
• WP-CLI for managing your WordPress installation from the command line.
• The extensions needed in VS Code to make Xdebug and linting/formatting work.

Usage

1. Clone this repository to a local folder and make sure you have Docker and Docker Compose installed.
2. Open Visual Studio Code.
3. Make sure you have the Visual Studio Code Remote – Containers extension installed.
4. Open the command palette and run the command Remote-Containers: Open Folder in Container
5. Select the folder with repository you just cloned.
6. Wait for it…
7. Happy coding!

Thats it! You should now have a database server and WordPress running in separate containers. PHP linting and formatting adhering to the WordPress Coding Standard should just work. You can also run the default debug configuration in VS Code using Xdebug.

Visit your WordPress site at http://localhost:8000.

Debugging with Xdebug

The container has been configured to not run Xdebug when using PHP from the command line. This is to prevent it from being used when PHP-Sniffer is triggered, since it will drastically slow down the linter and the formatter.

Here’s how to start a debug session:

1. Launch the debug configuration Listen for XDebug
2. In the «Ports» pane in «Remote Explorer», enable forwarding of port 9000 (click the refresh arrow to make it appear)
3. Enable breakpoints and have fun!

Note: When you stop the debugging session, make sure to disable forwarding of port 9000, or else the page will appear to hang.

Adding plugins and themes

If you’re developing a plugin or a theme and you have that project locally on your computer, just add them as volumes in the docker-compose.yml file below the wp_root volume, like this:

volumes:
  - wp_root:/var/www/html
  - /opt/dev/awesome-plugin:/var/www/html/wp-content/plugins/awesome-plugin

..assuming you have the plugin in the local folder /opt/dev/awesome-plugin.

Feel free to contribute by opening a PR on Github. Here’s the repository:

https://github.com/kimgrytoyr/wordpress-docker