Visual Studio Code for Local WordPress Development: WP-CLI, Docker & Xdebug Setup

So, you want to build your own WordPress website locally? Great choice! Setting up a local development environment lets you experiment without breaking your live site. With Visual Studio Code (VS Code), Docker, WP-CLI, and Xdebug, you’ll have everything you need for a powerful and efficient WordPress workflow. Don’t worry — we’ll keep things simple and fun!

Why Use Visual Studio Code?

VS Code is a code editor by Microsoft. It’s free, lightweight, and full of features. It supports all the files you need for WordPress and has a huge library of extensions. It also looks pretty cool.

Plus, it works amazingly well with tools like Docker and Xdebug. Together, they become your dream team!

Step 1: Install the Essentials

Before diving in, let’s make sure you have the right tools installed:

Docker Desktop – To run WordPress in containers
Visual Studio Code – Your main code editor
PHP & Composer – For PHP packages (optional, but useful)
WP-CLI – The WordPress command-line interface

If you don’t have Docker yet, you can get it from Docker’s official website. It works for both macOS and Windows.

Step 2: Set Up Docker for WordPress

Docker helps you spin up a WordPress site with a single command. Yep, that easy!

Create a new folder for your project:

mkdir my-wordpress-site
cd my-wordpress-site

Then, create a docker-compose.yml file:

version: '3.8'

services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8000:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wp-content:/var/www/html/wp-content

  db:
    image: mysql:5.7
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: rootpass
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data:

Now open your terminal and run this:

docker-compose up -d

That’s it! WordPress should now be running at localhost:8000.

Step 3: Use WP-CLI Like a Pro

WP-CLI is the command-line tool for WordPress. It lets you do almost anything without clicking around in the dashboard.

To use it inside Docker, run:

docker exec -it yourcontainername bash

Replace yourcontainername with the actual name of your WordPress container. You can find it with:

docker ps

Inside the container, try this:

wp core install --url="http://localhost:8000" --title="My Site" --admin_user="admin" --admin_password="admin" --admin_email="you@example.com"

Voilà! Your WordPress site is now set up, and you didn’t even touch a browser.

Step 4: Your Dev Workflows in VS Code

Now let’s open the project folder in VS Code. You’ll see the wp-content directory — this is your playground.

You can install themes, develop your own plugin, or even edit functions.php like a boss.

Make sure to install some helpful extensions:

PHP Intelephense – For smart code suggestions
WordPress Snippet – Handy WordPress functions
Docker – Manage containers without leaving the editor

Step 5: Enable Xdebug for Easier Debugging

Debugging helps you fix bugs before your visitors find them. And Xdebug is perfect for that!

You’ll need to update your Docker setup slightly. In your docker-compose.yml, update the wordpress service like this:

    volumes:
      - ./wp-content:/var/www/html/wp-content
      - ./xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

Then, in your project root, create a file named xdebug.ini with this content:

zend_extension=xdebug.so
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9003

Inside VS Code, install the PHP Debug extension by Felix Becker. Then, add the launch.json config in your .vscode folder:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003
    }
  ]
}

Restart Docker, hit a breakpoint, and start debugging. So clean. So cool.

Step 6: Syncing Made Easy

Worried about syncing your local and live versions? With WP-CLI and a little bash magic, you can import and export databases easily.

To export your local database:

wp db export my-db.sql

And to import it elsewhere:

wp db import my-db.sql

Just make sure URLs are updated using:

wp search-replace 'oldurl.com' 'localhost:8000'

No more broken links or lost images.

Step 7: Bonus Tips

Commit often – Use Git to track your changes
Use branches – Try features without fear
Back it up – Just in case
Have fun – Experiment and learn new things

Want to share your creation? You can deploy it to a live server using services like LocalWP, WP Engine, or even a GitHub Action if you’re feeling fancy.

Conclusion: You’re Now a WordPress Dev Hero!

With VS Code, Docker, WP-CLI, and Xdebug, you can build stunning WordPress sites right on your machine. You’ve got the power to code, debug, and ship websites like a pro.

And the best part? You now understand the tools the pros use. Whether you’re creating client sites or your personal blog, you’ve got the skills to do it right.

So go ahead. Launch your terminal, open VS Code, and start building something awesome!

Bulk WP

Menu