ravorona / sage
Wordpress theme based on Sage starter theme using Vite
Installs: 246
Dependents: 0
Suggesters: 0
Security: 0
Stars: 31
Watchers: 4
Forks: 2
Open Issues: 1
Language:SCSS
Requires
- php: ^8.1
Requires (Dev)
- laravel/pint: ^1.13
- squizlabs/php_codesniffer: 3.7.1
Suggests
- log1x/sage-directives: A collection of useful Blade directives for WordPress and Sage (^1.0).
- log1x/sage-svg: A useful SVG directive for inlining SVG's within Blade views (^1.0).
README
🧩 Wordpress Starter Theme
Requirements
Theme installation
- Make sure that you have Acorn installed
- 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 ravorona/sage your-theme-name
To install the latest development version of Sage, add dev-develop
to the end of the command:
$ composer create-project ravorona/sage your-theme-name dev-develop
Theme structure
themes/your-theme-name/ # → Root of your Sage based theme ├── app/ # → Theme PHP │ ├── Providers/ # → Service providers │ ├── View/ # → View models │ ├── filters.php # → Theme filters │ ├── helpers.php # → Global helpers │ ├── medias.php # → Medias helper │ └── 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 │ ├── svg/ # → Theme svgs │ └── 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) └── vite.config.ts # → Vite configuration
Theme development
- Run
yarn
from the theme directory to install dependencies - Update
vite.config.ts
for bundler fine tuning
Build commands
yarn dev
— Start dev server and hot module replacementyarn build
— Compile assetsyarn lint
— Lint stylesheets & javascriptsyarn lint:css
— Lint stylesheetsyarn lint:js
— Lint javascripts
Hot Module Replacement
Project Side
Add the following variables in your project .env
# Endpoint where the bundler serve your assets
HMR_ENTRYPOINT=http://localhost:5173
Theme side
For advanced dev server configuration, copy .env.example
according
to Vite naming convention and loading order and update variables
FYI
Running HMR Mode remove the public/manifest.json
file, so do not forget to re-run the assets compilation
with yarn build
if needed.