WordPress: Building Progressive Themes with WP Rig

Course details

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. Learn how to edit the underlying CSS, PHP, and JavaScript code and add advanced features such as widgets, custom menus, backgrounds, and logos. Watch a practical example of how to extend WP Rig. Plus, see demonstrations of how to add a footer widget, build a basic component, and export a theme.

Learning objectives
Setting up a WordPress theme development environment
Installing WP Rig
Building, activating, and testing a new progressive theme
Editing CSS
Using web fonts
Editing existing templates
Editing PHP and JavaScript code
Adding advanced features
Translating a theme

Concepts

0. Introduction

01 - Buidling progressive WordPress themes
02 - WP Rig - A primer

1. Configure a Development Environment for WP Rig

03 - Set up your development environment
04 - Install Node.js and Composer

2. Install and Configure WP Rig

05 - Get WP Rig
06 - How WP Rig works
07 - First-time configuration
08 - Configure Browersync
09 - Run the WP Rig installer
10 - Configure Visual Studio Code workspace settings
11 - Build, activate, and test your new theme
12 - Sidebar - Configure Browsersync SSL

3. CSS

13 - CSS in WP Rig
14 - CSS file structure and partials
15 - Edit CSS
16 - CSS custom properties (variables)
17 - Google Fonts
18 - Load modular style sheets
19 - Create and preload style sheets
20 - Advanced CSS debugging and configuration

4. PHP and WordPress Templates

21 - PHP in WP Rig
22 - Templates and file structure
23 - Optional template files
24 - Theme features and customizations
25 - Functions in WP Rig
26 - Example - Add footer widgets

5. JavaScript

27 - JavaScript in WP Rig
28 - Advanced JavaScript loading
29 - Debug JavaScript

6. Extending WP Rig - A Practical Example

30 - The role of PHP modules
31 - Build a basic component
32 - Enqueue JavaScript files
33 - Add a custom image size
34 - Various demos

7. Going Further with WP Rig

35 - Exporting your theme
36 - Advanced build features
37 - Contribute to WP Rig
38 - Going further with WordPress