skip to content

Search

Part II: The Sage Theme

3 min read

The way you structure WordPress matters. Sage does it better than classic themes, and we're going to talk about why.

# series
# wordpress
# tutorial
# sage
Enterprise WP with Sage

MVC for WordPress

MVC is one of those acronyms that slithered into popular use and has cemented itself as a standard convention in structuring code. We don’t care about outlining every detail of the model, view, and controller relationship. We’re not trying to inject MVC into WordPress for its own sake, we’re trying to solve a core problem with “traditional” WordPress. I was going to call it vanilla WordPress, but people actually like vanilla.

Forget Templates and Plugins

In traditional WordPress, you have a heirachy of templates. You can overwrite templates based on the content type, and this is done via file name convention.

Separation of concerns is achieved by slicing server-side login into one or more plugin, with “views” rendered as PHP files. Even for simple projects, this can get confusing.

  • You often need hooks just to fetch data from ACF
  • Properly “componetizing” both server side and front end code can be difficult. What if you need to nest a component inside another? Partials break down in flexibilty very quickly.
  • You can commit many, many sins out of desperation, and it always happens
  • If you have multiple devs, the sins quickly multiply

There’s a better way. It’s called the Sage theme.

WTF is Roots and Trellis and Bedrock?

Unfotunately, the Laravel style also comes with baggage. Nobody’s perfect, you know? The Laravel ecosystem likes to sometimes lose the plot and wrap everything into a large number of proper nouns with increasingly complex (and brittle) layers of abstraction. What we really want to work with right now is the Sage theme.

Roots is the name of the team that makes it, and Trellis is a comprehensive build system that uses Ansible. Big, comprehensive build systems like Trellis do sound enterprisey. In theory, you’d think that’s the best way to start because it asserts a “I do everything” approach to life. Maybe it’s counter-intuitive, but I strongly suggest that you use a traditional Wordpress install (not even Bedrock) with a Lando local environment unless you’ve really thought about things. Ironically, IAC works the worst when you trust it to do everything, in my opinion.

Let’s be honest, enterprise doesn’t mean you have an unlimited infra budget. Many enterprises launch with off-the-shelf, specialized Wordpress hosts and classic WP installs.

In short, just install sage unless you’re sure you know wtf you’re doing ;)

Install Sage:

composer create-project roots/sage your-theme-name

Read the Docs

The Sage Wordpress Theme is Magic

  1. The theme you download is part of your codebase. Duh. Don’t be afraid to modify things that live here, you’ll need to.
  2. If you’ve used Laravel, Sage gives you the Blade templating system. You might not care about this, but we’ll see why you will in a moment.
  3. Instead of thinking in a rigid stone-age “templates”, UI components are actually components. We’ll learn more about what this really means soon. I’m sure you’re excited.
  4. Client side assets are bundled with Vite. That’s also awesome for reasons that won’t seem obvious at first.

Figure out your own local environment

Nobody likes it. Even me. I’d use Lando because it’s super easy, but I’m not going to tell you how to run your local. Nobody needs that boring crap in a tutorial, right?

That said, I’m going to write this tutorial assuming you are using lando. That’s because I’m using it and I’m selfish.