Jelle

How and why I use Roots Sage for my custom-made WordPress websites

I often see developers skepticism after I tell them that I build a lot of my projects with WordPress. Why? Because they think it's old-fashioned, or that it's just a combination of page builders and plugins.

This often changes to enthusiasm after I tell them how I work with it. After all, I combine best of both worlds. The user-friendly CMS, but with a modern development workflow.

By using Roots Sage as my starting point, I can build WordPress websites with a modern development workflow. More specifically, it allows you to use parts of Laravel within WordPress.

What is Roots Sage exactly

Roots Sage is a WordPress Starter Theme on steroids. Since the introduction of version 10, it requires Roots Acorn. Roots Acorn is what gives it the magic.

Simply put, this combination gives you a lot of the power from Laravel, but within your WordPress theme. It gives you access to Laravel Blade, Laravel View Composers, Service Providers, Laravel Caching, Laravel Livewire and more. You can even use Laravel Routing if you really wanted to.

Next to the above, Roots also developed Bud. Which is a build tool, which works great within the Roots Ecosystem. It's fast and can even generate your theme.json file based on your tailwind configuration.

Laravel Templating within WordPress

If I had to choose my favorite feature, it would be Laravel Blade. It gives me so much more structure within my theme. Standard WordPress themes are a big mess in my opinion.

Using components and view composers in combination is which gives me the greatest power. I can perform custom logic outside of my views. This allows me to make my themes maintainable.

Third party packages build for sage

Next to the above, using third party packages makes my life even better. Often build by maintainers and/or enthusiasts of the Roots Ecosystem.

One of my favorite packages was build by Log1x. He built the ACF Composer package.

ACF Composer allows you to maintain all your custom fields within your projects in a clean structure.

If I want to create a new Block within gutenberg. I can run the command:

$ wp acorn acf:block SuperAmazingBlock

This creates 2 files:
app/Blocks/SuperAmazingBlock.php
This file contains the following:

  • Block meta data, such as name and description
  • A fields() method, which is used to generate the field group within ACF
  • A with() method, which is used to declare which data has to be send to the view
  • Custom methods to format data whenever necessary.

resources/views/blocks/super-amazing-block.blade.php
Just a simple blade templating file to build your HTML. It has all data declared before to be used inside of here. No logic in your template file necessary.

Combining Laravel and WordPress projects

As a developer I often work on standalone Laravel projects. By using Roots Sage and Acorn. It allows me to share the same thought process and structure within my projects.

This gives Roots Sage the edge above other advanced WP Starter Themes for me personally. I looked at Timber in the pasted. Even though it is a great starting point. It is a lot different to Laravel, which is my preferred PHP framework.

Jelle