A little bit customized Sage10 workflow, added tailwind/jit to drastically decrease compile-time and postcss as a primary CSS processor.
CleanShot 2021-03-28 at 11.58.37.png
- Clone/Download repo to your Theme directory
- Run composer install
- Run npm install && npm run build:production
- Change webpack.mix.js browserSync proxy value
- Run npm run start
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-name
To 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-master
During 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 configuration
Edit app/setup.php
to enable or disable theme features, setup navigation menus, post thumbnail sizes, and sidebars.
- Run
yarn
from the theme directory to install dependencies - Update
webpack.mix.js
with 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