kresnasatya/wp-vite-theme

Generic WordPress theme integrate with ViteJS

Maintainers

Details

github.com/kresnasatya/wp-vite-theme

Source

Issues

Installs: 31

Dependents: 0

Suggesters: 0

Security: 0

Stars: 3

Watchers: 1

Forks: 1

Open Issues: 0

Type:project

v1.3 2023-07-25 21:58 UTC

Requires

MIT 1cb96f47c3643d60a248aa9da2c258b05b1b0759

themewordpressvitejs

This package is auto-updated.

Last update: 2024-05-03 00:53:14 UTC

README

Proof of Concept (PoC) WordPress theme integrate with ViteJS. Motivated from wp-theme-vite-tailwind.

Requirements

  • PHP version >= 8.2
  • NodeJS version >= 18

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 <your-theme-name> && cd <your-theme-name>
  • 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.

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

  • 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