When working with clients you need to make sure any CSS changes are loading and website is updated. Every time a browser loads a webpage it has to download a number of files, including CSS and JavaScript. A common solution is to use CSS versioning. Adding a version number to the CSS file will let the server know this is a new file. You can automatically version your CSS files by adding a last modified timestamp to the end of the file name like /css/style.css?ver=1469128847
A solution in WordPress:
Version number is a parameter of wp_enqueue_style().
Codex:
|
1 |
wp_enqueue_style( string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, string $media = 'all' ) |
We’ll use the filemtime() function to return the last time the file content was modified.
Code:
|
1 2 3 4 5 6 7 8 9 |
/** * Enqueue scripts and styles. * */ function theme_styles() { wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/css/style.css', array(), filemtime( get_template_directory() . '/css/style.css' ) ); } add_action( 'wp_enqueue_scripts', 'theme_styles' ); |
Result:
|
1 |
<link rel='stylesheet' id='theme-style-css' href='http://localhost/wordpress/wp-content/themes/twentyfifteen/css/style.css?ver=1469128847' type='text/css' media='all' /> |
Here is a plugin https://wordpress.org/plugins/wp-css-version-history/ that will automatically append a version number in the stylesheet. It creates a new stylesheet which is loaded last. No need to clear cache to see changes. Uses WordPress built in CSS editor and user file lock for team collaboration.
Hi Brian,
Nice. I’ll edit the post and include it.