ravorona/sage

Wordpress theme based on Sage starter theme using Vite

Maintainers

Details

github.com/ravorona/sage

Source

Issues

Installs: 304

Dependents: 0

Suggesters: 0

Security: 0

Stars: 45

Watchers: 4

Forks: 2

Open Issues: 2

Language:SCSS

4.3.1 2024-04-07 18:34 UTC

Requires

  • php: ^8.1

Requires (Dev)

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).

MIT c84003a6e586131e27d88fba935f370ebea19681

  • яαvoroΞ·Ξ± <h.rakotonjanahary.woop@gmail.com>

wordpress

This package is auto-updated.

Last update: 2025-03-14 00:11:26 UTC

README

Development Release

🧩 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 replacement
  • yarn build β€” Compile assets
  • yarn lint β€” Lint stylesheets & javascripts
  • yarn lint:css β€” Lint stylesheets
  • yarn 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.

Documentation