This guide will mainly cover setting up WordPress locally for development.

Pre-requisites

Zed/VSCode or any editor of your choice
Docker service

Clone the repository and install locally

# Clone the remote repostory
git clone https://github.com/WordPress/wordpress-develop

# Run the containers for WordPress stack
npm run env:start

# Configure enviroment for database
npm run env:install

# Optional: Run a watcher to watch and build when there are changes in Gutenberg
npm run dev

You can then access your WordPress site from http://localhost:8889 with these admin credentials:

# Credentials for http://localhost:8889/wp-admin
username: admin
password: password

Setting up adminer for inspecting the database.

By default, the WordPress stack running locally will use these containers:

WP CLI - https://hub.docker.com/r/wordpressdevelop/cli
MySQL - https://hub.docker.com/_/mysql
PHP - https://hub.docker.com/r/wordpressdevelop/php
WordPress (nginx image) - https://hub.docker.com/_/nginx

All of these containers run inside the wpdevnet bridge network. To setup adminer, get the container for adminer running first:

# Run the adminer container on 8080
docker run -d --name adminer -p 8080:8080 adminer

Next, add this container to the bridge network. For this, find the networks running and add the container to the wpdevnet network

# Find the networks running on docker
docker network ls

# The WordPress network should have this format : <project namespace>_wpdevnet.
# For example, the network can be: wordpress-develop_wpdevnet.
# Add the adminer container to this network

docker network connect <project namespace>_wpdevnet <adminer container name>

After this, you can access adminer from: localhost:8080. For database connection credentials, look into wp-config.php file. The default connection credentials are:

Host: mysql
Username: root
Password: password
Database: wordpress_develop

Setting up Xdebug for debugging

To enable debugging in your WordPress instance, open .env file and change the line:

LOCAL_PHP_XDEBUG=false
# change it to:
LOCAL_PHP_XDEBUG=true

Additionally, ensure that your wp-config.php has environment variables for debugging set up correctly:

// Enable WP_DEBUG mode
define( 'WP_DEBUG', true );

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );

Now, restart your containers to load with the new configurations:

npm run env:restart

Next, configure Xdebug adapters in your code editor. For Zed, install the PHP extension. For VSCode, install the XDebug extension and configure the adaptor.

An example debug configuration for Zed:

// Project-local debug tasks
//
// For more documentation on how to configure debug tasks,
// see: https://zed.dev/docs/debugger
[
  {
    "label": "PHP: Listen to Xdebug",
    "adapter": "Xdebug",
    "request": "launch",
    "hostname": "localhost",
    "port": 9003,
    "pathMappings": {
      "/var/www": "$ZED_WORKTREE_ROOT",
      "/var/www/src": "$ZED_WORKTREE_ROOT/src",
      "/var/www/build": "$ZED_WORKTREE_ROOT/build"
    }
  }
]

Optionally, install the Xdebug extension for your browser. For Chrome: https://chromewebstore.google.com/detail/xdebug-helper-by-jetbrain/