WP Rig: A Progressive WordPress Theme Development Framework

WP Rig is a free, modern and open-source WordPress starter theme and build process bundled into one convenient package. This toolkit helps you author custom, beautiful, lightning-fast, and accessible WordPress themes with exciting user experiences that meet the latest web standards and expectations.

You write modern PHP, CSS, and JavaScript/TypeScript. WP Rig lints, optimizes/minifies, analyzes and can even test your code to make the theme ( and the site it runs on ) as performant as possible.

Tools

We created WP Rig to help you do what you do best: build feature-rich and visually stunning WordPress themes for every person who uses the web. The frame work assumes you will express your own style(s) into your theme – literally. Out of the box you get a minimally styled starter theme built for performance, accessibility and maintainability.

Node / Bun

Lightning fast scripts quickly and easily convert, compile, and bundle any theme code + assets

esbuild

All custom JavaScript or TypeScript in your theme is built with esbuild, ensuring the fastest and most modern code transpiling available.

Lightning CSS

Modern, fast, and lightweight CSS processor – including auto-prefixing, custom media queries, CSS minification, CSS Modules, and much more.

Instant Refresh

HMR or BrowserSync Auto-refreshes your dev environment when you save changes to your code.

PHP CodeSniffer

Check your code against WordPress Coding Standards to ensure coding standards are met, and auto-fix problems with CLI.

Stylelint / ESLint

Use modern linting tools and presets to check your CSS and JS for formatting and other common syntax issues while following WP standards.

More Than a Starter Theme

WP Rig is a modern build process and starter theme bundled into one convenient package.

The starter theme provides frameworks and conventions for common theme concerns like:

File management and processing of:
- CSS
- JavaScript/TypeScript
- images
Theme options/settings pages
CLI scripts
Utility classes
Code quality and best practices

Developer experience

The development process provides an easily configurable starting point for modern progressive WordPress theme development. The bundled starter / boilerplate theme is designed to suggest an organized workflow that is ideal for anything from quick solo to commercial team projects.

Start the process by invoking the npm run dev command and work in src theme, that later gets bundled to a prod theme. Specialized Node processes help watch, manage and optimize every file while editing your code in your favorite code editor for instant in-browser previews. It parses modern JavaScript (ES6), TypeScript and CSS through esbuild and Lightning CSS, and keeps tabs on your code quality via WordPress Coding Standards using ESLint and Stylelint

When your project is ready for deployment or distribution, our bundle process builds and minifies your entire theme while white-labeling your codebase and excluding all source files, including image optimization. Works seamlessly with CI/CD pipelines.

All of this, coupled with tight code editor integration, takes the guesswork out of developing modern, progressive WordPress themes.

Start Using WP Rig

WP Rig uses NPM or Bun and Composer. You need to have these installed in your local development environment before getting started. WP Rig was built to integrate with VS Code but is very handy in any code editor. Our curated set of code quality tools also tend to work nicely with feature-rich editors like PHPStorm. To get started with WP Rig, follow the steps below:

Requirements

WP Rig requires the following dependencies. Full installation instructions are provided at their respective websites.

PHP 8.1+
npm
Composer (installed globally)

Get WP Rig
- Clone or download a fresh copy of WP Rig from GitHub and place it in the /wp-content/themes/ folder of your local development environment.
- DO NOT give the WP Rig theme directory the same name as your eventual production theme. Suggested directory names are wprig or wprig-themeslug. For instance if your theme will eventually be named “Excalibur” your development directory could be named wprig-excalibur. The excalibur directory will be automatically created during the bundle process and should not exist beforehand.
WP Rig configuration
- View ./config/config.default.json for the default settings.
- Place custom theme settings in ./config/config.json to override default settings. You do not have to include all settings from config.default.json. Just the settings you want to override.
- Place local-only theme settings in ./config/config.local.json, e.g. potentially sensitive info like the path to your BrowserSync certificate. Again, only include the settings you want to override.
npm run rig-init
- In command line, run npm run rig-init to install necessary node and Composer dependencies and configure your build process.
npm run dev
- In command line, run npm run dev to process source files, build the development theme, and watch files for subsequent changes. npm run build can be used to process the source files and build the development theme without watching files afterwards.
Activate Theme
- In WordPress admin, activate the WP Rig development theme.

Learn to Use WP Rig With LinkedIn Learning or on our YouTube channel

To help you get the most out of WP Rig and to show its support for the WordPress community, LinkedIn Learning has released the free course WordPress: Building Progressive Themes with WP Rig. You can watch the entire course here on wprig.io and on LinkedIn Learning. Our YouTube channel also has some valuable resources.