WordPress: Building Progressive Themes with WP Rig

WordPress: Building Progressive Themes with WP Rig

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 14m | 422 MB

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 stack integration, and custom menus, backgrounds, and logos.

Topics include:

  • 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 your theme
Table of Contents

Introduction
1 Welcome

Configure a Development Environment for WP Rig
2 Set up your development environment
3 Install Node.js and Composer
4 Install or update to Gulp 4

Install and Configure WP Rig
5 Pick a name for your theme
6 Get a fresh copy of WP Rig
7 How WP Rig works
8 Configure WP Rig for your project
9 Configure BrowserSync
10 Run the WP Rig installer
11 Configure VS Code workspace settings
12 Build activate and test your new theme

CSS
13 CSS in WP Rig
14 Edit CSS
15 CSS custom properties a.k.a. CSS variables
16 Sass in WP Rig
17 Add and use web fonts
18 In-body modular style sheets
19 Configure conditional preloading

PHP and WordPress Templates
20 Templates in WP Rig
21 Edit existing templates
22 Make changes to theme functions
23 Sidebar – Keep strings translatable
24 Optional template files
25 Make your theme modular
26 AMP integration in WP Rig

JavaScript
27 JavaScript in WP Rig
28 Enqueue async or defer JavaScript
29 Write better code with ESLint

Advanced Theme Features
30 The role of functions.php
31 Add a new custom menu
32 Custom background colors and images
33 Custom logo
34 Gutenberg theme features
35 Enable AMP support
36 Widgetized areas
37 Custom header

Going Further with WP Rig
38 The translate function
39 The export function
40 How to contribute to WP Rig
41 Going further with WordPress and WP Rig