Once annoyance when working within website design is changing the CSS to amend the design, but when showing it to your client they cannot see the changes. This is due to their browser (and any potential return visitor) not downloading the new CSS file as the cached version they have stored locally in their temp internet cache appears to be the same.
An old solution
An old solution to this was to rename your CSS file, so the new style sheet would be called style2.css, and you would point to this new file in the html/php etc. This would force the returning user to get the new file, however, if you are making alot of changes, and on the fly as client amends start to pick up pace (here!), changing the physical file name can become tedious, and not very nice.
A not-so-old solution
A solution to this is to have a variable after the CSS file name, such as style.css?version=123. Any changes to the style sheet can be reflected with a version change (or whatever change you like, as long as it is after the “?“). This can however become tedious still, as you still have to edit your header file or html pages to change the linkage to the file.
Force CSS update using PHP and WordPress
Image may be NSFW.
Clik here to view.
We can automate this CSS update variable system when using PHP, so when you change/update the CSS file the linkage automatically updates to show this. Here are Web Design 101 we tend to develop for our clients in WordPress for any CMS websites, and so any changes to the CSS is done so in the style.css file in the root of the theme folder, and the linkage is in the header.php file.
To do this, the one thing that changes when you update the CSS file is the physical creation date of the file. We can use PHP to tap into this date change and use this number as a unique variable string. When you update and save your file again, the new creation date will be different, so any client browser visiting the site will ALWAYS be forces to get the new version – with no intervention from your behalf.
To do this, open up header.php from your theme folder root. Here you should have a little bit of code which adds the theme CSS file into the html head of the page, something like this;
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
This is the basic line which gets the style sheet URL using WP function bloginfo(), very simple, very standard. We will add the following code to this line to get the file modification time, using php function filemtime().
filemtime( get_stylesheet_directory() . '/style.css')
This gets the unix timestamp of the file’s modification date. This is done within the server file structure, not using any http wrappers or paths (so your path has to be the physical path, not http://yourdomain.com/style.css etc). Your resulting line of code should look like below:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' );echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" />
This will change the resulting CSS file string output from this:
<link rel="stylesheet" type="text/css" media="all" href="http://yourdomain.com/wp-content/themes/mytheme/style.css" />
To this:
<link rel="stylesheet" type="text/css" media="all" href="http://yourdomain.com/wp-content/themes/mytheme/style.css?1330968504" />
Where the string after the “?” is the unix time the CSS file was modified. This solution allows you to change your CSS file without worry and will always force returning users to download the style sheet only if the modification time is different to that which they already have in their cache.
Simples!