Skip to content
Marc Boisvert-Dupras

Getting Started with the Sage 10 Starter Theme for WordPress

Posted in WordPress, Tutorial — 3 minutes read

Sage 10 is an advanced starter theme for WordPress, designed to streamline the development process and offer a modern and structured approach to theme creation. Built by the team at Roots, Sage 10 embraces the latest web technologies and best practices to help developers build efficient and well-organized WordPress themes. One of the major changes in Sage 10 is the introduction of the Bud build system, which simplifies the asset compilation process.

In this tutorial, we will walk you through the process of setting up Sage 10 and help you get started with your first project.

Prerequisites

Before getting started with Sage 10, ensure that you have the following installed on your local development environment:

  • PHP >=8.0
  • WordPress >= 5.4
  • Composer (Dependency Manager for PHP)
  • node.js runtime >=18.12.1 (LTS) (Volta is recommended to manage your node.js versions)
  • yarn >=1.22 or npm >=8.3
  • WP-CLI (optional, but recommended)

Installing Sage 10

First, navigate to the WordPress themes directory:

bash
cd wp-content/themes/

Then, use Composer to create a new Sage 10 project:

bash
composer create-project roots/sage my-theme-name

Replace ‘my-theme-name’ with the desired name for your theme. This will download Sage 10 into the specified directory and install its dependencies.

Next, let’s install our node.js dependencies and configure the build script:

bash

npm install

To configure the build script, open the bud.config.js file and change the following options:

.proxy('https://your-site.test')
.setPublicPath('/wp-content/themes/your-theme-name/public')Code language: JavaScript (javascript)

For more information on Bud configuration you can check out the official documentation!

Now we should be good to go! Go back into the WordPress administration panel and activate your new theme under Appearance -> Themes. Finally, run the npm run dev command and open your browser to see the changes.

Understanding the Sage 10 Structure

Sage 10 uses a modern, structured file organization. Here’s a brief overview of the main directories and files:

  • app/ -> Contains most of the theme’s PHP files including Service Providers, View models and more…
  • public/ -> Built theme assets
  • resources/ -> Theme assets and templates including scripts, images, components, blocks and so on…

Conclusion

Sage 10 offers a modern and efficient approach to WordPress theme development, embracing the latest web technologies and best practices. By leveraging the power of Laravel’s Blade templating engine and Bud build system, Sage 10 allows developers to create highly maintainable and well-organized themes.

With this tutorial, you should now have a basic understanding of how to set up and work with the Sage 10 starter theme. As you continue to explore its features and capabilities, you will find that Sage 10 can be a powerful ally in creating professional, high-quality WordPress themes.

Further Resources:

To dive deeper into Sage 10 and improve your skills, consider the following resources:

  • Roots Documentation (https://roots.io/docs/): The official documentation for Roots projects, including Sage, Bedrock, and Trellis, provides comprehensive guides and explanations of the various features and components.
  • Laravel Blade Documentation (https://laravel.com/docs/blade): Since Sage 10 uses Blade templating engine, understanding its syntax and features will help you create more efficient and flexible templates.
  • Bud Documentation (https://bud.js.org/): Familiarize yourself with the Bud build system to better manage and optimize your theme’s assets.

By exploring these resources and practicing your skills, you’ll be well on your way to becoming a proficient Sage 10 developer. Happy coding!