Introduction to WP Rig (Part 1)

WP Rig is a theme development rig. We can define rig as something like a setup or a gear used for a particular purpose.

WP Rig is an open-source project originally created by Morten Rand-Hendriksen with the support of LinkedIn Learning.

We write PHP codes, CSS rules, JavaScript. We Rig optimizes our codes, minifies them. 

It helps us to create lightning-fast WordPress themes with a user experience that meet the latest web standards

It does a lot more than I can explain. More information can be found on it’s Github repository. github.com/wprig/wprig

WP Rig requires PHP 7.0, npm and composer to be installed globally.

Apart from these, we require a text editor or an IDE. I prefer VSCode. It has a lot of features that help to speed up the development and It’s free to download

If you are setting this up in your laptop or PC, you’ll need a local webserver like XAMPP, WAMP or any other available local server setups. I’ll be using local by flywheel. It simplifies development a lot. You can download it at localbyflywheel.com

Next, we’ll look at how to clone wp rig to our WordPress theme and get it up and running smoothly.

Cloning WP Rig from Github

Assuming you have all the required dependencies installed like npm, composer, etc. Let’s continue in our local folder where we have installed and set up our WordPress site. Inside our themes folder, let’s start git bash or command prompt. If you’re in a Linux system or mac, open terminal to the themes folder.

You can check npm version by typing npm -v and composer by typing composer -V. The “V” in composer is capitalized. 

If these are properly installed, you will get the version number else you get error messages.

If you are using VSCode, you can open the built-in terminal as well.

Use the command git clone https://github.com/wprig/wprig.git to clone WP Rig to the themes folder.

Terminal - Cloning WP Rig

Once the process is completed, you’ll have a new folder called wprig in your theme’s directory.

You can rename the folder if you want, however, it’s recommended not to name it as the same as your final production theme.

Configure the settings

Inside the wprig theme, we have a folder called config. Inside the config folder, we have 3 files. config.default.json, config.json and themeConfig.js

Config.default.json contains the default configurations for WP Rig. We can overwrite this to our need from config.json. You do not have to include all settings from config.default.json. Just the settings you want to override. 

Optionally, we can add config.local.json file as well if our local and production configuration needs to be different. 

I have added the following code in my config.json file.

The proxyURL in the above code “rig.local” comes from local by flywheel. In case, you have XAMPP, WAMP or MAMP, you might local localhost:{PORT_NUMBER}/site or similar URL to access the site.

Once your configuration is set. In the terminal or command prompt, you can run the npm command npm run rig-init

I’ll take some time to run. During that time, you’ll have something like this in the terminal.

Initializaing WP Rig - npm run rig-init

You can simply ignore the warnings.

In case the install fails and you get errors in red colour. You may want to check if your composer or npm in installed properly again.

Published by karunshakya

Been programming in PHP / WordPress for over 4 years. I specialize in theme with Multilingual feature and plugin development and manipulation.