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:


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(); ?>">

Randomise 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.


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.

Club-Mate, the beverage →