WordPress starter theme with a modern development workflow
Built with ❤️
Official Website | Documentation | Change Log
Sage is an open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features and products within the Roots ecosystem is not sustainable without proper financial backing. If you have the capability, please consider donating using the links below:
Sage is a WordPress starter theme with a modern development workflow.
Sage 10 is in active development and is currently in alpha. The master branch tracks Sage 10 development. If you want a stable version, use the latest Sage 9 release.
- Sass for stylesheets
- Modern JavaScript
- Laravel Mix for compiling assets and concatenating and minifying files
- Browsersync for synchronized browser testing
- Blade as a templating engine
- Bootstrap 4 (optional)
See a working example at roots-example-project.com.
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-nameTo install the latest development version of Sage, add dev-master to the end of the command:
$ composer create-project roots/sage your-theme-name dev-masterDuring theme installation you will have options to update style.css theme headers, select a CSS framework, and configure Browsersync.
themes/your-theme-name/ # → Root of your Sage based theme
├── app/ # → Theme PHP
│ ├── Composers/ # → View composers
│ ├── Providers/ # → Service providers
│ ├── admin.php # → Theme customizer setup
│ ├── filters.php # → Theme filters
│ ├── helpers.php # → Helper functions
│ └── setup.php # → Theme setup
├── config/ # → Config files
│ ├── app.php # → Application configuration
│ ├── assets.php # → Asset configuration
│ ├── filesystems.php # → Filesystems configuration
│ └── view.php # → View configuration
├── composer.json # → Autoloading for `app/` files
├── composer.lock # → Composer lock file (never edit)
├── dist/ # → Built theme assets (never edit)
├── functions.php # → Composer autoloader, Acorn bootloader
├── index.php # → Never manually edit
├── node_modules/ # → Node.js packages (never edit)
├── package.json # → Node.js dependencies and scripts
├── resources/ # → Theme assets and templates
│ ├── assets/ # → Front-end assets
│ │ ├── fonts/ # → Theme fonts
│ │ ├── images/ # → Theme images
│ │ ├── scripts/ # → Theme JS
│ │ └── styles/ # → Theme stylesheets
│ └── views/ # → Theme templates
│ ├── components/ # → Component templates
│ ├── layouts/ # → Base templates
│ └── partials/ # → Partial templates
├── screenshot.png # → Theme screenshot for WP admin
├── storage/ # → Storage location for cache (never edit)
├── style.css # → Theme meta information
├── vendor/ # → Composer packages (never edit)
└── webpack.mix.js # → Laravel Mix configurationEdit 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
webpack.mix.jswith your local dev URL
yarn start— Compile assets when file changes are made, start Browsersync sessionyarn build— Compile and optimize the files in your assets directoryyarn build:production— Compile assets for production
Contributions are welcome from everyone. We have contributing guidelines to help you get started.
Help support our open-source development efforts by becoming a patron.
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