I hear you. Changing the CSS version every time you make changes (even small ones) to your CSS files is like saying “Let me just sprinkle some console.log() magic and pray” if you know what I mean. Well, today I am going to tackle this problem in a set-it-and-forget-it manner you will love.
What is the pain in updating the CSS version? The long way!
If you have noticed before, there is a good, but imperfect way of updating the CSS style you are linking in your <head>. The reason people use this method is that once they update the CSS file version inside their <head>, their users won’t have to clear cache, or hard refresh to see the new changes. Here is an example of how that works:
<link href="https://domain.com/styles/style.css?v=4.41417" rel="stylesheet"/>As you can see, in this method a ?v=4.41417 shows the number of version (it can be any number as long as everytime you make changes to the CSS file, you keep setting it to a higher value), and every time you make changes, even small ones, for the users to see the full new version of things, colors, etc.
✓ Solution, the easy way!
Let’s automate that and set that version number to change every time our CSS file gets changed. Most websites include a header.php file located within the theme folder, which itself resides inside the themes directory. We will assume this in our sample code here. We will also assume that the style.css file is in the same folder.
Step 1
Option 1: The PHP code (you have defined $theme_dir – look for it in your theme.php or functions.php file)
Inside the <head> of your header.php file, please create this helper PHP:
<?php
function cssWithVersion($localPath, $webPath) {
$version = file_exists($localPath) ? filemtime($localPath) : time();
return $webPath . '?v=' . $version;
}
// Build local and web paths for style.css
$styleLocalPath = $theme_dir . '/style.css';
$styleWebPath = 'https://domain.com/' . $theme_dir . '/style.css';
?>NOTE: Do not forget to replace domain.com with your actual domain!
Option 2: The PHP code (you don’t have $theme_dir)
Inside the <head> of your header.php file, please create this helper PHP:
<?php
function cssWithVersion($localPath, $webPath) {
$version = file_exists($localPath) ? filemtime($localPath) : time();
return $webPath . '?v=' . $version;
}
// Define the theme directory manually
$theme_dir = 'themes/chosen-theme';
// Build local and web paths for style.css
$styleLocalPath = __DIR__ . '/' . $theme_dir . '/style.css';
$styleWebPath = 'https://domain.com/' . $theme_dir . '/style.css';
?>NOTE: Do not forget to replace domain.com with your actual domain!
Step 2
Following the PHP helper, now you can link to your style file like this:
<link href="<?php echo cssWithVersion($styleLocalPath, $styleWebPath); ?>" rel="stylesheet" />What will it show to the visitor inside the page source:
<link href="https://domain.com/themes/chosen-theme/style.css?v=1755640448" rel="stylesheet" />As you can clearly see, our code shows a timestamp for the style.css file which is really the last time the style.css was edited last.
Conclusion
This is a very easy way to handle your CSS styles inside your website or blog. Do not manually change the CSS version every time you make even the smallest of changes to that file. Our method works, because the browser will use the same cached version of the CSS file until it’s edited, which is better for faster page loads. Should you come across problems, or have questions, please comment below. We also offer to have these changed for you. Please sign up on Bizeem Design & Traffic to place your order.
Leave a Reply