WordPress starter theme with a modern development workflow
Prepared by Prograffing Team
Official Website | Documentation | Change Log
Sage is an open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features and products within the Roots ecosystem is not sustainable without proper financial backing. If you have the capability, please consider donating using the links below:
- Harness the power of Laravel and its available packages thanks to Acorn.
- Clean, efficient theme templating utilizing Laravel Blade.
- Easy Browsersync support alongside asset compilation, concatenating, and minification powered by Laravel Mix.
- Out of the box support for TailwindCSS and jQuery.
- A clean starting point for theme styles using Sass.
See a working example at roots-example-project.com.
Make sure all dependencies have been installed before moving on:
- Run
composer install
from the theme directory to install Sage dependencies - Run
yarn
from the theme directory to install dependencies - Update
webpack.mix.js
with your local dev URL
themes/your-theme-name/ # → Root of your Sage based theme
├── app/ # → Theme PHP
│ ├── View/ # → View models
│ ├── Providers/ # → Service providers
│ ├── admin.php # → Theme customizer setup
│ ├── filters.php # → Theme filters
│ ├── helpers.php # → Helper functions
│ ├── custom-menu.php # → Custom menu functions
│ └── setup.php # → Theme setup
├── bootstrap/ # → Acorn bootstrap
│ ├── cache/ # → Acorn cache location (never edit)
│ └── app.php # → Acorn application bootloader
├── config/ # → Config files
│ ├── app.php # → Application configuration
│ ├── assets.php # → Asset configuration
│ ├── filesystems.php # → Filesystems configuration
│ ├── logging.php # → Logging configuration
│ └── view.php # → View configuration
├── composer.json # → Autoloading for `app/` files
├── composer.lock # → Composer lock file (never edit)
├── public/ # → Built theme assets (never edit)
├── functions.php # → Theme bootloader
├── index.php # → Theme template wrapper
├── node_modules/ # → Node.js packages (never edit)
├── package.json # → Node.js dependencies and scripts
├── resources/ # → Theme assets and templates
│ ├── fonts/ # → Theme fonts
│ ├── images/ # → Theme images
│ ├── scripts/ # → Theme javascript
│ ├── styles/ # → Theme stylesheets
│ └── views/ # → Theme templates
│ ├── components/ # → Component templates
│ ├── form/ # → Form templates
│ ├── layouts/ # → Base templates
│ └── components/ # → 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.
If You want use svg icons please create folder named images/svg
. Paste svg code to .blade.php
file. To use svg in .blade.php file use @include('icon::svgFileName')
.
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