Alister Cameron // Blogologist

Changing the world. One blog(ger) at a time.

Smart cache-busting for your WordPress stylesheet

wordpress logo Smart cache busting for your Wordpress stylesheetIs 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.

 Smart cache busting for your Wordpress stylesheet

24 Comments

Note: Commenter website links are not no-followed, in case
you were wondering... I believe in rewarding commenters!

  1. Posted 5 years, 10 months ago // Permalink

    It’d be a lot more elegant to do this as a filter rather than requiring people to replace the function.

  2. Posted 5 years, 10 months ago // Permalink

    Cool idea. Doesn’t WP use this for the CSS & JavaScript in the backend? Seems like I’ve seen CSS & JS called with the variable at the end like that before.

  3. Posted 5 years, 10 months ago // Permalink

    @Matt – thanks for dropping by… I was thinking the same thing, but as a hack-programmer, my brain at 1:30 this morning couldn’t go that far. I’ll post an update with a filter version of it ASAP.

    @Rick – WP backend seems to do this in a fashion, but I don’t think it’s dynamic… I think it’s something you hard-code. That said, I’ve not studied it carefully.

    Off to make it a filter :)

  4. Posted 5 years, 10 months ago // Permalink

    This is so simple, but awesome. I was getting so frustrated by this exact issue. I would fix things on my site, then try it on a separate computer and it looked terrible – unless I ctrl + F5 forced the reload. This is a much better solution.

  5. Posted 5 years, 10 months ago // Permalink

    Folks, please note my update here that this has now become a proper filter, wrapped in a plugin! It’s here.

  6. Posted 5 years, 10 months ago // Permalink

    Good stuff. I’ll give it a try. By the way, I find your blog to be margin-challenged.

  7. Trisha Miller
    Posted 5 years, 10 months ago // Permalink

    Actually I would prefer to put this in my theme’s functions file – the last thing I want is yet another plugin – can you post your improved code so that I can use it without adding the plugin? Many thanks for taking the time to create this – this is something that has given me headaches for some time – glad to see solution finally!

  8. Posted 5 years, 10 months ago // Permalink

    Trisha,

    I did think about this.

    In fact, you can just take the entire contents of the PHP file and put it in your functions.php file and it will work. Of course, I’d be taking out the large comment-block at the start, but I assume that’s a given. It will work in functions.php with no change whatsoever.

  9. Posted 5 years, 10 months ago // Permalink

    Nice look.I like it.Great contents

  10. Posted 5 years, 10 months ago // Permalink

    Cool concept – You can always gzip the contents of .css and .js to speed up the downloads to the client.

    Another thought to split the difference between true random and datestamp if you want more control is to use the AnyVar plugin – http://wordpress.org/extend/plugins/anyvar/ – and modify the custom value through the admin panel

  11. Posted 5 years, 10 months ago // Permalink

    Sounds great looking forward to it ! this is really nice mate! good job! Thanx!

  12. Posted 5 years, 9 months ago // Permalink

    Good idea. Doesn’t WP use this for the CSS & JavaScript in the backend? Seems like I’ve seen CSS & JS called with the variable at the end like that before.

  13. Posted 5 years, 8 months ago // Permalink

    This looks like a good stuff for wordpress. Thanks mate

  14. Tariq
    Posted 5 years, 8 months ago // Permalink

    I had the same problem with phpbb. Your solution is brilliant. Thanks!

  15. Posted 5 years, 8 months ago // Permalink

    Interestin that your sites offer coaching clinique, perhaps in future I would like to chat with your goodselves on how to generate massive traffics and advertising.Im always looking something new how to promo free.Good work!

  16. Posted 5 years, 8 months ago // Permalink

    I had a same problem and this tutorial helped me great.Thanka

  17. Posted 5 years, 8 months ago // Permalink

    Yes Joff I think that too. It helped me a lot

  18. Posted 5 years, 7 months ago // Permalink

    Here in my country, ISP always give us problem in catch new look of website. I think your code will help me much

  19. Posted 5 years, 7 months ago // Permalink

    This is so simple, but awesome. I was getting so frustrated by this exact issue. I would fix things on my site, then try it on a separate computer and it looked terrible – unless I ctrl + F5 forced the reload. This is a much better solution.

  20. jay
    Posted 4 years, 9 months ago // Permalink

    Great read! Still trying to learn word press… I am a self taught Madison Web Designer So I have a lot to learn yet, and really trying to learn wordpress.

  21. Posted 2 years, 9 months ago // Permalink

    Great Work! I wrote an article based on your work the other day @ http://wp.me/p1V1Ia-3z Simple & Effective

  22. Alister Cameron
    Posted 2 years, 8 months ago // Permalink

    Thanks for the blog post, mate! Much appreciated :)

  23. Posted 1 year, 10 months ago // Permalink

    Hi I notice in the new viosern that if the commenter doesn’t have a gravatar, I still get a big box with black border (and a link underline). I realize I could go in and edit my themes’ CSS, but there are things you could do to make this work better out-of-the-box:1) Tighten up the CSS so that the link inside the gravatar box specifically has no underline2) if there is no gravatar for the commenter, there is no box at all.3) Allow us to change the link’s CSS in OptionsThis is a cool plugin. This is all just a minor tuning. Thanks![Update: Heh. Didn't realize I had already commented on this. Sorreee -- didn't mean to spam you comments!]

  24. Posted 11 months, 3 weeks ago // Permalink

    Such a life save. Looking for a good tutorial and someone suggests yours. Oh, there’s a plugin? Might take a look into that

17 Trackbacks/Pingbacks

  1. force browsers to use your updated WordPress stylesheet

  2. Smart cache-busting for your WordPress stylesheet

  3. Smart cache-busting for your WordPress stylesheet.: If you frequently change your WordPress stylesheet or are working on it and would like your readers to pull the new stylesheet every time instead of using a cached version (which might display a borked page), this tutorial and the subsequent plugin

  4. Smart cache-busting for your WordPress stylesheet.: If you frequently change your WordPress stylesheet or are working on it and would like your readers to pull the new stylesheet every time instead of using a cached version (which might display a borked page), this tutorial and the subsequent plugin

  5. Smart cache-busting for your WordPress stylesheet.: If you frequently change your WordPress stylesheet or are working on it and would like your readers to pull the new stylesheet every time instead of using a cached version (which might display a borked page), this tutorial and the subsequent plugin

  6. schrieb ich etwas zum Caching, um WordPress zu beschleunigen. Das mag ja für den Besucher der Webseite gut sein, nicht aber, wenn man konkret an der Webseite „bastelt“. Eine tolle Lösung fand ichhier. Kurz gesagt, wird beim Aufruf der CSS-Datei noch ein Timestamp (ein letzter Zugriff) an die Datei gehängt. Wurde diese zwischenzeitlich geändert, wird sie nicht aus dem Zwischenspeicher geladen, sondern aus dem Themes-Ordner.

  7. Smart cache-busting for your WordPress stylesheet.: If you frequently change your WordPress stylesheet or are working on it and would like your readers to pull the new stylesheet every time instead of using a cached version (which might display a borked page), this tutorial and the subsequent plugin

  8. [...] WordPress Theme Stylesheets: Alister Cameron has come up with a novel method of caching your WordPress Theme stylesheet using various options. It’s an interesting [...]

  9. [...] to Matt for prodding me to take the CSS cache buster code I posted about a couple of days ago, and turn it into a [...]

  10. [...] Smart cache-busting for your WordPress stylesheet.: If you frequently change your WordPress stylesheet or are working on it and would like your readers to pull the new stylesheet every time instead of using a cached version (which might display a borked page), this tutorial and the subsequent plugin might be for you. Alister explains the issue in detail, provides a tutorial on how to acheive the results and then with some prodding from Matt, comes up with a plugin the get the same result which does not require any modification of code. [...]

  11. [...] キャッシュ-バスティング・ワードプレス・テーマ・スタイルシート: アリスタ・キャメロン氏が、各種のオプションを利用することで、ワードプレス・テーマのスタイルシートをキャッシングする革新的な方法を考案した。容量およびローディング時間を減らすことが出来るため、とても興味を惹かれる。 [...]

  12. [...] Smart cache-busting for your WordPress stylesheet [...]

  13. [...] Schlüssel neu geladen. Einfach in die functions.php des Themes. /** * Smart cache-busting * http://www.alistercameron.com/2008/09/10/smart-cache-busting-for-your-wordpress-stylesheet/ */ if (!function_exists(’css_cache_buster’)) { function css_cache_buster($info, $show) [...]

  14. [...] Smart cache-busting for your WordPress stylesheet [...]

  15. [...] Smart cache-busting for your WordPress stylesheet [...]

  16. [...] Smart cache-busting for your WordPress stylesheet [...]

  17. [...] the code for doing this yourself can be found on Alister Cameron’s website which is what my code is based [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*

Current day month ye@r *

    • www.medialayer.net
    • madmimi.com
    • marketsamurai.com
    • splash.oiopublisher.com
    • Advertise Here

  • My Posts in Your In-box!

    Enter your email address here for instant updates in your inbox, whenever I post something new.
    Your email address is in safe hands. Relax!
© Copyright 2008 Alister Cameron. All Rights Reserved Theme // Sitemap // RSS