Force CSS & JS Changes to “go live” Immediately

April 08, 2015

To quote Mark Jaquith’s helpful post on this topic:

If you update your WordPress theme’s style.css, you may have noticed that you have to “force-reload” your site in your browser to see the changes. This is because your browser keeps a copy of the CSS cached on your hard drive. Depending on how your server is set up, it may not check for a new version of the stylesheet for a couple hours, or longer! And even if you force-reload to see the changes, visitors who have previously accessed your site may still get the old CSS.

That post is from 2009 and WordPress functions for loading assets have changed a bit since then, so I’ll provide an updated solution.

One way to solve this problem is to “version” your CSS file, by enqueueing your stylesheet and appending a timestamp to the end of it that represents when the file was last updated. And the same can be done for JavaScript files, as well. WordPress has a $ver parameter built in to the wp_enqueue_style() and wp_enqueue_script() functions for just such a purpose. Versioning your CSS & JS files looks like this:

// Version CSS file in a theme
get_stylesheet_directory_uri() . '/style.css',
filemtime( get_stylesheet_directory() . '/style.css' )
// Version JS file in a theme
get_stylesheet_directory_uri() . '/js/scripts.js',
filemtime( get_stylesheet_directory() . '/js/scripts.js' )
// Version CSS file in a plugin
plugin_dir_url( __FILE__ ) . 'assets/css/plugin-styles.css',
filemtime( plugin_dir_path( __FILE__ ) . 'assets/css/plugin-styles.css' )
// Version JS file in a plugin
plugin_dir_url( __FILE__ ) . 'assets/js/plugin-scripts.js',
filemtime( plugin_dir_path( __FILE__ ) . 'assets/js/plugin-scripts.js' )

This tells WordPress to enqueue the stylesheet/js file just as it normally would, but to append ?ver= to the end of it, followed by a Unix timestamp representing when the file was last modified (see the image below). This ensures that the version of the file enqueued is the most recent, so everyone instantly sees your changes.

Versioning Assets


Kellen Mace

Written by Kellen Mace, who lives in Rochester Hills, MI and builds cool stuff on the web. About Kellen // Follow him on Twitter →