WordPress .ccs & .js version numbering for the terminally lazy
Just after lunch today I had one of those iinspirational moments that are usually reserved for just before breakfast.
I decided that I was sick of remembering to change the version number in the stylesheet and javascript links in my WordPress header and footer any time that I changed something. What's probably of more interest to you, is that just prior to getting annoyed by having to remember to do that, I thought of an easy way to never have to remember again. At this point I promptly forgot what it was that I had been trying to remember.
All is not lost however, since the relevent technique has been documented here for posterity. You too can forget about what it was you were trying to remember every time you change your stylesheet...
What are you on about?
Good question! I'm glad you asked that!
Firstly, this article is somewhat predicated on you (U) being well up to speed about how your WordPress1 site works.
You've most likely spent some time on optimising it already and don't have 40 different css and js files loaded by plugins. You've probably got a YSlow! Grade! A! which means that your css and javascript is already compressed, aggregated and located in the correct place.
It's more than likely that if you recognise yourself in the preceding blurb, that you also know that when you change your stylesheet or javascript, your visitors' browsers aren't likely to bother checking for it - especially if you're sending far-future expiry headers.
There is, naturally, another possibility... You haven't the faintest idea what any of this is about. In that case, my advice is to leave well alone. I'm throwing this out as an idea and I'm not interested in how or why you've broken your web-site.
Can you get to the point?
Certainly. All you need to do is script the last modified timestamp into the name or query-string of the file in question instead of manually incrementing the number (or forgetting to).
I can't believe I didn't think of that!
Indeed.
Moving swiftly along to the examples...
Example of versioning using ?ver=filemtime
<!-- No rewrite rules required for this example --> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/style.css?ver='.filemtime(get_stylesheet_directory().'/style.css'); ?>" type="text/css" media="screen" /> </head> <body> [...] <!-- Script is the last thing in the body unless it uses document.write --> <script type="text/javascript" charset="utf-8" src="<?php echo get_template_directory_uri().'/scripts.js?ver='.filemtime(get_template_directory().'/scripts.js'); ?>" ></script> </body>
Example requiring URL rewrite, but no query string
<!-- Server rewrite rule is required for this example --> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/style-'.filemtime(get_stylesheet_directory().'/style.css').'.css'; ?>" type="text/css" media="screen" /> </head> <body> [...] <!-- Script is the last thing in the body unless it uses document.write --> <script type="text/javascript" charset="utf-8" src="<?php echo get_template_directory_uri().'/scripts-'.filemtime(get_template_directory().'/scripts.js').'.js'; ?>" ></script> </body>
The Apache rewrite rule for example above
# Insert before WordPress rewrite rules # Ideally after WP-SuperCache rewrite rules, but before is OK RewriteRule ^(.*)/themes/(.*)/([a-z]+)-([0-9]+)\.(css|js)$ /$1/themes/$2/$3.$5 [L] # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On [...]
So there you have it. You never need to edit your header or footer again.
I'll leave it as an exercise for the reader to implement this as a plugin. Feel free not to bother, since I'm not going to either.
Hornarfjarðarljósbjögun!
- This technique can, of course, be applied to pretty much any dynamic site. ↵
Activity
RSS