Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern WordPress Development with Roots & Sage

Modern WordPress Development with Roots & Sage

Colorado Springs WordPress Meetup


Ben Word

July 12, 2018

More Decks by Ben Word

Other Decks in Programming


  1. Modern WordPress Development with Roots & Sage Ben Word @retlehs

    @rootswp https://roots.io/
  2. 2009-2011: Building out 3 themes a day.

  3. Sage is a starter theme Not a framework No updating

    No child themes (usually) ✅ Helpful mostly-blank starting point
  4. Ben’s Blueprint (2009-2011) Starkers · HTML5 Boilerplate · Blueprint CSS

    Roots (2011-2015) Grunt · Bootstrap · Theme wrapper Roots ➡ Sage (February 2015) Sage 8 (2015-2018) Gulp · Bower · Bootstrap
  5. Sage 9 (2018-Current) • Dependency management with Composer and npm

    • Asset management and optimization with Webpack
 • Template inheritance with Laravel’s Blade
 • Modern PHP & PSR-2 coding standards
 • An improved project structure
  6. We’re still working on and using Sage (7+ years later)

    because we’re invested in improving WordPress and the web in general. Many people use WordPress, and we believe there is a way to use it more efficiently. “I think we’re all on the same page when it comes to WordPress. WordPress is a lemon, but the industry likes WordPress, so let’s make lemonade.” — Craig Sage project lead
  7. None
  8. 100,000+ Sage sites on the web 
 5,000 new projects

    created a month 9,400+ GitHub stars & top 20 PHP projects
  9. None
  10. Sage optimizes content efficiency, part of Google’s web fundamentals and

    best practices for modern web development: • Eliminating unnecessary downloads • Optimizing encoding and transfer size of text-based assets • Image optimization https://developers.google.com/web/fundamentals/
  11. Sage helps you become a better developer “Sage, Bedrock and

    Trellis by Roots have challenged me to become a better WordPress developer over the years + modernize my toolset.” Eric Iffland “Sage is great for a number of reasons. For me, it strikes a nice balance between a "too much stuff" that a framework brings and "not enough stuff" a theme like Underscores brings. It's also robust and as object oriented as a theme can be.” Justin Hall “... it’s Roots that has had the biggest impact on my learning, my efficiency and the quality of my work. The various Roots projects have always pushed me to learn new things (even when I wasn’t comfortable with them) over the last 3 or so years.” Jimmy Smutek “I'd say that's the best thing about Sage — the team behind it actively improves every version, it keeps you on your toes ... and actually teaches you good practices for wider development rather than very WP specific stuff.” Steve Honey
  12. None
  13. None
  14. None
  15. None
  16. None
  17. Requirements
 • PHP >= 7.1.3 • Composer • Node.js via

    nvm • Yarn
  18. None
  19. None
  20. None
  21. None
  22. Organization Theme functionality & configuration Built theme files Theme root

    ✨ Stylesheets, JavaScript, images, fonts Templates Composer dependencies Node dependencies
  23. Assets organization Build setup — most people never edit JS

    setup and router Sass setup
  24. Styles organization

  25. JS organization

  26. Template Inheritance Underscores vs Sage

  27. Anttoni Lahtinen @pikkulahti

  28. Template Inheritance resources/views/layouts/app.blade.php

  29. Blade

  30. Passing data to Blade templates

  31. Blade Resources • How Blade @stacks make my life better

    via Roots Discourse • Best Practice / Resources for Blade via Roots Discourse • Blade documentation
  32. Improve the readability of your code • Anonymous functions •

    Short echo syntax • Short array syntax Also see: Upping PHP Requirements in Your WordPress Themes & Plugins by Kalen Johnson on the Roots blog
  33. Sage is ready for you to make it whatever you

    want it to be • Want to remove Bootstrap and replace it with another framework, or just have a completely fresh start? 
 • Want to add libraries? 
 • Sage is delete-key friendly and ready for you to modify to fit your needs.
 • Want to add Beaver Builder or another page builder to help with complex layouts?
  34. Treat this year as if it were your first year

    as a developer and assimilate everything you can. Reclaim the energy you had in your first year of coding. Regain the drive you had to prove to yourself and to your employers that you were “all that” for this IT field. Resume reading about tech, playing with new techniques, and persuading others to teach you. Reacquire the excitement of collaborating on newfound knowledge with other developers. 
 Be a lifelong learner and investigate all forms of learning. — Don Denoncourt's On Getting Old(er) in Tech