Sage-vite NPM | npm.io

Custom Sage Theme with Vite

Instruction

1) Go to your theme folder inside wordpress 2) Wp-Content/themes 3) npm i sage-vite 4) change directory cd sage-vite 5) composer install 6) yarn (Lock the file) 7) yarn build 8) yarn dev (for development server)

Overview

This is a customized WordPress theme based on the Sage starter theme, integrated with Vite for modern build tools and faster production builds.

Sage + Vite Theme

screenshot

Advanced WordPress starter theme with Tailwind CSS, Laravel Blade and Vite

Documentation

Key Points:

Clarify WSL Requirement: Document that WSL is necessary for Windows users to ensure proper functionality.
Explain Vite Integration: Provide instructions on how Vite is used and how it benefits the build process.
Include Troubleshooting Tips: Offer solutions for common issues that users might face during setup.

This approach will help users understand the specific requirements and configuration needed for your custom theme and ensure a smoother setup experience.

Requirements

Acorn v4
PHP >= 8.1
Node >= 16.0.0
Yarn
WSL is not required

Installation

Rename .env.example to .env and set the url for your site in APP_URL, also you can configurate the Hot Module Replacement in HMR_HOST and HMR_PORT

Make sure you have all the requirements, then clone the repository and inside of the folder run the follows commands.

=> After Installing

=> change your directory cd sage-vite First run:

  composer install

  yarn

Then:

Once you have all the dependencies you have to build the assets:

  yarn build

And Finally just run:

  yarn dev

Recomended libraries

ACF Composer for the advanced custom fields, (AFC Pro required)
Navi Easy way to handle the WordPress menus, I also hate the WordPress NavWalker xD
Poet provides simple configuration-based post type, taxonomy, editor color palette, block category, block pattern and block registration/modification.