How to force CSS changes to show up immediately on WordPress site

After updating WordPress CSS files (for example, style.css file of your theme), you may need to reload or even clear the cache of your browser in order to see the the changes you have made. This happens because your browser keeps the CSS files in its cache on your computer.

Moreover, your server may not check for a new version of your stylesheet files for some time (maybe some minutes or even hours). So, you and your website visitors will not be able to see the changes for quite some time. There is a way to solve this issue. and it implies updating your stylesheet file version every time you edit it by adding ?v=123456789 to the URL in the <link /> section of your CSS file. This is very uncomfortable to do so every single moment you update your CSS files.

To save your time and efforts, there is a simpler method to make CSS changes visible immediately on your WordPress site. You need to add this code to your themes’s header.php file:

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

This code will automatically update the ending part of the stylesheet version every time you change something in the CSS file. That’s it! Now you and your visitors will not have any problem seeing the visual changes immediately.

Giorgi Chkheidze
Giorgi Chkheidze
An author of this blog and an experienced front-end developer, SEO specialist, translator and educator with more than 5 years of experience of working with individuals and big businesses.