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.
23 Comments
you were wondering... I believe in rewarding commenters!
It’d be a lot more elegant to do this as a filter rather than requiring people to replace the function.
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.
@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
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.
Folks, please note my update here that this has now become a proper filter, wrapped in a plugin! It’s here.
Good stuff. I’ll give it a try. By the way, I find your blog to be margin-challenged.
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!
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.
Nice look.I like it.Great contents
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
Sounds great looking forward to it ! this is really nice mate! good job! Thanx!
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.
This looks like a good stuff for wordpress. Thanks mate
I had the same problem with phpbb. Your solution is brilliant. Thanks!
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!
I had a same problem and this tutorial helped me great.Thanka
Yes Joff I think that too. It helped me a lot
Here in my country, ISP always give us problem in catch new look of website. I think your code will help me much
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.
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.
Great Work! I wrote an article based on your work the other day @ http://wp.me/p1V1Ia-3z Simple & Effective
Thanks for the blog post, mate! Much appreciated
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!]
17 Trackbacks/Pingbacks
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted -1928 years ago
Posted 4 years, 8 months ago
Posted 4 years, 8 months ago
[...] 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 [...]
Posted 4 years, 8 months ago
Posted 4 years, 8 months ago
Posted 4 years, 7 months ago
Posted 4 years, 7 months ago
Posted 4 years, 2 months ago
Posted 4 years ago
Posted 3 years, 10 months ago
[...] Smart cache-busting for your WordPress stylesheet [...]
Posted 1 year, 6 months ago
Post a Comment