Modern WordPress Development with Roots & Sage

Colorado Springs WordPress Meetup

Transcript

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
8. 100,000+ Sage sites on the web 
 5,000 new projects created a month 9,400+ GitHub stars & top 20 PHP projects
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
17. Requirements
 • PHP >= 7.1.3 • Composer • Node.js via nvm • Yarn
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