PHPackages kresnasatya/wp-vite-theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. kresnasatya/wp-vite-theme ActiveProject kresnasatya/wp-vite-theme ========================= Generic WordPress theme integrate with ViteJS v1.3(2y ago)3471MITPHPPHP ^8.1 Since Jul 16Pushed 2y ago1 watchersCompare [ Source](https://github.com/kresnasatya/wp-vite-theme)[ Packagist](https://packagist.org/packages/kresnasatya/wp-vite-theme)[ RSS](/packages/kresnasatya-wp-vite-theme/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (1)Versions (6)Used By (0) WordPress Vite Theme ==================== [](#wordpress-vite-theme) Proof of Concept (PoC) WordPress theme integrate with ViteJS. Motivated from [wp-theme-vite-tailwind](https://github.com/blonestar/wp-theme-vite-tailwind). Requirements ------------ [](#requirements) - PHP version >= 8.2 - NodeJS version >= 18 Brief Setup for Development Mode -------------------------------- [](#brief-setup-for-development-mode) - You have WordPress project that run with `wp server` or any other development tools like Laragon or Valet. It will shows URL like `http://localhost:8080` if you use `wp server` or `your-wp-project.test` if you use Laragon or Valet. - Go to `wp-content/themes` directory. Then download `wp-vite-theme` project with command below. ``` composer create-project kresnasatya/wp-vite-theme && cd ``` - Run `composer install`. - Run `pnpm install` or `npm install`. - Run `pnpm run dev` or `npm run dev`. - Change `VITE_SERVER` value in`.env` file with the Vite URL. If you open the Vite URL it will contain empty file because it serves as a runner for your assets such as CSS and JavaScript. Try to edit `index.php` or any file with `.php` extension then save it! Vite will trigger full-reload event so browser reload the page automatically. Thanks to `handleHotUpdate` hook from Vite. > [Cheatsheet](https://github.com/vinkla/wordplate/blob/master/vite.config.js). ### How to handling static assets in CSS and JS in WordPress + Vite Environment? [](#how-to-handling-static-assets-in-css-and-js-in-wordpress--vite-environment) In production mode, static assets like images, fonts work well BUT not in development mode! In order to make it works, you need to set a symbolic link or symlink from source folder to destination folder. Here's the example. ``` # I store my images file in public directory on wp-vite-theme. # I make a WordPress project called wpground. # I make a WordPress theme called wp-vite-theme. # The ~ is a tilde symbol mean a "home" symbol in macOS. # Images ln -s ~/wpground/wp-content/wp-vite-theme/public/images ~/wpground/images # Fonts ln -s ~/wpground/wp-content/wp-vite-theme/public/fonts ~/wpground/fonts ``` Brief Setup for Production Mode ------------------------------- [](#brief-setup-for-production-mode) - Stop `wp server` and `pnpm run dev` or `npm run dev`. - Change the value of `VITE_ENV` in `.env` file from `development` to `production`. - Run command `pnpm run build` or `npm run build`. - Run `wp server` again. Credits ------- [](#credits) - Photo by [Tom Delanoue](https://unsplash.com/@tom2185?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/Cf4-4BZdim8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) - Photo by [mono-log](https://unsplash.com/@mono_log?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/a-group-of-trees-reflected-in-a-body-of-water--HvOSe0s7Y8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) ### Health Score 27 — LowBetter than 49% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity13 Limited adoption so far Community8 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Total 5 Last Release 1019d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3293cfe74f788bfa4b383aed7015f8f875ed4232584a616725e4a10479bf9c42?d=identicon)[kresnasatya](/maintainers/kresnasatya) --- Top Contributors [![kresnasatya](https://avatars.githubusercontent.com/u/11099186?v=4)](https://github.com/kresnasatya "kresnasatya (19 commits)") --- Tags vitejswordpress-themewordpressvitejstheme ### Embed Badge ![Health badge](/badges/kresnasatya-wp-vite-theme/health.svg) ``` [![Health](https://phpackages.com/badges/kresnasatya-wp-vite-theme/health.svg)](https://phpackages.com/packages/kresnasatya-wp-vite-theme) ``` ### Alternatives [roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[tgmpa/tgm-plugin-activation TGM Plugin Activation is a PHP library that allows you to easily require or recommend plugins for your WordPress themes (and plugins). 1.8k222.5k13](/packages/tgmpa-tgm-plugin-activation)[afragen/git-updater A plugin to automatically update GitHub, Bitbucket, GitLab, or Gitea hosted plugins, themes, and language packs. 3.3k1.6k](/packages/afragen-git-updater)[themosis/theme The Themosis framework boilerplate theme. 10449.0k3](/packages/themosis-theme)[idleberg/wordpress-vite-assets Injects assets from a Vite manifest to the Wordpress head, supports themes and plugins 14816.4k1](/packages/idleberg-wordpress-vite-assets)[devgeniem/dustpress WordPress Theme Framework. 5496.8k23](/packages/devgeniem-dustpress) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)