README

WordPress starter theme with Laravel Blade components and templates, Tailwind CSS, and a modern development workflow

Website Documentation Releases Support

Features

Harness the power of Laravel and its available packages thanks to Acorn.
Clean, efficient theme templating utilizing Laravel Blade.
Lightning fast frontend development workflow powered by Bud.
Out of the box support for Tailwind CSS.

Requirements

Make sure all dependencies have been installed before moving on:

Acorn v3
WordPress >= 5.9
PHP >= 8.0 (with php-mbstring enabled)
Composer
Node.js >= 16
Yarn

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 clarifynl/sage-clarify-tw your-theme-name

To install the latest development version of Sage, add dev-main to the end of the command:

$ composer create-project clarifynl/sage-clarify-tw your-theme-name dev-main

Make sure that you have Acorn installed.

Theme structure

themes/your-theme-name/   # → Root of your Sage based theme
├── app/                  # → Theme PHP
│   ├── Providers/       # → Service providers
│   ├── View/            # → View models
│   ├── helpers.php      # → Theme helper functions
│   ├── Hooks.php        # → Wordpress Hooks class
│   └── setup.php        # → Theme setup
├── composer.json         # → Autoloading for `app/` files
├── 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
│       ├── forms/        # → Form templates
│       ├── layouts/      # → Base templates
│       ├── partials/     # → Partial templates
        └── sections/     # → Section templates
├── screenshot.png        # → Theme screenshot for WP admin
├── style.css             # → Theme meta information
├── vendor/               # → Composer packages (never edit)
└── bud.config.js         # → Bud 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 bud.config.js with your local dev URL

Theme update

Run git fetch upstream from the theme directory to update this start theme with it's upstream repository from roots/sage.

Build commands

yarn dev — Compile assets when file changes are made, start Browsersync session
yarn build — Compile assets for production

Community

Keep track of development and community news.

Join us on Discord by sponsoring us on GitHub
Participate on the Roots Discourse
Follow @rootswp on Twitter
Read and subscribe to the Roots Blog
Subscribe to the Roots Newsletter

clarifynl / sage-clarify-tw

Maintainers

Details