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.

Cache Bust Glass

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).

// 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 .= '.' . 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.

Cache Bust in Genesis

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.



  1. Mike Hemberger says:

    The is great Matt! I typically bump the theme version a bit for each change (1.0.0 goes to 1.0.1 or something), but there are definitely times where this could come in handy. Thanks for the idea!

    1. Matt Whiteley says:

      Thanks Mike! This is definitely a time saver. I used to increment version numbers as well, but for really small things (change padding by 2px or font size by 0.2rem) I didn’t find them worthy of a version change…but still needed the cache to clear properly. Hope it helps save some time!

  2. Mike Hemberger says:

    Circling back. This has been great, I think I’m adding this to Mai Theme Engine plugin. I looked a Genesis core and tweaked a little bit. Similar, but ended up with this: $handle = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ): 'child-theme'; $version = date ( 'njYHi', filemtime( get_stylesheet_directory() . '/style.css' ) ); wp_enqueue_style( $handle, get_stylesheet_uri(), false, $version );

    1. Matt Whiteley says:

      Great! I like this version…a little cleaner and less code. Thanks for circling back – I’ll likely update my core functionality plugin to use this version! Thanks Mike!

      1. Mike Hemberger says:

        Okay, I decided that I actually like the version number in the stylesheet too, especially for checking out customer sites and knowing what version they are on. One more tweak:
        $handle = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ): 'child-theme';
        $version .= '.' . date ( 'njYHi', filemtime( get_stylesheet_directory() . '/style.css' ) );
        wp_enqueue_style( $handle, get_stylesheet_uri(), false, $version );

      2. Mike Hemberger says:

        Also, code is not formatting here, maybe you can fix my comments πŸ˜‰

        1. Matt Whiteley says:

          Sorry about that! All fixed up. I like adding in the version number as well. I’ve modified mine to include that and updated the post.

  3. Richard says:

    Hi Matt

    Just letting you know that removing && $order->needs_shipping_address() still worked for me on WC 3.6.5 using Storefront 2.5.0

    I see you created a function which I shall try if your first option doesn’t work some day!

    Great job, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *