How to Build a Modern WordPress Theme Using Vite
Learn how to integrate Vite into WordPress themes for Sass, JS modules, hashed production assets, and manifest-based asset loading with graceful fallbacks.
This tutorial demonstrates a practical way to modernize the frontend build process of a classic WordPress theme using Vite, without sacrificing WordPress strengths like hooks and the template hierarchy. The theme gains Sass support, JavaScript modules, fast local development, and hashed production assets, with source code written in src/ and compiled into a hashed dist/ folder.
At the core of the setup is Vite's generated manifest.json, which functions.php and inc/enqueue.php read to correctly enqueue CSS and JS files via wp_enqueue_style and wp_enqueue_script, adding type="module" to the script tag. If the dist/ folder is missing, the theme gracefully falls back to style.css instead of breaking the site.
Optionally, a PHP function can detect whether the Vite dev server is running and serve source files directly from 127.0.0.1:5173 during local development. The guide also covers extracting critical CSS during the build and inlining it via wp_head for performance-focused themes. Overall, it offers a production-ready template for developers who want to bring modern JS tooling into WordPress theme development.