WordPress Theme Development with Vite
Using Vite for WordPress theme development brings modern development tools and improved performance to your workflow. Vite’s fast development server and optimized build process allow for efficient handling of JavaScript and CSS, including support for hot module replacement (HMR) and optimized asset bundling. This setup ensures a smooth development experience and faster load times for your theme in production.
If you have already cloned the repository, don’t forget to run git git pull origin "Branch_Name".You can skip step 1.
Step 1: Given that you have not cloned the existing repository yet.
git clone [email protected]:agentimage-clients/sc-semicustom-demo.com.gitStep 2: Create a Branch
IMPORTANT: Follow Naming Guidelines.
git checkout -b 'Branch_Name'(Optional). How to Upgrade Nodejs to version 22.
Add to Laragon Quick Add
*node-22=https://nodejs.org/dist/v22.11.0/node-v22.11.0-x64.msiFor people who are not using Laraging Terminal just download and install https://nodejs.org/en/download
Select Nodejs version on laragon and restart laragon
Step 3: Start Building Theme With Vite.
Watch video below
Open vite.config.js, find the following line:
const themeName = process.env.THEME_NAME;
and replace it with:
const themeName = 'theme-folder-name';
Certain version of vite requires src folder and scss, js folder to be present in the root directory of your theme. If you are not using latest version of vite, you need to create a src folder and inside it create a scss and js folder to avoid pipeline errors. on latest version of vite it will work if you do not have src folder and scss js folder inside the src folder. Please see Vite Changelog for more informations.
**Run npm Command**
With vite it leverage the uses of node packages.
If first Time to use node on site npm install is required for necessary packages for node.
```sh filename="terminal" copy
npm install
Watch file changes and output unminified version of your assets if you are developing a theme this is useful so you will not need to run build everytime you make file changes
npm run dev
Minified and build all assets needed. this is being use once you are done on everything
npm run buildTo enqueue
In this example you created new file called newFile.css and newFile.js scss will automatically build an css file for you to enqueue under assets/css for css and assets/js for js. Below is the sample code.
wp_enqueue_style( 'new theme file', get_template_directory_uri().'/assets/css/newFile.css' );
wp_enqueue_script('aios-starter-theme-script', get_template_directory_uri() . '/assets/js/scripts.js');
Step 5: Once you are done editing the files, add or stage your changes.
git add .Step 6: Commit the changes you’ve made.
git commit -m '<commit_message>'Step 7: Push your changes.
git push origin 'Branch_Name'Step 8: Create Merge Request.
https://gitlab.forge99.com/your_project_group/your_project_url