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
Tweet

More Decks by Ben Word

Other Decks in Programming

Transcript

  1. Modern WordPress
    Development with
    Roots & Sage
    Ben Word
    @retlehs @rootswp
    https://roots.io/

    View Slide

  2. 2009-2011: Building out 3 themes a day.

    View Slide

  3. Sage is a starter theme
    Not a framework
    No updating
    No child themes (usually)
    ✅ Helpful mostly-blank starting point

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  7. View Slide

  8. 100,000+ Sage sites on the web

    5,000 new projects created a month
    9,400+ GitHub stars & top 20 PHP projects

    View Slide

  9. View Slide

  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/

    View Slide

  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

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. Requirements

    • PHP >= 7.1.3
    • Composer
    • Node.js via nvm
    • Yarn

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Organization
    Theme functionality & configuration
    Built theme files
    Theme root ✨
    Stylesheets, JavaScript, images, fonts
    Templates
    Composer dependencies
    Node dependencies

    View Slide

  23. Assets organization
    Build setup — most people never edit
    JS setup and router
    Sass setup

    View Slide

  24. Styles organization

    View Slide

  25. JS organization

    View Slide

  26. Template Inheritance
    Underscores vs Sage

    View Slide

  27. Anttoni Lahtinen
    @pikkulahti

    View Slide

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

    View Slide

  29. Blade

    View Slide

  30. Passing data to Blade templates

    View Slide

  31. Blade Resources
    • How Blade @stacks make my life better via Roots Discourse
    • Best Practice / Resources for Blade via Roots Discourse
    • Blade documentation

    View Slide

  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

    View Slide

  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?

    View Slide

  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

    View Slide