The web has evolved, and now it’s time our themes do the same. WP Rig is an evolution on the tried and true starter theme model: a modern build process and WordPress starter theme bundled together, created to simplify the process of building advanced, accessible, performant, progressive themes. WP Rig does the heavy lifting of optimization so developers can focus on what they do best: designing and building great user experiences. In this talk you’ll learn how to supercharge your theme development process with WP Rig.

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

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

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

14. ✓
⨯
Things I have control over:

17. • 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?

18. Build process Starter theme

19. 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

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

24. WP Rig Contributors

25. 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.

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

27. 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.

28. 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.

29. 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.

30. 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.

31. 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)

32. 4

34. https

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

39. The Workshop™©®

40. 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
✓

41. Setup and Configuration

43. 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

46. npm run rig-init
npm install

47. ./config/config.json

48. https

49. npm run generateCert

51. ✓ ✓ ✓ 😴

53. 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
✓
✓
✓
✓
👉

54. npm run dev
npm run build
npm run bundle

55. 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
✓
✓
👉

56. 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.

57. 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.

58. ./assets/css/src/*.css

60. Primary stylesheet - always loaded

61. Theme stylesheets

62. Partials called using @import

64. Layouts with flex and grid

67. CSS Custom Properties (variables)

71. Google Fonts
preconnect
preload
optimized
✓
✓
✓

73. 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.

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

79. 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
✓
✓
✓
👉

80. async
defer

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

86. 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.

87. 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
✓
✓
✓
👉
✓

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

90. 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();

91. 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
✓
✓
✓
👉
✓
✓

92. 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
✓
✓
✓
✓
✓
✓

93. wprig.io
More info and training:

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

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

96. Lykke til!