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.

Defer Parsing of Javascript

The article is taken from GTmetrix:

In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

The following piece of code check if the view is not from the admin area (wp-admin) and then defers the javascript except for the jquery.js file

Details from Google

There are several techniques that can be used to defer parsing of JavaScript. The simplest and preferred technique is to simply Defer loading of JavaScript until it is needed. A second technique is to use the <script async> attribute where appropriate, which prevents parsing from blocking the initial page load by deferring it until the browser’s UI thread is not busy doing something else. If neither of these techniques is suitable, there are some additional techniques commonly used in mobile applications, as described below:

When building mobile applications, it can be necessary to load all of the JavaScript needed by an application up front, so the application can continue to work when the user is offline. In this case, some applications, such as mobile Gmail, find it useful to load JavaScript in comments and later eval() the JavaScript when it is needed. This approach guarantees that all JavaScript is loaded during the initial page load, while not requiring that JavaScript is parsed.

An alternative to storing code in comments is storing code in JavaScript string literals. When using this technique, the JavaScript is only parsed when needed, again by calling eval() on the string literal. This technique also allows an application to load JavaScript early, but defer parsing until it is needed.

Note that moving your <script> tags to the end of the page is sub-optimal since the browser will continue to show a busy indicator until the page has finished parsing this JavaScript. Users may wait until the page load indicator shows that the page load is complete before interacting with the page, so it is important to load JavaScript in a way that minimizes the time it takes for the browser to indicate that the page load is complete.

In our own tests conducted in early 2011, we found that on modern mobile devices, each additional kilobyte of JavaScript adds about 1ms of parse time to the overall page load time. So 100kB of JavaScript included in the initial page load would add 100ms of load time for your users. Because JavaScript must be parsed on every visit to a page, this added load time will be part of every page load, whether loaded from the network, via the browser cache, or in HTML5 offline mode.

Open External Link in New Tab

You can open external link in new tab with few lines of jQuery. Make sure the jQuery library is loaded. The following script tests if the site and href domain is same. If not, link is open in new tab.

Note: It is better to load scripts in footer.

Replacing WP Cron with Cpanel Cron Job

  1. Disable WP Cron.
    1. In your wp-config.php file add the following code
  2. Log in to your site’s cpanel.
    1. Most of the times http://yousite.com/cpanel might work
    2. Once you are logged into cpanel, look for “Cron Jobs” and click it
    3. Once inside the Cron Jobs page, use the following command with your desired time settings

       

Update / Change recipient E-mail address in Contact form 7

Disabling Comments

When we don’t want any comments in our site we can use the “comments_open” filter to disable the comments for every post and pages.

Simple Example of implementing Walker_Nav_Menu Class

In reference to the WordPress Codex, the Walker class was implemented in WordPress 2.1 to provide developers with a means to traverse tree-like data structures for the purpose of rendering HTML.

The detail information about the walker class can be found in the WordPress Codex.

Here is a simple example.

In the above block of code, the wp_nav_menu() function takes $defaults as argument. In the array $defaults, the last key is walker. Te walker key’s value is object of a class Primary_Walker_Nav_Menu. In functions.php file implement the following code.

The start_el() method is used to add the opening HTML tag for a single tree item (such as , , or ) to $output.

 

The start_lvl() method is run when the walker reaches the start of a new “branch” in the tree structure. Generally, this method is used to add the opening tag of a container HTML element (such as , , or ) to $output.

The output of the above implementation will result in the following html block of code.

Hook into Contact Form 7

Contact form 7 is a really amazing WordPress plugin developed by Takayuki Miyoshi available for download from http://wordpress.org/plugins/contact-form-7/ Some key features of contact form 7 are:

  • Ajax Form Submission
  • Multiple form
  • Captcha
  • Spam Filter
  • Multilingual and many more.

[gad]

I am assuming here that you are familiar with Contact Form 7 or have used this plugin at least once or twice.

It’s quite easy to do.  Just create a new folder in your plugins directory ‘wp-content/plugins/‘. You can name it anything you want. Suppose prom_cf7_man. Inside create a new file and name it prom_cf7_man.php . Paste the following line of code in the top of the page.

Now, inside the function “prom_wpcf7_custom”

The above code will save the form value for fname and lname to $first_name and $last_name respectively.

The following code will stop the form from sending email.

You can redirect the page after mail sent using the following code

You can also used an available hook to change properties

The above function check if the current user is an existing author or not. If the user is an author then he/she is redirected to add new post page else is redirected to a thank you page