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.
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?
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
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)
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
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
✓
✓
✓
✓
👉
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.
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();