├── docker-compose.yml ├── .vscode └── launch.json ├── Dockerfile ├── .gitignore └── README.md /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.7' 2 | 3 | services: 4 | 5 | wordpress: 6 | image: fchipi/wordpress-xdebug:v1.5.0 7 | restart: always 8 | ports: 9 | - 8080:80 10 | environment: 11 | WORDPRESS_DB_HOST: db 12 | WORDPRESS_DB_USER: exampleuser 13 | WORDPRESS_DB_PASSWORD: examplepass 14 | WORDPRESS_DB_NAME: exampledb 15 | XDEBUG_CONFIG: remote_host=host.docker.internal 16 | volumes: 17 | - ./html:/var/www/html/ 18 | 19 | db: 20 | image: mysql:5.7 21 | restart: always 22 | environment: 23 | MYSQL_DATABASE: exampledb 24 | MYSQL_USER: exampleuser 25 | MYSQL_PASSWORD: examplepass 26 | MYSQL_RANDOM_ROOT_PASSWORD: '1' -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "name": "Listen for XDebug", 9 | "type": "php", 10 | "request": "launch", 11 | "port": 9000, 12 | "pathMappings": { 13 | "/var/www/html":"${workspaceRoot}/html" 14 | } 15 | }, 16 | { 17 | "name": "Launch currently open script", 18 | "type": "php", 19 | "request": "launch", 20 | "program": "${file}", 21 | "cwd": "${fileDirname}", 22 | "port": 9000 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM wordpress:5.2.4-php7.3 2 | 3 | LABEL version="1.5.0" 4 | LABEL description="WordPress development environment with Xdebug" 5 | 6 | ENV XDEBUG_PORT 9000 7 | 8 | RUN yes | pecl install xdebug \ 9 | && echo "zend_extension=$(find /usr/local/lib/php/extensions/ -name xdebug.so)" > /usr/local/etc/php/conf.d/xdebug.ini \ 10 | && echo "xdebug.remote_enable=1" >> /usr/local/etc/php/conf.d/xdebug.ini \ 11 | && echo "xdebug.remote_autostart=1" >> /usr/local/etc/php/conf.d/xdebug.ini \ 12 | && echo "xdebug.profiler_enable=1" >> /usr/local/etc/php/conf.d/xdebug.ini \ 13 | && echo "xdebug.profiler_output_name=cachegrind.out.%t" >> /usr/local/etc/php/conf.d/xdebug.ini \ 14 | && echo "xdebug.profiler_output_dir=/tmp" >> /usr/local/etc/php/conf.d/xdebug.ini \ 15 | && echo "max_input_vars=2000" >> /usr/local/etc/php/conf.d/custom.ini \ 16 | && rm -rf /usr/local/etc/php/conf.d/opcache-recommended.ini 17 | 18 | EXPOSE 9000 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in the root except the "wp-content" directory. 2 | /* 3 | !wp-content/ 4 | 5 | # track this file .gitignore (i.e. do NOT ignore it) 6 | !.gitignore 7 | 8 | # track readme.md in the root (i.e. do NOT ignore it) 9 | !README.md 10 | 11 | # track Dockerfile 12 | !Dockerfile 13 | 14 | # track docker compose 15 | !docker-compose.yml 16 | 17 | # track vscode folder 18 | !.vscode/ 19 | 20 | # Ignore everything in the "wp-content" directory, except the "plugins" 21 | # and "themes" directories. 22 | wp-content/* 23 | !wp-content/plugins/ 24 | !wp-content/themes/ 25 | 26 | # Ignore everything in the "plugins" directory, except the plugins you 27 | # specify (see the commented-out examples for hints on how to do this.) 28 | wp-content/plugins/* 29 | # !wp-content/plugins/my-single-file-plugin.php 30 | # !wp-content/plugins/my-directory-plugin/ 31 | 32 | # Ignore everything in the "themes" directory, except the themes you 33 | # specify (see the commented-out example for a hint on how to do this.) 34 | wp-content/themes/* 35 | # !wp-content/themes/my-theme/ 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WordPress + Xdebug + Docker + Visual Studio Code 2 | 3 | Sometimes it is hard to start working with a technology because all the initial setup that is required. Sometimes your workspace get messy with all the environments configured. The idea behind this repository is to simplify the start of the development with WordPress and of course, keep your machine clean. 4 | 5 | To achieve these two goals I used [Docker](https://www.docker.com/). Take the frustration out of setting up development environments with Docker, be productive since day one. Docker removes the friction of “dependency hell” to make getting started and shipping new code faster and easier. 6 | 7 | This repository allows you to quickly start developing and/or debugging your WordPress theme or plugin. 8 | 9 | ## Requirements :sunglasses: 10 | 11 | 1. Install Git 12 | 2. Install Docker 13 | 3. Install Visual Studio Code (Can be changed for the IDE of your preference if it supports Xdebug) 14 | 4. Install Xdebug extension for Visual Studio Code (Or the extension that the IDE installed in the step 3 supports) 15 | 16 | The code in this repository has been tested using Windows 10, however the same tools are available in other operating systems like Mac OS and Linux. 17 | 18 | These are the versions of the tools used: 19 | 20 | - Visual Studio Code: v1.35.0 | [download](https://code.visualstudio.com/) 21 | - Xdebug extension for Visual Studio Code (PHP Debug): v1.13.0 | [download](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) 22 | - Docker Desktop: 2.0.0.3 (31259) | [download](https://store.docker.com/) 23 | - Docker compose: v3.7 24 | - Wordpress Image: wordpress:5.2.4-php7.3 | [download](https://store.docker.com/_/wordpress) 25 | - Xdebug: v2.6.1 | [home page](https://xdebug.org/) 26 | 27 | ## Steps to use this repository :nerd_face: 28 | 29 | **1. Clone the repository.** 30 | 31 | ``` 32 | git clone https://github.com/fgarciachipi/wordpress-xdebug.git 33 | ``` 34 | 35 | ![git clone](https://github.com/fgarciachipi/wordpress-xdebug/wiki/images/gitclone.PNG) 36 | 37 | Once the repository is cloned, we need to create a folder named `html` inside the repository folder. This folder is used for the WordPress container to storage the site (see [docker-compose.yml](https://github.com/fgarciachipi/wordpress-xdebug/blob/a29d202b516a1bf09f5c0f8b8892d0276e945e14/docker-compose.yml#L17) file). 38 | 39 | At this point you should have these folders in your local repository: 40 | 41 | ![local folders](https://github.com/fgarciachipi/wordpress-xdebug/wiki/images/htmlFolder.PNG) 42 | 43 | 44 | **2. Run the container.** 45 | 46 | Inside the `wordpress-xdebug` folder run the following command: 47 | 48 | ``` 49 | docker-compose -f docker-compose.yml up 50 | ``` 51 | 52 | Wait until the command finishes and then access http://localhost:8080/, this is the url where the WordPress site is running. 53 | 54 | 55 | **3. Start coding.** 56 | 57 | After the container is running you can open the folder `wordpress-xdebug` in the Visual Studio Code and see that the folder `html` is not empty, it has the WordPress files. 58 | 59 | ![VS](https://github.com/fgarciachipi/wordpress-xdebug/wiki/images/vsFolder.PNG) 60 | 61 | There is a [launch.json](https://github.com/fgarciachipi/wordpress-xdebug/blob/master/.vscode/launch.json) file inside the folder `.vscode` with the debug configuration. Add the breakpoints in the code and go to the Debug Menu (Ctrl + Shift + D) and click on the Start Debugging button. 62 | 63 | ![xdebug](https://github.com/fgarciachipi/wordpress-xdebug/wiki/images/xdebug.png) 64 | 65 | 66 | ## Final notes :coffee: 67 | 68 | - Check that your Docker is configured to run linux container. 69 | - Since the `html` folder is excluded from git, if you are going to create a theme or a plugin you need to add the exception to the [.gitignore](https://github.com/fgarciachipi/wordpress-xdebug/blob/master/.gitignore) file. (See line [26](https://github.com/fgarciachipi/wordpress-xdebug/blob/a29d202b516a1bf09f5c0f8b8892d0276e945e14/.gitignore#L26) for plugins and line [32](https://github.com/fgarciachipi/wordpress-xdebug/blob/a29d202b516a1bf09f5c0f8b8892d0276e945e14/.gitignore#L32) for themes) 70 | --------------------------------------------------------------------------------