A good[ish] website

Web development blog, loads of UI and JavaScript topics

Cache busting scrip and CSS loader function for WordPress

Filed under: WordPress/PHP— Tagged with: caching, regex, php

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:


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

You could do it like this with PHP:

  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.

  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.


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=""></script>

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

Comments would go here, but the commenting system isn’t ready yet, sorry.

  • © 2022 Antti Hiljá
  • About
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!