Alister Cameron // Blogologist

Is this a frustration you’re familiar with? If you’re like me you mess around with your Wordpress CSS stylesheet fairly frequently. It may be just a line here or a few additional characters there, but you’re making changes.

However, there’s a problem… every time you make a change to your stylesheet you have to tell the world it has changed. If you don’t, most visitors (not just returning ones) will continue to use the older version of your stylesheet… because it is cached. That caching may occur at the ISP, at their browser, or both. And without that new version of your CSS stylesheet, they risk seeing some busted-up stuff on your site. And that’s just yuk.

Now, the point of caching is to save a visitor to your site from needlessly downloading files over and over again which have not changed since the last time. So caching is a good thing… it’s smart, it saves bandwidth and it makes pages load faster. So, yay for caching!

However, we’re left with our problem. How do we force the stylesheet to update — to bust out of the cache — as often as you update it? I want to suggest a really easy way to do it!

The simple trick is to change the link to the stylesheet each time it is updated. And fortunately, that’s fairly easy. Now, while you can’t change the location of the file (it have to stay where it is!), you can add something in the querystring (the bit after the question mark). See, anything after the question mark actually gets treated as a different file (or at least a file that is expected to be different).

So what do we put after the question mark? There are two common approaches: either a random number, or today’s datestamp. My site at present uses the latter approach, but it’s too much… I don’t change my CSS stylesheet on a daily basis! And the random number is worse still… it normally means there is no caching on the CSS file at all.

To my mind the ideal solution is to append the last-modified-date to the querystring. This is great because it allows the CSS stylesheet to cache for as long as you don’t update it again. No more and no less.

Here’s the code.

Although there are differences from theme to theme in Wordpress, this is how many of them call the stylesheet in header.php:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>" />

This line is changed just slightly to include a different function call:

<link rel="stylesheet" type="text/css" href="<?php echo css_cache_buster() ?>" />

And here’s that new function I wrote:

function css_cache_buster() {

    $pieces = explode(”wp-content”, get_bloginfo(’stylesheet_url’));

    return get_bloginfo(’stylesheet_url’) . “?” . filemtime(ABSPATH . “/wp-content” . $pieces[1]);

}

I’d suggest adding that function to your theme’s functions.php file.

Here’s an example of what will be output to your page:

<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/wp-content/themes/your-theme/style.css?1217941722" />

That thing after the question mark doesn’t look like a date? You’re right! But it is… it’s just formatted as an integer, which is a kind of “raw” format that computers understand.

So there you have it. You’ve now got a stylesheet that will stay cached if you don’t updated it, but will bust out of the cache as soon as you do. Ideal!

Update

Folks, I’ve taken note of Matt’s comment (below) and then some… this code has been improved and turned into a plugin. Check it out here.