Sage 10

This page is a place for me to collect various knowledge about Sage 10.

Table of Contents

Installing Sage 10

To install Sage 10 instead of Sage 9, add dev-master:

composer create-project roots/sage your-theme-name dev-master
cd your-theme-name
composer update
wp theme activate your-theme-name

In webpack.mix.js, change the browserSync URL to reflect your project:


Start watching files

yarn start

FontAwesome Pro

If you have a FontAwesome Pro license, here’s how you enable it in Sage 10:

Go to the FontAwesome account page and fetch the Pro Package Token.

In the Sage theme folder, add a .npmrc file with the token environment variable:


Also remember to add .npmrc to .gitignore.

Then add to package.json:

yarn add @fortawesome/fontawesome-pro @fortawesome/fontawesome-svg-core @fortawesome/pro-regular-svg-icons @fortawesome/free-brands-svg-icons

In resources/assets/scripts/app.js, add:

// Font Awesome
// Import the needed Font Awesome functionality

import { library, dom } from '@fortawesome/fontawesome-svg-core';

// import Font Awesome icons
import {
    faUser, // Example
} from '@fortawesome/pro-regular-svg-icons';

import {
} from '@fortawesome/free-brands-svg-icons';

// add the imported icons to the library

// tell FontAwesome to watch the DOM and add the SVGs when it detects icon markup;

Enable global helper functions

The global helper functions, like app(), resolve(), logger() are disabled by default. To enable them, set ‘globals’ to true in config/app.php.


Use smarteist / sage-woocommerce to add support for overriding WooCommerce templates/partials with Blade templates.


Acorn has a wp-cli command:

wp acorn <command>

Some useful commands: