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

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

Documentation

• Sage
• Vite
• Tailwind

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.

Author

Raj Patel [email protected]