WordPress Logo

I’m sure you’ve had the same problem. You make some changes to your sites CSS file and don’t get to see it until you hard refresh the CSS. Damn you Mr. Browser caching my stylesheet! Damn you .htaccess for setting long expire times on my assets. Well it’s all good as it speeds up the site for your visitors. However there is a nice little work around to still use the caching but also have a little trick to get your updated file pushed out as soon as you make the changes.

The WordPress function wp_register_style (which I use to register and then enqueue all my stylesheets) does have a parameter for version number which comes in very handy.

Firstly let’s have a look at my function which handles all my CSS.


function global_css() {

 wp_register_style( 'parent_main', get_template_directory_uri() . '/css/main.css', false, null, 'screen' );
 wp_register_style( 'child_main', get_stylesheet_directory_uri()  . '/style.css', false, null, 'screen' );

 if ( ! is_admin() ) :
 wp_enqueue_style( 'parent_main' );
 endif;

 wp_enqueue_style( 'child_main' );
 }

add_action( 'wp_print_styles', 'global_css' );

So what’s happening? Firstly I’m registering my main.css which is where I include all my css. I use style.css only for child theme overrides. Note I am using the correct WordPress functions to get the right URLs! This works great along with a little add_action. I do not have any dependancies so you can see the false. The null refers to the version so WordPress is not adding a version number to the URL.

Using a lovely little PHP function we can append the file’s last modified time. filemtime() is lovely! Here’s our updated code:

</pre>
function global_css() {

 wp_register_style( 'parent_main', get_template_directory_uri() . '/css/main.css' , filemtime( get_template_directory() . '/css/main.css' ), null, 'screen' );
 wp_register_style( 'child_main', get_stylesheet_directory_uri() . '/style.css' , filemtime( get_stylesheet_directory() . '/style.css' ), null, 'screen' );

 if ( ! is_admin() ) :
 wp_enqueue_style( 'parent_main' );
 endif;

 wp_enqueue_style( 'child_main' );
 }

add_action( 'wp_print_styles', 'global_css' );
<pre>

Now WordPress will output:

<link rel='stylesheet' id='parent_main-css'  href='http://www.mydomain.com/wp-content/themes/mytheme/css/main.css?ver=1344252157' type='text/css' media='screen' />

Note the ?ver= added to the CSS URL! When we update and save our CSS file this number will change and force the browser to re-download the file. We’re not forcing it to redownload the file unless the modification time has changed so browser caching and any caching plugins you have working will still work as expected!

Job done!

UPDATE: I noticed some mistakes in my code around get_template_path(), this has now been fixed. Sorry!
UPDATE 2: I am a major idiot. More errors fixed.

15 thoughts on “Get your WordPress CSS changes noticed immediately!

Leave a Reply

Mojowill Avatar

Who the Hell am I?

I'm Will, a full time web developer, geek and musician. I develop using PHP and MySQL and spend most of my time working with WordPress or CakePHP. When I'm not buried in code I'm gaming, cooking or writing and recording music in my studio. I like sci-fi, pancakes and coffee and am totally prepared for the zombie apocalypse...

Stalk me on these other sites...

Why not be super creepy and check me out on all these other sites, I think they call it social media?