Need help with sage?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

roots
11.0K Stars 2.9K Forks MIT License 2.3K Commits 36 Opened issues

Description

WordPress starter theme with a modern development workflow

Services available

!
?

Need anything else?

Contributors list

No Data

Sage

MIT License Packagist Build Status Follow Roots

WordPress starter theme with a modern development workflow
Built with ❤️

Official Website | Documentation | Change Log

Supporting

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:

Sponsor on GitHub Sponsor on Patreon Donate via PayPal

About Sage

Sage is a productivity-driven WordPress starter theme with a modern development workflow.

The

master
branch currently tracks Sage 10 which is in active development. Looking for Sage 9? See releases.

Features

  • 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 Bootstrap 5 and jQuery.
  • A clean starting point for theme styles using Sass.

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

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

Theme structure

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
│   └── setup.php         # → Theme setup
├── 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)
├── dist/                 # → 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
│   ├── assets/           # → Front-end assets
│   │   ├── fonts/        # → Theme fonts
│   │   ├── images/       # → Theme images
│   │   ├── scripts/      # → Theme javascript
│   │   └── styles/       # → Theme stylesheets
│   └── views/            # → Theme templates
│       ├── components/   # → Component templates
│       ├── form/         # → Form 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

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
    webpack.mix.js
    with your local dev URL

Build commands

  • yarn start
    — Compile assets when file changes are made, start Browsersync session
  • yarn build
    — Compile and optimize the files in your assets directory
  • yarn build:production
    — Compile assets for production

Documentation

Contributing

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

Sage sponsors

Help support our open-source development efforts by becoming a sponsor.

Kinsta KM Digital Carrot C21 Redwood Realty Icons8

Community

Keep track of development and community news.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.