sage 0,3,9,0,2,9,0,9 editorconfig eslint travis-ci Packagist npm

WordPress starter theme with a modern development workflow

Sage

Packagist devDependency Status Build Status

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.

Features

  • 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:
  • Font Awesome (optional)

See a working example at roots-example-project.com.

Recommended extensions

  • Controller — WordPress plugin to enable a basic controller when using Blade with Sage 9

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 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)

Theme structure

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)

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

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.

Contributing

Contributions are welcome from everyone. We have contributing guidelines to help you get started.

Community

Keep track of development and community news.

Related Repositories

sage

sage

Mirror of the Sage source tree ...

sagecell

sagecell

The Sage Cell Server---providing a way to embed Sage computations into any web page. ...

Foundation-for-Sage

Foundation-for-Sage

Sage 8 using Foundation for Sites instead of Bootstrap ...

sage-translations

sage-translations

Community translations for the Sage WordPress starter theme ...

sage-timber

sage-timber

SageTimber is Sage WordPress theme ported to twig templates for use with Timber plugin. ...


Top Contributors

retlehs swalkinshaw austinpray QWp6t Foxaii kalenjohnson weslly JulienMelissas coreywagehoft leoj3n cfxd ptrckvzn lautreamont3 johnraz hariadi ntwb fingli polycode-0x90 emaildano chriscarr ewafford jakecobley kevinlisota mwrather cabgfx ptibbetts zensimilia HansCz karalamalar joemaller

Dependencies

package version
dev autoprefixer ~7.1
browser-sync ~2.18
browsersync-webpack-plugin ^0.6.0
bs-html-injector ~3.0
buble-loader ^0.4.1
cache-loader ~1.0
clean-webpack-plugin ^0.1.16
copy-globs-webpack-plugin ^0.2.0
css-loader ^0.28.4
cssnano ~4.0.0-rc.1
eslint ~4.2
eslint-loader ~1.9
eslint-plugin-import ~2.7
extract-text-webpack-plugin ~3.0
file-loader ^0.11.2
imagemin-mozjpeg ~6.0
imagemin-webpack-plugin ~1.5.0-beta.0
import-glob ~1.5
node-sass ~4.5
postcss-loader ~2.0
postcss-safe-parser ~3.0
resolve-url-loader ~2.1
rimraf ~2.6
sass-loader ~6.0
style-loader ^0.18.2
stylelint ~7.12
stylelint-config-standard ~16.0
stylelint-webpack-plugin ^0.8.0
url-loader ^0.5.9
webpack ~3.3
webpack-assets-manifest ^0.7.0
webpack-dev-middleware ~1.11
webpack-hot-middleware ~2.18
webpack-merge ~4.1
yargs ~8.0
bootstrap ^4.0.0-alpha.6
jquery 1.12.4 - 3

Releases

-   9.0.0-alpha.3 zip tar
-   9.0.0-alpha.2 zip tar
-   9.0.0-alpha.1 zip tar
-   8.5.0 zip tar
-   8.4.2 zip tar
-   8.4.1 zip tar
-   8.4.0 zip tar
-   8.3.0 zip tar
-   8.2.1 zip tar
-   8.2.0 zip tar
-   8.1.1 zip tar
-   8.1.0 zip tar
-   8.0.1 zip tar
-   8.0.0 zip tar
-   7.0.3 zip tar
-   7.0.2 zip tar
-   7.0.1 zip tar
-   7.0.0 zip tar
-   6.5.2 zip tar
-   6.5.1 zip tar
-   6.5.0 zip tar
-   6.4.0 zip tar
-   6.3.0 zip tar
-   6.2.0 zip tar
-   6.1.0 zip tar
-   6.0.0 zip tar
-   5.2.0 zip tar
-   5.1.0 zip tar
-   5.0.0 zip tar
-   4.1.0 zip tar