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

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

Install or update to Gulp 4

Pick a name for your theme

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

CSS in WP Rig

Edit CSS

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

Sass in WP Rig

In-body modular style sheets

Configure conditional preloading

Templates in WP Rig

Edit existing templates

Make changes to theme functions

Sidebar: Keep strings translatable

Optional template files

Make your theme modular

AMP integration in WP Rig

JavaScript in WP Rig

Enqueue, async, or defer JavaScript

Write better code with ESLint

The role of functions.php

Add a new custom menu

Custom background colors and images

Custom logo

Gutenberg theme features

Enable AMP support

Widgetized areas

Custom header

The translate function

The export function

How to contribute to WP Rig

Going further with WordPress and WP Rig