Issues with Cached CSS and JS files on WordPress?

Development
Ken Foubert
04/04/18

Missing updates to your stylesheet or JavaScript file on WordPress? Try this trick!

Did you make an update to your stylesheet or JavaScript file and it worked great on your WordPress development environment, but after deploying, your updates are missing? This common trick may help, which involves adding a version tag to your file, forcing both server and client-side caching to get the latest version of your file.

If you’re using the WordPress functions wp_enqueue_script and wp_enqueue_style (hint: you should be), you can take advantage of the 4th parameter to add a version number. I would suggest, if you’re adding the files to the theme, to use the file last modified date to set the version number, so that you don’t have to ever change the version number manually. If you’re managing a plugin, use the defined version number of your plugin with the enqueue functions.

Example

I have a header.php file that uses wp_enqueue_script and wp_enqueue_style for the custom theme and javascript. I updated the 4th parameter to use the last modified of the files to set the version number. Scroll horizontally to view the full code below:

{code:header.php}
/**
 * Load and set version for script and style files
 */
function my_enqueue_files() 
{
    // add site css. Parameter 4 uses file modified date to set version
    wp_enqueue_style( 'site-css', get_stylesheet_directory_uri() . '/ css/site.css', array() , filemtime(get_stylesheet_directory() . '/ css/site.css'));
    
    // add site javascript. Parameter 4 uses file modified date to set version
    // NOTE: parameter 3, array(‘jquery’), means the script depends on the jquery file library
    wp_enqueue_script('site-js', get_template_directory_uri() .'/js/site.js', array('jquery'), filemtime(get_template_directory().'/js/site.js'), true);
}
add_action( 'wp_enqueue_scripts', 'ifm_theme_scripts' )
{code}

You can view another example in this comment on the WordPress wp_enqueue_script page.

Final Results

Now, whenever you make changes to your stylesheet or javascript file, you don’t have to worry about the server or browser using an outdated version.

Using Grunt or Similar Task Automation Tool

If you’re utilizing Grunt or a similar task automation tool to process and minify your JS/CSS, there’s room to optimize this a bit. The following Grunt task can be used to write a new version number to a single file every time your JS/CSS is updated:

{code}
/*
* Generate a new asset.version file for cache busting,
* based off of Date.now()
*/
grunt.registerTask(
 'assets_version',
 'Generate a new assets.version file for cache busting',
 function() {
   var date = Date.now();
   grunt.file.write( 'assets.version', date );
 }
);
{code}

Using this technique, you can determine the version number to use when enqueuing your assets once and use that same value for all of the files you’re enqueuing instead of having to touch each file individually.