Setting Up a Modern WordPress Theme Development Workflow with Vite

When building a custom WordPress theme today, relying on plain CSS and JavaScript files quickly becomes limiting. Modern development workflows benefit greatly from build tools that handle asset bundling, compilation, and live reloading. One of the best tools currently available for this is Vite.

Vite provides a lightning-fast development environment with minimal configuration. Unlike older bundlers, it leverages native ES modules during development, making startup times nearly instant.

Setting up Vite for a WordPress theme starts with creating a simple project structure:

theme/
src/
js/
scss/
dist/
functions.php
vite.config.js
package.json

The src folder contains development assets, while dist holds compiled production files.

Next, install Vite and necessary dependencies:

npm install vite sass

Your Vite config file defines where the source files live and where the compiled assets should be output.

A typical configuration might specify:

  • SCSS compilation

  • JavaScript bundling

  • Output directory

  • Development server settings

Once configured, Vite can run in development mode using:

npm run dev

One of the biggest benefits is hot module replacement (HMR). When editing SCSS or JavaScript, changes instantly appear in the browser without refreshing the page.

This drastically improves development speed.

Integrating Vite with WordPress involves enqueueing the compiled files inside functions.php.

In development mode, scripts can load directly from the Vite dev server:

http://localhost:5173/src/js/main.js

In production, WordPress instead loads the compiled assets from the dist folder.

This setup allows developers to write modern code while still integrating seamlessly with WordPress’ PHP templates.

Another advantage is automatic optimization during production builds. When running:

npm run build

Vite will:

  • Minify JavaScript

  • Compile SCSS

  • Remove unused code

  • Optimize asset loading

The final output is significantly smaller and faster.

Compared to older bundlers like Webpack, Vite is simpler and faster to configure. Most WordPress themes only require basic JavaScript and SCSS compilation, which Vite handles with minimal setup.

This makes it ideal for custom theme development.

Adopting modern tooling like Vite transforms WordPress development from a slow, manual process into a streamlined workflow similar to modern front-end frameworks.