Adding automatic CSS timestamp to a Thematic child theme
I recently had a small design job to do on a site based on the Thematic WordPress theme framework. It was all creating graphics and adding them to the CSS file of the blog. While completing this task I stumbled upon several issues, so I woud like to share the solutions I used for them.
Issue 1: Browser cache
As you know, visitors to a site would get served the latest version of a file only if it already doesn’t exist in the local browser cache (or the local copy is old enough to expire). So only a first-time visitor would surely get the latest CSS version, but what about returning visitors? I needed to make sure they get the new CSS file without having to manually hard-refresh their browser. This is where the CSS timestamp technique comes into place.
Issue 2: Continuous updates
In any future updates of the CSS file, I would need to change the timestamp each time, which brings in a bit of inconvenience. This is where generating an automatic timestamp on file change comes in quite handy, if not priceless.
Issue 3: Updating the Thematic stylesheet call function
The site used Thematic as a base parent theme, and the child theme of the site contained just a few files – an index.php file, a css file, a functions.php file, and an /images folder. This is the beauty of child themes introduced recently in WordPress – you can base your theme on an existing one and add only the files you need to change in your child theme folder. As opposed to directly changing the main theme, this technique protects your changes from any future updates of the main theme, which would overwrite your changes. By using a child theme you effectively preserve your changes in a separate theme folder.
However this also prevents you from directly editing PHP code that includes the stylesheet without adding too much excess code. This is where we will use WordPress filters to do the task.
Now let’s see the solutions to these issues.
Solution to issue 1 (Browser cache)
Here is how a normal call to a CSS file looks like in HTML:
<link href="style.css" type="text/css" rel="stylesheet" />
As mentioned before, an elegant solution to the browser cache issue is appending a unique string to the filename call as a parameter passed on to the CSS file:
<link href="style.css?some_unique_string" type="text/css" rel="stylesheet" />
Usually a version number is used, e.g.:
<link href="style.css?ver=12" type="text/css" rel="stylesheet" />
or a date:
<link href="style.css?20100829" type="text/css" rel="stylesheet" />
The idea is generally the same. CSS does not make use of that parameter, but the browser gets tricked that you’re making a call to a different file (due to the different value of the href attribute), so it downloads it from the server. Voila!
Solution to issue 2 (Continuous updates)
Applying the CSS timestamp trick is great, but leaves room for error. Sometimes I might forget to change the version / timestamp, or I may just get tired of constantly changing it. This is why the solution I found published here really made my day. What it does is automatically append a unique number based on the actual date / time the CSS file was changed on the server by using a PHP function ( filemtime() ) to check for it.
Here is how a line of HTML/PHP code using this method would look:
<link href="style.css?<?php echo filemtime('/server/path/to/css/file/style.css'); ?>"
rel="stylesheet" type="text/css" />
This will result in a unique number appended to the CSS call each time the file is changed. No more need to worry you forgot anything.
Solution to issue 3 (Tinkering with the CSS call function in Thematic)
I opened the header.php file of the Thematic parent theme to see how the CSS file is being included. I only saw a bunch of PHP functions being called, going like this:
// Creating the doctype
thematic_create_doctype();
echo " ";
language_attributes();
echo ">\n";
// Creating the head profile
thematic_head_profile();
// Creating the doc title
thematic_doctitle();
// Creating the content type
thematic_create_contenttype();
...
Not a line of HTML. But I noticed one of the functions was this:
// Loading the stylesheet thematic_create_stylesheet();
It would obviously take care of inserting the stylesheet. A short run through the Thematic file structure showed this function was defined in /wp_thematic_folder /library /extensions /header-extensions.php:
// Located in header.php
// creates link to style.css
function thematic_create_stylesheet() {
$content = "\t";
$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
$content .= get_bloginfo('stylesheet_url');
$content .= "\" />";
$content .= "\n\n";
echo apply_filters('thematic_create_stylesheet', $content);
}
It clearly shows how the HTML code for including the CSS file is built and assigned to a $content variable. What I needed is to change the output of this function. I accomplished that by adding a filter that would replace the output of the existing thematic_create_stylesheet() function with what I need. Adding a filter is easy – just edit the functions.php file of your theme (in this case – the child theme). This is how it looks:
function timestampCSS($content) {
$content = "\t";
$content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
$content .= get_bloginfo('stylesheet_url');
$content .= '?' . filemtime( get_stylesheet_directory() . '/style.css');
$content .= "\" />";
$content .= "\n\n";
return $content;
}
add_filter ('thematic_create_stylesheet', 'timestampCSS');
What I did was create a new function ( timestampCSS() ) which would return the output I need, and then hook it as a filter to the old function ( thematic_create_stylesheet() ), so that each time the old function is executed my new function will be, too. The last line ( add_filter() ) effectively tells WordPress to use the output of timestampCSS() instead of the one of thematic_create_stylesheet().
So this is how you can use a combination of handy techniques to make your work on styling Thematic a bit less tedious and make it work independently of the updates of the parent theme.