Course: WordPress: Building Progressive Themes with WP Rig - Version 2

(Updated February 2021.) WP Rig, a new toolkit, makes building progressive themes in WordPress easy. It ships with a fully styled starter theme that can be easily customized, and it lints, optimizes, and minifies your changes as you code, making your themes as fast and performant as possible. In this course, instructor Morten Rand-Henriksen shows how to install and configure WP Rig and build a new progressive theme right out of the box. Plus, learn how to edit the underlying CSS, PHP, and JavaScript code and add advanced features such as widgets, AMP integration, and custom menus, backgrounds, and logos.

Introduction: Building progressive WordPress themes

WP Rig: A primer

Set up your development environment

Install Node.js and Composer

Get a fresh copy of WP Rig

How WP Rig works

Configure WP Rig for your project

Configure BrowserSync

Run the WP Rig installer

Configure VS Code workspace settings

Build, activate, and test your new theme

Configure Browsersync SSL

CSS in WP Rig

CSS file structure and partials

Edit CSS

CSS custom properties (a.k.a. CSS variables)

Google Fonts

Load modular style sheets

Create and preload stylesheets

Advanced CSS debugging and configuration

PHP in WP Rig

Templates and file structure

Optional template files

Theme features and customization

Functions in WP Rig

Example: Add footer widgets

JavaScript in WP Rig

Advanced JavaScript loading

Debug JavaScript

The role of PHP modules

Build a basic component

Enqueue JavaScript files

Add a custom image size

Various demos

Exporting your theme

Advanced build features

Contribute to WP Rig

Going further with WordPress