force css update wordpress

Force Your CSS to Update in WordPress

Ben by

If you’ve ever tried to edit your WordPress theme’s style.css, then you’ve probably noticed that sometimes it just doesn’t update.

Usually just a SHIFT + F5 to force reload does the trick, but sometimes you’ll find that no matter what you do the CSS just won’t update.

This isn’t WordPress trying to mess with you (though I’ve thought plenty of time it was my theme), it’s probably a page cache that’s throwing a spanner in the works.

Page Caches

cache

The problem arises when page caches get involved.

Around 90% of the time page caches are great, they save server resources and speed up page load times – I mean what’s not to love about that.

This is because your browser will store your CSS file on your hard drive to save having to download it every time you visit a page.

But when you’re making changes to your site’s CSS, then a page cache can quickly get in the way.

The problem is it may be hours, or even weeks if you set long expiry dates, until your browser updates.

Visitors Might Get Your Old CSS

Even if you force refresh your caches, there’s a good chance that your visitors are still using your old CSS.

If a visitor has already been to your site before and they haven’t updated their page cache, then they’re going to keep using the old CSS until it expires.

If you care about your visitor having a consistent experience on your site, then you can understand this isn’t a good idea.

The Solution

An easy way to solve this problem is to version your CSS files.

[prism field=code2 language=html]

This way whenever you update the CSS file, it’s URL changes.

This forces your browser and server’s page cache to update and let’s you see your changes live.

Now it’s a pain to have to manually update the version each time, so we can get WordPress to do it for us.

If you put the following into your theme’s header:

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

Now WordPress will automatically update your CSS version whenever it get’s updated.

 

Have you every had problem with your page cache? How did you solve them? Let us know!

You may also like