1.
Building Progressive Themes
with WP Rig
Morten Rand-Hendriksen
WPCampus 2019

2.
The web has evolved
Performance
Accessibility
Build tools
Unit testing
Progressive ES2015
CSS Next

3.
WordPress is lagging behind
PHP CSS JavaScript

4.
WordPress powers +34% of the web.

5.
WordPress powers +34% of the web.
Unless WordPress stays current,
it will hold 34% of the web back!

6.
How do we move WordPress,
and through it the web
forward?

7.
CC Gordon Joly https://goo.gl/iuRrDa

8.
Desire Path

9.
Pave the cowpath
To formalize an existing de-facto practice.

10.
WordPress
Performance
Accessibility
Build tools
Unit testing
Progressive ES2015
CSS Next

11.
✓
⨯
Things I have control over:

12.
• How do I Sass?
• What kind of build process makes
me the cool?
• Can I Gulp the Grunt WebPack?
• Will Composer even?
• Is Yarn Homebrew, or do I need a
Gem to Borwserify the Docker?

13.
Build process Starter theme

14.
Build process
• Modern JavaScript (ES2015)
• Modern CSS (custom properties,
modules, etc)
• WordPress Coding Standards
• Code linting for PHP, JS, and CSS
• Automatic internationalization
• Code and asset optimization

15.
Starter theme
• Accessible
• Modern best-practices
• Styled out of the box
• Minimum required files
• Optional templates
• Progressive features including AMP support
• Gutenberg, Gutenberg, Gutenberg

16.
WP Rig Contributors

17.
The WP Rig Philosophy
WP Rig does the heavy lifting so you
can focus on what you do best:
Build themes using modern PHP,
CSS, and JavaScript.

18.
WP Rig is your rig
Once downloaded, WP Rig becomes
your rig — a unique custom theme
development rig living in your
development environment.

19.
What WP Rig does: PHP
• Watches PHP files.
• Checks PHP against WordPress Coding Standards.
• Alerts for errors during build.
• Can integrate with the code editor for in-editor alerts
(requires extensions).
• Creates translation files for production.

20.
What WP Rig does: CSS
• Watches CSS files.
• Processes CSS through PostCSS (Autoprefixer, postcss_preset_env,
etc).
• Lints CSS to WordPress Coding Standards using Stylelint.
• Can integrate with the code editor for in-editor alerts
(requires extensions).
• Minifies CSS for production.

21.
What WP Rig does: JavaScript
• Watches JavaScript files
• Lints JavaScript to to WordPress Coding Standards using ESlint.
• Can integrate with the code editor for in-editor alerts (requires
extensions).
• Processes ES2015 through Babel.
• Uglifies JavaScript for production.

22.
Starter theme features
• Accessible drop-down menu.
• Modern CSS layouts (Grid, Flexbox, etc).
• Modern JavaScript loading (async/defer).
• Optimized Google Fonts loading.
• Lazy-loading images.
• AMP-ready.

23.
Starter theme features
• Modular in-body CSS loading.
• Plug-and-play template hierarchy files.
• Object-Oriented PHP.
• Modern CSS (custom properties etc).
• Modern JavaScript (ES2015)

24.
4

25.
https

26.
WP Rig helps you build modern themes.
Modern themes move the web forward.

27.
The Workshop™©®

28.
The Workshop™©®
1. WP Rig, an introduction
2. Setup and configuration
3. Styling WP Rig themes
4. A pinch of JavaScript
5. Modern PHP in WordPress themes
6. Two deep-dive examples
✓

29.
Setup and Configuration

30.
Using WP Rig:
1. Set up your regular WordPress development environment.
2. Clone / copy WP Rig into the themes folder.
3. In terminal, run npm run rig-init
4. Set up config/config.json
5. In terminal, run npm run dev
6. Start developing

31.
npm run rig-init
npm install

32.
./config/config.json

33.
https

34.
npm run generateCert

35.
✓ ✓ ✓ 😴

36.
Using WP Rig:
1. Set up your regular WordPress development environment.
2. Clone / copy WP Rig into the themes folder.
3. In terminal, run npm run rig-init
4. Set up config/config.json
5. In terminal, run npm run dev
6. Start developing
✓
✓
✓
✓
👉

37.
npm run dev
npm run build
npm run bundle

38.
The Workshop™©®
1. WP Rig, an introduction
2. Setup and configuration
3. Styling WP Rig themes
4. A pinch of JavaScript
5. Modern PHP in WordPress themes
6. Two deep-dive examples
✓
✓
👉

39.
The WP Rig Philosophy
WP Rig does the heavy lifting so you
can focus on what you do best:
Build themes using modern PHP,
CSS, and JavaScript.

40.
What WP Rig does: CSS
• Watches CSS files.
• Processes CSS through PostCSS (Autoprefixer, postcss_preset_env,
etc).
• Lints CSS to WordPress Coding Standards using Stylelint.
• Can integrate with the code editor for in-editor alerts
(requires extensions).
• Minifies CSS for production.

41.
./assets/css/src/*.css

42.
Primary stylesheet - always loaded

43.
Theme stylesheets

44.
Partials called using @import

45.
Layouts with flex and grid

46.
CSS Custom Properties (variables)

47.
Google Fonts
preconnect
preload
optimized
✓
✓
✓

48.
The WP Rig Philosophy
WP Rig does the heavy lifting so you
can focus on what you do best:
Build themes using modern PHP,
CSS, and JavaScript.

49.
CSS in WP Rig
Component-level stylesheets,
loaded progressively inside the
<body> element via template files.

50.
The Workshop™©®
1. WP Rig, an introduction
2. Setup and configuration
3. Styling WP Rig themes
4. A pinch of JavaScript
5. Modern PHP in WordPress themes
6. Two deep-dive examples
✓
✓
✓
👉

51.
async
defer

52.
Script download
Script execution
<script>
<script async>
<script defer>
HTML parse
Parse paused

53.
The WP Rig Philosophy
WP Rig does the heavy lifting so you
can focus on what you do best:
Build themes using modern PHP,
CSS, and JavaScript.

54.
The Workshop™©®
1. WP Rig, an introduction
2. Setup and configuration
3. Styling WP Rig themes
4. A pinch of JavaScript
5. Modern PHP in WordPress themes
6. Two deep-dive examples
✓
✓
✓
👉
✓

55.
Classes
Components
Namespaces
Modern architecture
No more WordPress PHP shenanigans

56.
PHP in WP Rig
• Templates work as they always have.
• Core template functions work as they always have.
• index.php is the base template for every view.
• Template parts live in ./template-parts/
• ./optional/ folder has optional drag-and-drop template files.
• Custom functions are called using
wp_rig()->function_name();

57.
The Workshop™©®
1. WP Rig, an introduction
2. Setup and configuration
3. Styling WP Rig themes
4. A pinch of JavaScript
5. Modern PHP in WordPress themes
6. Two deep-dive examples
✓
✓
✓
👉
✓
✓

58.
The Workshop™©®
1. WP Rig, an introduction
2. Setup and configuration
3. Styling WP Rig themes
4. Modern PHP in WordPress themes
5. A pinch of JavaScript
6. Two deep-dive examples
✓
✓
✓
✓
✓
✓

59.
wprig.io
More info and training:

60.
linkedin.com/learning
More info and training:

61.
github.com/wprig/wprig
Contribute to WP Rig and make it yours:

62.
Lykke til!