Sage
##P A McGowan
Sage 9, sample custom templates and images etc, for pages, hard code templates and select in WP-Admin (leave page blank) or create new ones, decent size footer with 5 columns for image/links etc using widgets. Switch different header in app.blade, one for front page and one for the rest.
Woocommerce 3.3 and Advanced Custom Fields added already, remove any not required by deleting them from resources and /app/setup.php (bottom of file)
Lots of extra widgets added for footer etc for links, ads or whatever. Uses Font Awesome 4.7 via CDN link in head.blade.
Add any CSS Framework or files to customise. Good Starter point with some setup already done.
##To do
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
$ npm install & composer install &yarn && yarn build
Dont forget to make upload and uploads/cache directories in the WP installation or you will get Illuminate errors.
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 hostnamepublicPath
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 sessionyarn run build
— Compile and optimize the files in your assets directoryyarn 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