Tel: 01977 646072 | Mob: 07515 384393

Blog

Child Theme Browser Cache

One of the most common niggles I encounter when working on WordPress websites is the clients browser cache not allowing them to see the latest updates to style sheets.
“Can you just do a hard reload – Ctrl and f5 please…” – What a pain! Especially if your client is a real technophobe.
The issue arises because of browser caching. This is really useful once our website is live. It is however, really frustrating during production.
Here are a couple of solutions you can use to overcome this WordPress issue.

1. Add the current time as version number

This article assumes you are familiar with creating a child theme. As a reminder – when using a Child Theme you should enqueue your styles and scripts. For more information on using child themes correctly see the WordPress Theme Handbook.

In our child’s functions.php file we need to add a little extra code which will add a timestamp to our enqueued style sheet. Typically our style sheets will be added to the head of our site and appear like this:

<link rel='stylesheet' id='child-style-css' href='https://www.website.co.uk/wp-content/themes/theme-child/style.css?ver=1.0.1' type='text/css' media='all' />

What we are interested in is the version number. In the above example ‘ver=1.0.1’ is our version number. We can change this number. This in turn will force the browser to reload the style sheet rather than load the old version from cache. We do this by using the php function filetime(). The piece of code below will achieve this by adding the filetime as the version number.

<?php
add_action( 'wp_enqueue_scripts', 'tcg_enqueue_styles' );
function tcg_enqueue_styles() {

$parent_style = 'yourtheme-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), filemtime(get_template_directory() . '/style.css'), false );
}

When the style sheet is hooked into the head of our website it will now look something like this:

<link rel='stylesheet' id='child-style-css' href='https://www.website.co.uk/wp-content/themes/theme-child/style.css?ver=1520809146' type='text/css' media='all' />

Now, each time we update our CSS and save, the version number changes using the time the file was modified/saved. This is my preferred method of getting around the browser cache. It may seem a little long winded just to avoid having your client hard reload their browser however, the above code snippet takes only seconds to add.

IMPORTANT: Remember to remove the filetime addition when turning your website to production from development!

Host Canary

Since starting The Coding Guys in 2014 we have always supplied quality web hosting. Initially we included hosting with our new website builds. Packages were created to give clients affordable website hosting that was also fast, reliable and included all the features required to run a modern website.

As time progressed we started providing hosting to customers who were simply looking for quality, affordable hosting. 2018 sees us take a step forward with the hosting & also domain registration side of our business. This is where Host Canary comes into the equation. We have invested in more storage space on SSD LiteSpeed servers. We have also integrated a fully automated billing system that is capable of handling new sign ups for hosting & domains along with renewals.

Host Canary Website hosting

As The Coding Guys client base has grown our workload has of course increased. The idea behind Host Canary is to greatly reduce time spent managing customers accounts while also looking to create some additional income through new customers seeking a quality hosting solution.