WordPress – add versioning to CSS stylesheet to force reloading

Browsers cache stylesheets, which is good. It keeps sites running faster. This is bad though if we make stylistic changes to the stylesheet when WordPress’s version isn’t upgraded (WordPress adds a version number to the stylesheet which coincides with the WordPress version number). A user’s browser which has already visited the website will not know that the stylesheet has been updated and will not download the latest one. We need to add a version number to the stylesheet call. WP Shout has a great article about this: https://wpshout.com/quick-guides/prevent-browser-caching-css-stylesheet-wordpress/.

To force a browser to load an updated stylesheet, we implement the following code in the functions.php file.

//Update the Stylesheet version
wp_enqueue_style( 'theme-name', get_stylesheet_uri(), '', '2.0.1' );

The ‘theme-name’ is found by inspecting the code and determining the id. Such as:

<link rel=”stylesheet” id=”theme-name-css” href=”http://www.website.com/wp-content/themes/child_theme_name/style.css” type=”text/css” media=”all”>

The theme’s id is shown as id=”theme-name-css”. Our wp_enqueue_style code needs to point to the correct theme-name id (“theme-name-css” in this example) but without the “-css” on the end. Then we can include any arbitrary number, or version number in the last argument. In this example we use “2.0.1” (as a best-practice, we will increment our version number in the description of our child theme’s style.css file and include that same version number in this wp-enqueue_style function call). After the above code is implemented in the functions.php, the stylesheet call will look like this:

<link rel=”stylesheet” id=”theme-name-css” href=”http://www.website.com/wp-content/themes/theme_name/style.css?ver=2.0.1″ type=”text/css” media=”all”>

Note: This might not be an issue if your site uses a caching plugin that minifies css and js files; these caching plugins should include a versioning number for the minified files that should be cleared and updated when style changes are made – thus not giving us this versioning or cached issue.