Stylesheets, as well as external JS files or images, are cached by browsers. This is mostly good because it saves bandwith, but it can be a pain when you’re upgrading your stylesheet and want your visitors to see the changes without having to manually refresh their cache.
Don't know what cache is? This modern and gorgeous page says it all.
To get rid of browser caching on your stylesheet, just edit your header.php file, and use the code below to include your stylesheet:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?'.filemtime( get_stylesheet_directory().'/style.css'); ?>" type="text/css" media="screen, projection" />
Thanks to Lyndi for this nice tip!
22 Responses
This is nice tips, it always annoying when you edit the css but the browser won’t load it because it’s being cached.
It does not seem to work for me. Any idea?
This is very useful if you make changes regullary
Well it worked now..
I had to Shift + Refresh once and then it started working perfectly. I tested it on Firefox.
I would rather do style.css?v=0.1.
When I do some changes to style.css file, I just change style.css?v=0.2, and so on.
Therefore, the stylesheet will be cached and reloaded as needed.
Wheee thanks for this script, I needed it. It can be useful especially when I view the site using IE -.-”
News! Very good. Good luck with your blog …
Very useful tip, and surely this little stylesheet hack wont hurt your bandwith as we all know that css files are no more then few kilos big
I agree with Selinap.
Yeah, it’s working but then again how often do you change your blog design? I mean I’d rather just write a post informing people that they might need to refresh their cache instead of making the site load longer every time.
Easy but effective, getting the old css out of the cache can be a pain, thanks for this one!
Yah, effective and also useful for those who are developing their new websites. It’s a big problem for undergoing development of new sites if the stylesheets are cached.
Thanks a lot
Hey, very nice Quicktip!
3rd time’s the charm.
Here’s a modified query to use the version number extracted from style.css instead of the modified time:
Prevent WordPress Stylesheet from Being Cached
Really such a nice tips buddy. And very much helpful for those who
creating new site..
Awww appreciate this..
The clever part about this is that, until you change your CSS file, the current file is cached for as long as possible (subject to normal Apache/WordPress cache headers). This is the same trick used by some premium themes that let you regenerate their CSS from within the admin control panel for the theme.
simple and sweet
Great tip! I thank you very much for the share.
Not the most elegant solution because you don’t to lose any bandwidth saving benefits from caching css files and you don’t want your pages to be rendered from scratch again.
After some digging around I’ve found this option which is much more optimal then just disabling cache all together, because that’s not an option at all.
http://www.electrictoolbox.com/force-reload-css-javascript-unique-filenames/
I think it is always better to rename the stylesheet something different. This way it the new one is loaded instead of the cached one.
But I never found any trouble with Cached CSS files, but still this is a very nice Recipe.
Trackbacks: