Sage is a WordPress starter theme with a modern development workflow.
Sage 9 is in active development and is currently in beta. The
master branch tracks Sage 9 development. If you want a stable version, use the latest Sage 8 release.
- Sass for stylesheets
- Webpack for compiling assets, optimizing images, and concatenating and minifying files
- Browsersync for synchronized browser testing
- Laravel’s Blade as a templating engine
- CSS framework options:
- Font Awesome (optional)
See a working example at roots-example-project.com.
- Controller — WordPress plugin to enable a basic controller when using Blade with Sage 9
Make sure all dependencies have been installed before moving on:
Install Sage using Composer from your WordPress themes directory (replace
your-theme-name below with the name of your theme):
# @ app/themes/ or wp-content/themes/ $ composer create-project roots/sage your-theme-name dev-master
During theme installation you will have the options to:
- Update theme headers (theme name, description, author, etc.)
- Select a CSS framework (Bootstrap, Foundation, none)
- Add Font Awesome
- Configure Browsersync (path to theme, local development URL)
themes/your-theme-name/ # → Root of your Sage based theme ├── app/ # → Theme PHP │ ├── lib/Sage/ # → Blade implementation, asset manifest │ ├── admin.php # → Theme customizer setup │ ├── filters.php # → Theme filters │ ├── helpers.php # → Helper functions │ └── setup.php # → Theme setup ├── composer.json # → Autoloading for `app/` files ├── composer.lock # → Composer lock file (never edit) ├── dist/ # → Built theme assets (never edit) ├── node_modules/ # → Node.js packages (never edit) ├── package.json # → Node.js dependencies and scripts ├── resources/ # → Theme assets and templates │ ├── assets/ # → Front-end assets │ │ ├── config.json # → Settings for compiled assets │ │ ├── build/ # → Webpack and ESLint config │ │ ├── fonts/ # → Theme fonts │ │ ├── images/ # → Theme images │ │ ├── scripts/ # → Theme JS │ │ └── styles/ # → Theme stylesheets │ ├── functions.php # → Composer autoloader, theme includes │ ├── index.php # → Never manually edit │ ├── screenshot.png # → Theme screenshot for WP admin │ ├── style.css # → Theme meta information │ └── views/ # → Theme templates │ ├── layouts/ # → Base templates │ └── partials/ # → Partial templates └── vendor/ # → Composer packages (never edit)
app/setup.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
yarnfrom the theme directory to install dependencies
devUrlshould reflect your local development hostname
publicPathshould reflect your WordPress folder structure (
/wp-content/themes/sagefor non-Bedrock installs)
yarn run start— Compile assets when file changes are made, start Browsersync session
yarn run build— Compile and optimize the files in your assets directory
yarn run build:production— Compile assets for production
Sage 8 documentation is available at https://roots.io/sage/docs/.
Sage 9 documentation is currently in progress and can be viewed at https://github.com/roots/docs/tree/sage-9/sage.
Contributions are welcome from everyone. We have contributing guidelines to help you get started.
Keep track of development and community news.