Override CSS cache – Force CSS changes to go live immediately

You can prevent web browsers from caching your CSS files by adding a parameter to the end of the stylesheet URI, e.g. ../themename/style.css?v=123. The following is how to do this in Genesis.

/** CSS Cache Buster */
define( 'CHILD_THEME_VERSION', filemtime( get_stylesheet_directory() . '/style.css' ) );

When Genesis enqueues the child theme’s stylesheet, it checks to see if ‘CHILD_THEME_VERSION’ is defined. If it is, that is used as the version. If it isn’t, the parent theme’s version number is used. The code sets the child theme version to the last modified date of style.css. So when you modify it, the URL to your stylesheet changes and the cache is busted.

Credit: Bill Erickson

———

Update 2014.06.17: The method above declares CHILD_THEME_VERSION a 2nd time which throws a PHP notice in WordPress. If you don’t like that, you can use the following methods instead.

Add filetime parameter to the style.css link

add_filter( 'stylesheet_uri', 'child_stylesheet_uri' );
/**
 * Cache bust the style.css reference.
 *
 */
function child_stylesheet_uri( $stylesheet_uri ) {
    return add_query_arg( 'v', filemtime( get_stylesheet_directory() . '/style.css' ), $stylesheet_uri );
}

Credit: Greg Rickaby

And finally, here’s a method from WP Engineer you can adapt for use in Genesis too: Force Reload of Scripts and Stylesheets in your Plugin or Theme