- Make sure that you have Acorn installed
- Install Sage using Composer from your WordPress themes directory (replace
your-theme-namebelow with the name of your theme):
# @ app/themes/ or wp-content/themes/
$ composer create-project ravorona/sage your-theme-nameTo 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-developthemes/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- Run
yarnfrom the theme directory to install dependencies - Update
vite.config.tsfor bundler fine tuning
yarn dev— Start dev server and hot module replacementyarn build— Compile assetsyarn lint— Lint stylesheets & javascriptsyarn lint:css— Lint stylesheetsyarn lint:js— Lint javascripts
Add the following variables in your project .env
# Endpoint where the bundler serve your assets
HMR_ENTRYPOINT=http://localhost:5173For advanced dev server configuration, copy .env.example according
to Vite naming convention and loading order and update variables
Running HMR Mode remove the public/manifest.json file, so do not forget to re-run the assets compilation
with yarn build if needed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent