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.
$ver parameter built in to the
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.