Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building the next generation of themes with WP Rig 2.0

306 views

Published on

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.

Published in: Technology
  • Be the first to comment

Building the next generation of themes with WP Rig 2.0

  1. 1. Building Progressive Themes with WP Rig Morten Rand-Hendriksen WPCampus 2019
  2. 2. The web has evolved Performance Accessibility Build tools Unit testing Progressive ES2015 CSS Next
  3. 3. WordPress is lagging behind PHP CSS JavaScript
  4. 4. WordPress powers +34% of the web.
  5. 5. WordPress powers +34% of the web. Unless WordPress stays current, it will hold 34% of the web back!
  6. 6. How do we move WordPress, and through it the web forward?
  7. 7. CC Gordon Joly https://goo.gl/iuRrDa
  8. 8. Desire Path
  9. 9. Pave the cowpath To formalize an existing de-facto practice.
  10. 10. WordPress Performance Accessibility Build tools Unit testing Progressive ES2015 CSS Next
  11. 11. ✓ ⨯ Things I have control over:
  12. 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. 13. Build process Starter theme
  14. 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. 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. 16. WP Rig Contributors
  17. 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. 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. 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. 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. 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. 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. 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. 24. 4
  25. 25. https
  26. 26. WP Rig helps you build modern themes. Modern themes move the web forward.
  27. 27. The Workshop™©®
  28. 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. 29. Setup and Configuration
  30. 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. 31. npm run rig-init npm install
  32. 32. ./config/config.json
  33. 33. https
  34. 34. npm run generateCert
  35. 35. ✓ ✓ ✓ 😴
  36. 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. 37. npm run dev npm run build npm run bundle
  38. 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. 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. 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. 41. ./assets/css/src/*.css
  42. 42. Primary stylesheet - always loaded
  43. 43. Theme stylesheets
  44. 44. Partials called using @import
  45. 45. Layouts with flex and grid
  46. 46. CSS Custom Properties (variables)
  47. 47. Google Fonts preconnect preload optimized ✓ ✓ ✓
  48. 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. 49. CSS in WP Rig Component-level stylesheets, loaded progressively inside the <body> element via template files.
  50. 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. 51. async defer
  52. 52. Script download Script execution <script> <script async> <script defer> HTML parse Parse paused
  53. 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. 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. 55. Classes Components Namespaces Modern architecture No more WordPress PHP shenanigans
  56. 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. 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. 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. 59. wprig.io More info and training:
  60. 60. linkedin.com/learning More info and training:
  61. 61. github.com/wprig/wprig Contribute to WP Rig and make it yours:
  62. 62. Lykke til!

×