Wordpress Starter Theme using Vite as bundler

Tasks

# Watch assets
npm run watch

# Build assets for production
npm run prod

More tasks

# Watch images
npm run watch:images

# Run vite serve
npm run watch:vite

# Optimize images
npm run prod:images

# Run vite build
npm run prod:vite

# Zip theme
npm run zip

Features

🔥 Hot Module Replacement
📦 Serve only the JS and CSS used per page
📂 Optimize images
🔩 Convert theme images to .webp
💄 PostCSS w/ nesting and imports
📑 Remove WP scripts and emoji tags
🥞 THEMEPATH and AJAX_URL variables
🍬 Classic Wordpress theme structure (no weird stuff)

Guide

How to add a new page script?

Create a .js file in src/js, then enqueue it conditionally in functions.php using the wv_load_script(JS_NAME) function

How does the image optimization works?

While in watching mode, every image you put into "src/img" folder gets an optimized version in "assets/img" also a WEBP version is created, you can add it in the theme by using the wv_img PHP function

How does url() works in css

CSS urls points to assets folder

Scaffolding

wordvite/
├── assets/              // public assets (like fonts) and output of processed assets
│   ├── img/             // output of optimized images
│   ├── js/              // output of builded vite files (js and css)
├── core/ 
│   ├── wordvite.php     // contains wordvite useful php functions
├── src/    
│   ├── css/             // style files
│   ├── img/             // theme images
│   ├── js/              // javascript files