Sage
Sage is a WordPress starter theme with a modern development workflow.
Features
- Sass for stylesheets
- Modern JavaScript
- Webpack for compiling assets, optimizing images, and concatenating and minifying files
- Browsersync for synchronized browser testing
- Blade as a templating engine
- Controller for passing data to Blade templates
- CSS framework (optional): Bootstrap 4, Bulma, Foundation, Tachyons
- Font Awesome (optional)
See a working example at roots-example-project.com.
Requirements
Make sure all dependencies have been installed before moving on:
Theme installation
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 options to update style.css
theme headers, select a CSS framework, add Font Awesome, and configure Browsersync.
Theme structure
themes/your-theme-name/ # β Root of your Sage based theme
βββ app/ # β Theme PHP
β βββ controllers/ # β Controller files
β βββ 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)
Theme setup
Edit app/setup.php
to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
Theme development
- Run
yarn
from the theme directory to install dependencies - Update
resources/assets/config.json
settings:-
devUrl
should reflect your local development hostname -
publicPath
should reflect your WordPress folder structure (/wp-content/themes/sage
for non-Bedrock installs)
-
Build commands
-
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
Documentation
Contributing
Contributions are welcome from everyone. We have contributing guidelines to help you get started.
Community
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
Personal projects
View allAbout
Creator of Interactive Art
Info
CEO and Founder at Ayphu
PerΓΊ - Arequipa
7:24 AM
Member since August 11, 2014