• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Dev Tips / Load Newest CSS in WordPress

Load Newest CSS in WordPress

Last updated on August 2, 2018 by Sal Ferrarello

When developing a WordPress theme, I often need to ensure I’m loading the latest version of the CSS file I’m working on. One way to do this is by appending a URL parameter (e.g. ?ver=123) that gets updated each time the file gets updated.

Load Newest Assets Plugin

Thanks to Corey Salzano for pointing out the Busted! plugin on Twitter. This plugin will check the last modified date of all of the assets you load (JavaScript and CSS) and adjust the version URL parameter to load the latest version.

My Code

Because I find this code interesting, I’m going to leave it as part of this post but for most people I’m guessing the Busted! plugin is a better solution.

We can automate updating the version URL by using the last modified time for the file in Unix Time (the number of seconds since January 1, 1970). This code will do just this.

You can add this code to your functions.php file in your theme (or even better, put it in the mu-plugins directory).

Preferred Install

  1. Navigate (or create) the mu-plugins directory
  2. Run the following from the command line

Run from Command Line

curl -O https://gist.githubusercontent.com/salcode/b627efd3122155e657688914dfaa298f/raw/add-file-mod-time-as-ver-number-to-css.php
<?php
/**
* Filter all CSS URLs being loaded on the page.
* Add the last modified time (in Unix Time, i.e. a large integer)
* to the end of the URL.
*
* This forces the browser to load the most recent version of this file.
* e.g. http://example.com/wp-content/my-child-theme/style.css
* becomes
* http://example.com/wp-content/my-child-theme/style.css?ver=1533080875
*
* Quick Setup:
* 1. Navigate (or create) the mu-plugins directory
* 2. From the command line run
* curl -O https://gist.githubusercontent.com/salcode/b627efd3122155e657688914dfaa298f/raw/add-file-mod-time-as-ver-number-to-css.php
*/
add_filter( 'style_loader_src', function( $src, $handle ) {
// All of my CSS changes are made in a child-theme.
if ( 'child-theme' !== $handle ) {
// This is not the child-theme CSS file, make no changes.
return $src;
}
// Use the default location for the child theme CSS file.
$file_path = get_stylesheet_directory() . '/style.css';
if ( ! is_file( $file_path ) ) {
// No file exists in the default child theme CSS file location.
// Make no changes.
return $src;
}
$last_modified = filemtime( $file_path );
$src = add_query_arg( 'ver', intval( $last_modified ), $src );
return $src;
}, 9999, 2 );
view raw add-file-mod-time-as-ver-number-to-css.php hosted with ❤ by GitHub
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Dev Tips, Draft, Solution Tagged With: PHP, WordPress Theme

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in