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
- ES6 for JavaScript
- 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:
- Bootstrap 4
- Foundation
- None (blank slate)
- 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-masterDuring 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)Edit app/setup.php to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
- Run
yarnfrom the theme directory to install dependencies - Update
resources/assets/config.jsonsettings:devUrlshould reflect your local development hostnamepublicPathshould reflect your WordPress folder structure (/wp-content/themes/sagefor non-Bedrock installs)
yarn run start— Compile assets when file changes are made, start Browsersync sessionyarn run build— Compile and optimize the files in your assets directoryyarn 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.
- Participate on the Roots Discourse
- Follow @rootswp on Twitter
- Read and subscribe to the Roots Blog
- Subscribe to the Roots Newsletter
- Listen to the Roots Radio podcast