- Why style.css or any other not updating in WordPress?
- A proper solution: Force CSS reload in WordPress every time when file is updated
So, you are developing theme or customizing plugin and have made some changes to your custom stylesheet.
You refresh your page and… nothing happens. You clear browser cache but stylesheet still not updating. You go into incognito mode but it changes nothing. You check caching plugin’s settings but … WordPress stylesheet changes not showing up no matter what!
Why style.css or any other not updating in WordPress?
It happens because of how caching works (browser, page caching, server side, CDN etc).
Check out in the page source code your file URL:
- /style.css — will be cached
- /style.css?ver=5.7 — will be cached
- /style.css?ver=something else — will be cached too
So, if you make changes to a file but its URL and query arguments didn’t change accordingly most likely it will be cached. And changes you made won’t be applied.
All you have to do — is just set ?ver correctly so it is updated once you update the file itself.
File versioning and caching
wp_enqueue_style( $handle, $src, $deps, $ver, $media ); wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
See this fourth
$ver parameter? This is the answer to that not-updating-stylesheet issue. WordPress gives us a simple method to specify stylesheet version number for cache busting purposes.
String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
Default value: false
If you enqueue a script or a style without specifying it’s version
wp_enqueue_style('my_custom_style', get_stylesheet_directory_uri() . '/sz_style.css');
It means the default value will be set for $ver, which is ‘false’. Meaning that the number of currently installed WordPress core version will be assigned. Say, 5.7:
If you set $ver parameter to NULL
wp_enqueue_style('my_custom_style', get_stylesheet_directory_uri() . '/sz_style.css', array(), NULL);
No version will be added:
But it still will be cached and not updating when you make changes.
If you set $ver according to your theme/plugin version or manually
wp_enqueue_style('my_custom_style', get_stylesheet_directory_uri() . '/sz_style.css', array(), '1.1');
And you get:
You’ll get the same result: once you update version number, a new file version will be applied (you’ll see the changes) and it will get cached too. So next time you update a file you face the very same problem — style.css is not updating.
A proper solution: Force CSS reload in WordPress every time when file is updated
In $ver — check if actual file has changed, and if so — update it’s version number.
wp_enqueue_style( 'my_custom_style', get_stylesheet_directory_uri() . '/sz_style.css', array(), filemtime( get_stylesheet_directory_uri() . '/sz_style.css') );
filemtime( get_stylesheet_directory_uri() . '/sz_style.css')
will check when the script or stylesheet file you are adding was modified and fetch that time in Unix Timestamp format.
In this example, 1617209817 = Wed Mar 31 2021 16:56:57 GMT+0000
And that style or script you enqueue will be reloaded only in case its file has been changed. Exactly what we need!