Sage is a WordPress starter theme based on HTML5 Boilerplate, gulp, Bower, and Bootstrap Sass, that will help you make better themes.
- Source: https://github.com/roots/sage
- Homepage: https://roots.io/sage/
- Documentation: https://roots.io/sage/docs/
- Twitter: @rootswp
- Newsletter: Subscribe
- Forum: https://discourse.roots.io/
Prerequisite | How to check | How to install |
---|---|---|
PHP >= 5.6.x | php -v |
php.net |
Node.js >= 4.5 | node -v |
nodejs.org |
gulp >= 3.8.10 | gulp -v |
npm install -g gulp |
Bower >= 1.3.12 | bower -v |
npm install -g bower |
For more installation notes, refer to the Install gulp and Bower section in this document.
- gulp build script that compiles both Sass and Less, checks for JavaScript errors, optimizes images, and concatenates and minifies files
- BrowserSync for keeping multiple browsers and devices synchronized while testing, along with injecting updated CSS and JS into your browser while you're developing
- Bower for front-end package management
- asset-builder for the JSON file based asset pipeline
- Bootstrap
- Theme wrapper
- ARIA roles and microformats
- Posts use the hNews microformat
- Multilingual ready and over 30 available community translations
Install the Soil plugin to enable additional features:
- Cleaner output of
wp_head
and enqueued assets - Cleaner HTML output of navigation menus
- Root relative URLs
- Nice search (
/search/query/
) - Google CDN jQuery snippet from HTML5 Boilerplate
- Google Analytics snippet from HTML5 Boilerplate
See a complete working example in the roots-example-project.com repo.
Install Sage by copying the project into a new folder within your WordPress themes directory.
Make sure Composer has 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):
# @ example.com/site/web/app/themes/
$ composer create-project roots/sage your-theme-name 8.5.3
Edit lib/setup.php
to enable or disable theme features, setup navigation menus, post thumbnail sizes, post formats, and sidebars.
Sage uses gulp as its build system and Bower to manage front-end packages.
Building the theme requires node.js. We recommend you update to the latest version of npm: npm install -g npm@latest
.
From the command line:
- Install gulp and Bower globally with
npm install -g gulp bower
- Navigate to the theme directory, then run
npm install
- Run
bower install
You now have all the necessary dependencies to run the build process.
gulp
— Compile and optimize the files in your assets directorygulp watch
— Compile assets when file changes are madegulp --production
— Compile assets for production (no source maps).
To use BrowserSync during gulp watch
you need to update devUrl
at the bottom of assets/manifest.json
to reflect your local development hostname.
For example, if your local development URL is http://project-name.dev
you would update the file to read:
...
"config": {
"devUrl": "http://project-name.dev"
}
...
If your local development URL looks like http://localhost:8888/project-name/
you would update the file to read:
...
"config": {
"devUrl": "http://localhost:8888/project-name/"
}
...
Sage documentation is available at https://roots.io/sage/docs/.
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