Automatically Cache Bust When Updating CSS in Genesis Child Theme

I can’t count the number of times I’ve had to tell people to empty their cache to see changes that were made on their site. This is a huge nuisance — not only for site owners, but more importantly, site visitors! It is vital to know your visitors are viewing the most current version of your site at all times. So what do you do if you need to make CSS changes to your site and want to ensure they are immediately visible to all users? Cache bust!

In this post I’ll show you a simple function you can add to your functions.php file that will automatically add a datestamp as your stylesheet version number to ensure each time you update your stylesheet your changes are immediately visible — ie, your cache bust!

Note: This technique is specific to Genesis Child Themes but could easily be modified to use with any WordPress theme.

The Cache Bust Function

Below is a simple function you can insert in to your Child Theme’s functions.php file (remove opening php tag).

<?php
// Remove default Genesis Child Theme Stylesheet
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
// Create function to append last modified file to stylesheet URL
add_action( 'wp_enqueue_scripts', 'wd_genesis_child_stylesheet' );
function wd_genesis_child_stylesheet() {
     $theme_name = defined('CHILD_THEME_NAME') && CHILD_THEME_NAME ? sanitize_title_with_dashes(CHILD_THEME_NAME) : 'child-theme';
     $version = defined( 'CHILD_THEME_VERSION' ) && CHILD_THEME_VERSION ? CHILD_THEME_VERSION : PARENT_THEME_VERSION;
     $version .= '.' . date ( "njYHi", filemtime( get_stylesheet_directory() . '/style.css' ) );
     wp_enqueue_style( $theme_name, get_stylesheet_uri(), array(), $version );
}

This function does a few things:

1. Removes the default action that loads the stylesheet
2. Creates a new function called wd_genesis_child_stylesheet
3. Creates a variable within the new function for the last modified date of the child theme stylesheet
4. Enqueues the child theme stylesheet with the modified date as the version number

Update 11/26/18:

Thanks to Mike Hemberger for some suggestions. I’ve added the child theme version number as well.

With this function in place you no longer have to worry about emptying your cache, telling clients to empty their cache, or worry about your site’s visitors seeing the most recent version of your site.

Can’t I just Increment My Genesis Child Theme Version to Bust the Cache?

Sure, you can always increment the version number in your child theme’s functions.php file, but there are a few caveats to doing it this way.

1. It takes time! Why waste time opening the functions.php file every time you make stylesheet changes to increment the version number when you can automate the process?
2. You’d need to keep your stylesheet version and your child theme version in sync which is a hassle.
3. If the child theme ever does have an update (unlikely for child themes, but it happens) it could cause issues as the updated theme would have it’s own version numbers
4. In my opinion, version updates should be for things more significant than minor CSS changes. So, save the version number changes for larger modifications

The Developer’s Responsibility to Cache Bust in Genesis

After years of cache questions I’ve come to the conclusion that it is the responsibility of the developer to ensure there is a smooth transition when changes are made. I’ve told my share of clients to “empty the cache” — to the point where I have seeked out and created a solution that works for all parties.

Automated for the developer.

Seamless for the client and end user.

Not only will this save you the trouble of repeating the “empty your cache” statement, but it is a great experience for the client and end user. They may not realize it, since it just works, but it is saving them aggravation and time as well.

Enjoy!