Building the next generation of themes with WP Rig 2.0
2 likes7,653 views
The document discusses WP Rig, a tool designed to simplify and modernize theme development in WordPress by utilizing contemporary PHP, CSS, and JavaScript practices. It emphasizes WP Rig's features such as automatic linting, processing of modern JavaScript and CSS, and integration with development environments, thus promoting accessibility and performance. The document outlines setup instructions and the advantages of using WP Rig to enhance the overall WordPress theme development experience.
Building the next generation of themes with WP Rig 2.0
- 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
- 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 ✓
- 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
- 48. https
- 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.
- 60. Primary stylesheet - always loaded
- 62. Partials called using @import
- 64. Layouts with flex and grid
- 67. CSS Custom Properties (variables)
- 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!