WordPress Codespace Dev Environment

This is a starter kit for a development environment for WordPress in a GitGub Codepsace. Start developing for WordPress right after a single click.

Installation

Create your own codespace by clicking this button. Please allow 5 minutes for auto-configuration at first setup.

You are done. The installation is completed.

Usage

Try the example plugin in plugins/wp-codespace, make some changes and appreciate the advantages of a pre-configured codespace.

Linting

Edit the file wordpress/wp-content/plugins/wp-codespace/wp-codespace.php:

• Delete a whitespace between parentheses and curly brackets and see the code linting in action.
• Use a right click to format the file according to WordPress Coding Standards.

WordPress autocompletion

Edit the file wordpress/wp-content/plugins/wp-codespace/wp-codespace.php:

• type somewhere "add" and see the autocompletion suggestions especially for WordPress.

WordPress inline documentation

Open the file wordpress/wp-content/plugins/wp-codespace/wp-codespace.php:

• hover over add_action and see the documentation for that WordPress method

WP CLI

Open the terminal (make sure, you are in the subfolder wordpress) and try the WP CLI.

• wp plugin list

Playwright Tests

Open the terminal and switch to the directory wordpress/wp-content/plugins/wp-codespace.

• run npm test for an example playwright test.

See the test specification in the subfolder tests.

SASS/CSS Compiling

Open the terminal and switch to the directory wordpress/wp-content/plugins/wp-codespace.

• change the color in the file build/sass/styles.scss
• run npm run compile:css to compile styles.css

Demo content

This repo fills WordPress with demo content from the WordPress Theme Unit Test. In your fork, you can place an *.xml-file and import this data via the WP CLI. See .devcontainer/postCreateCommand.sh and search for "Demo content for WordPress" for more details.

Debugging

Xdebug is installed and configured for VS Code. See .vscode/launch.json for details.

• set an arbitrary breakpoint in wordpress/wp-content/plugins/wp-codespace/wp-codespace.php
• start debugging with Listen for Xdebug in WordPress. The footer-line in VS Code will turn orange
• head your browser to the admin-panel
• see debugging information in VS Code

Behind the scenes

This setup will install and configure the following things automatically:

• install WordPress with credentials admin/admin
• install and activate selected plugins
• populate demo data from the WordPress Theme Unit Test
• install WP CLI
• install node (npm) and php (composer) dependencies
• add playwright test environment
• install and configure Xdebug
• configure VS Code:
  • WordPress Coding Standards
  • autocompletion for WordPress functions
  • searchable WordPress-Docs
  • Xdebug launch.json
  • dark theme, autosave and much more. See .vscode/settings.json

For more details, take a look into the folders .devcontainer and .vscode.

About Codepsaces

GitHub Codespaces are your dev environment in the cloud. Start coding instantly on your WordPress theme or plugin. A codespace is an IDE in the browser with pre-configured XDebug, WordPress Coding Standards and a pre-installed WordPress with your personal plugin or theme, that you are developing.

Set up your personal codespace on this repo (or on your private fork) with just one click. Codespace installs WordPress automatically, pre-configures XDebug, enables playwright tests, installs the WordPress Coding Standards and configures the VS Code extension for PHP_CodeSniffer and many other WordPress extensions. Start coding your theme or plugin without any further ado.

A codespace is a convenient way to contribute to an Open Source project, as you find all prerequisites preconfigured. You do not have to install any software, a codespace runs in the browser, as well as in your local VS Code or PhpStorm.

Just write, test and refactor your WordPress code. No need for devOps.

Give it a try and create your personal codespace right now.