Adding version to theme CSS file

This is a small trick I've been using on a number of sites where far expiration dates have been set on the server to improve browsing performance.

Basically if you often do any changes to your CSS (like me) the old version of the file will normally be served to your visitors as the cache expiration header is set to a far future time.

To remedy this we need to add a parameter to CSS file URL that will make it distinct every time you change it. Best way to do it is by using the timestamp of the file.

You can change the CSS reference in your header.php to something like this:


For example here is how my CSS URL looks like



More like this:


Posted in: WordPress
TAGS:, , , , , , , , , , , , , , ,
Both comments and trackbacks are currently closed.

9 Comments

  1. Apr 11th, 2012 2:44 PM

    Hi Master,
    I'm using this and it saving head banging whith netrenderer.com for example.
    But it's avaible only for main css file.
    I'm looking for timestamping the conditionnals IE css files but can't figure it out.
    Someone can help with this please?

  2. Oct 2nd, 2011 3:42 PM

    this tip help me to do my work easy..thank you..keep posting

  3. Jan 8th, 2011 3:58 PM

    I've had issues in Firefox on a client site I was building.

    Looks like Firefox 3.x has some caching problems and that resulted in it not always being able to load my style.css.

    So I searched and found your solution, but as you say, it only works when the CSS changes.
    My CSS is not changing but stupid Firefox still can't load it after a few browsed pages.

    My solution, inspired by yours, was to use PHP's uniqid() function in order to append a unique number after the '?' at the end of the file URI.

    Here's how (please edit in case WordPress screws up the code)

    
    <link rel="stylesheet" type="text/css" href=""  />
    
    Hope this helps others that have the same issue.
    
    I know it's not very elegant, since it always reloads your CSS, but if you have it minified for the live site, it's not a big deal (ok, true, it depends on how much traffic you get, but still...)
    
    Thanks, Vladimir!
    
  4. Mar 1st, 2010 8:27 PM

    My mistake, I thought it just used today's date, but I understand it uses the files modified date (is that right, sorry I'm not familiar with filemtime function, guess I should google it). Definitely makes more sense to me now. Great idea!

  5. Feb 18th, 2010 7:56 AM

    Excellent! I am implementing it on all of my client websites going forward. Thank you for another excellent tip Vladimir.

  6. Feb 17th, 2010 11:06 PM

    Awesome trick! Nice way to keep from Ctrl-refreshing all the time. But I don't think it is a good idea to keep it that way. It is kind of like a debugging feature, you only want to use it when your doing lots of trial and error testing. Otherwise, every visit requires visitors to re-download the stylesheet, which increase the page load time a little bit. What about graphics? Should we do the same when we are fine tuning graphic designs, forcing visitors to re-download graphics on every page load? I know it's absurd, but proves my point I think. But still, awesome trick!

    • Feb 28th, 2010 8:47 PM

      Every visit will not require a re-download, only when the CSS is changed.

  7. Feb 17th, 2010 4:34 PM

    awesome trick master..

    its so can include author blog :)