clubmate.fi

Cache busting scrip and CSS loader function for WordPress

Change a CSS or JS file, it’s cached, your changes wont show to users. Cache can be busted by changing the file name. Here’s how.

This is not a new thing, Mark Jaquith wrote about this back in 2009. All glory to him for this wonderful technique.

Busting a cached file

You need to, simply, rename the file. Luckily you can do it easily like this:

filename.css?anythingHere

We can put anything after that question mark and still not having to rename our file.

You could do it like this with PHP:

<link
  rel="stylesheet"
  href="<?php bloginfo('stylesheet_url'); echo '?' . rand(); ?>"
/>

Randomize the number after the question mark. That would be just stupid, then you wouldn't have cache at all. A lot smarter way is to get the edit time of the file and put that after the ?. Then cache is busted only when there are modifications to the file.

<link
  rel="stylesheet"
  href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>"
/>

That works perfectly, you can use that if you want. I like my templates really clean and simply, and that's a bit too messy looking.

My interpretation of it

Here's the same wrapped in to a function.

function cache_busting_script_loader($path_to_file = 'style.css') {
  $file_path = get_stylesheet_directory();
  $file_dir = get_bloginfo('template_directory') . '/';

  // URL of the wanted file
  $file_url = $file_dir . $path_to_file;
  // Path to the wanted file
  $file_path = $file_path . '/' . $path_to_file;
  // Get the file edit time
  $edit_time = filemtime($file_path);

  if ( preg_match('/.css$/', $path_to_file) ) {
      $output .= '<link rel="stylesheet" href="' . $file_url . '?' . $edit_time . '">';
  } elseif ( preg_match('/.js$/', $path_to_file) ) {
      $output .= '<script src="' . $file_url . '?' . $edit_time . '"></script>';
  } else {
      $output .= "<!-- Not really a supported file type, only .js and .css -->";
  }

  return $output;
}

That goes into your themes functions.php file.

Most basic use case:

<?php echo cache_busting_script_loader(); ?>

If you don't pass it any parameters, it loads the themes main style.css file.

Parameters

There is one of them. It is: $path_to_file. You can only link to stuff inside the theme folder.

<?php echo cache_busting_script_loader('css/another-script.css'); ?>

You can also link up JavaScript files with it:

<?php echo cache_busting_script_loader('js/main.js'); ?>

That outputs simply:

<script src="http://clubmate.fi/wp-content/themes/cm/js/main.js?1378297553"></script>

This isn't really necessary for all the site out there, just to blogs like this where I change things all the time.