Sage 9 or Sage 10: When to use Sage WordPress Framework

I’m a big fan of the Sage WordPress framework. I think it’s one of the best things that’s ever happened to WordPress development. As someone who has used Underscores and Genesis, I think Sage is what you should be using if you’re familiar with Laravel development.

So, if you’re wondering, should I use Sage 9 or Sage 10, what’s the difference, you’re in the right place. Either of these will work for you, provided you have a good hosting platform that supports Sage. However, there is a huge difference between Sage 9 and Sage 10.

Architecture

WordPress sure has its way of doing things. Sage 9 doesn’t include header.php, footer.php and even style.css. If you try to install Sage 9 theme thru the WordPress admin, it would show a compatibility error.

Sage 10 on the other hand includes, inter alia, an index.php file and a style.css file. The index.php file calls the header and footer hooks and puts your code in a #app container. It’s kinda similar to how Vue & React works.

In short, Sage 10 made a lot more efforts to follow the WordPress conventions, which is a great thing.

View Composer

Sage 9 uses Sober Controller (https://github.com/soberwp/controller) to pass data to blade files. This package has lots of limitations and I will mention two. One is that it’s not flexible. It’s always one controller per view, except you use trait. Two, every method automatically gets passed down to the view and runs immediately except it’s a static function.

Sage 10 uses Laravel-like view composer that’s very flexible, you get to choose the blade files for a Composer and also the methods that should be passed to it.

Laravel Mix vs Bud

Sage 9 uses Laravel Mix https://laravel-mix.com/ while Sage 10 uses https://bud.js.org/ to compile assets. You can visit the bud URL to view the comparison between Bud and Laravel Mix. Something huge worth mentioning is that in Sage 10, changing blade files also trigger re-compilation of assets.

If you see a lot of hot module .json files in your public or build folder, even after running yarn build then you need to run yarn build --clean and this will remove the useless files.

Tailwind as default CSS framework

Sage 10 ships straight with Tailwind CSS and this is a good one for many of us that use TailwindCSS. In Sage 9, you would have to choose Tailwind during installation and configure it thereafter. It’s not always fun if the Tailwind version that ships with Sage 9 is not what you want.

Providers

Sage 10 comes with Providers, similar to what you have in Laravel with register and boot mThemeServiceProvider which does almost nothing. The documentation is very silent on the use cases of Providers especially in the WordPress ecosystem where you have plugins that handle functionalities. Also, creating another service provider wont just work until you clear the cache. This got me mad for a while since there is no documentation on this.

Theme.json & Gutenberg

Theme.json is the new way to configure the editor. Sage 10 ships with theme.json file that can be customised as you wish. To read more about theme.json please see this – https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/

Verdict

If you’re struggling with what version to go for, please choose Sage 10. As you’ve seen above, it’s more compliant with the WordPress and Laravel ways of doing things, it has better architecture and more future-proof.

Do you have a Sage project you would like to discuss with us? Let’s talk here