The first step in building custom WordPress themes with WP Rig is to set up a robust development environment on your computer. You’ll need:
- A local server environment to run WordPress itself
- A code editor or IDE
- And all the browsers you can get your hands on for testing.
These will work in combination with the build tools in WP Rig to make up your development environment. My preferred setup, and the one I’m using in this course, is:
- Local by Flywheel for my local server environment
- A fresh WordPress install populated with the WordPress Theme Unit Test data
- Development plugins, including Monster Widget and Show Current Template.
Finally, we use VS Code with the editor config, ESLint, PHP IntelliSense, phpcs, Prettier, and stylelint extensions installed. All these tools are free and can be installed across Windows, Mac OS, and Linux.
To follow along I recommend you set up the same or similar tools on your computer. You’ll find a full breakdown of the recommended tools and extensions below.
Recommended code editor extensions
To take full advantage of the features in WP Rig, your code editor needs support for the following features:
VS Code extensions
For VS Code users, here’s a list of recommended code editor extensions.
Enabling PHPCodeSniffer (PHPCS) in VS Code
WP Rig runs PHPCodeSniffer (PHPCS) as part of its build process to make sure all PHP complies with WordPress Coding Standards. Any errors or warnings found by PHPCS are displayed in the command line terminal as the various WP Rig tasks run.
To capture (and visualize) errors and warnings in VS Code as you are developing with WP Rig, you can activate the PHPCS extension and configure it to use the WP Rig settings:
In VS Code, select extensions and search for “phpcs” and install the free PHPCS extension from the Visual Studio Marketplace.
In VS Code, open Workspace Settings (Ctrl+, on Windows, CMD+, on Mac) and add the following configuration settings:
{
"phpcs.enable": true,
"phpcs.composerJsonPath": "[path]/[to]/composer.json",
"phpcs.standard": "WordPress",
"editor.renderWhitespace": "all"
}Make sure the path in phpcs.composerJsonPath points at the composer.php file in your WP Rig folder relative to the open project folder in VS Code. So if you opened users/documents/mysite/ as your project folder and your WP Rig theme sits in wp-content/themes/mytheme/, the value should be ./wp-content/themes/mytheme/composer.json.
With PHPCS configured in VS Code you will see green or red squiggly lines under any PHP which does not match the WordPress Coding Standards, and hovering your mouse over the highlighted code will open a tooltip telling you why PHPCS flagged this piece of code.