Force CSS and JS refresh in WordPress during development

as well as JS

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 plugins and your .htaccess caching setting but …

WordPress stylesheet changes not showing up no matter what

Force CSS and JS refresh in WordPress during development

In most cases when something goes wrong during development there is no easy way out and you have to debug thoroughly to find all possible issues that might cause the problem. Good news that it’s not the case today.

There is the really easy way to fix this not updating stylesheet issue.

All you have to do is just set $ver parameter correctly while adding styles and scripts:

This fourth $ver parameter is the answer to that not-updating-stylesheet issue. WordPress gives us a simple method to specify stylesheet version number for cache busting purposes.

$ver (string|bool|null) (Optional)
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

Usually, we enqueue script without version like this:

Which means the default value (false) will be set.  In this case a version number is automatically added equal to current installed WordPress version:

How to make wp_enqueue_style and wp_enqueue_script remove version at all?

If you set  $ver parameter to NULL no version will be added.

The result:

But it still will be cached and not updating at once.

How to add version to wp_enqueue_style and wp_enqueue_script?

You can add stylesheet (or script) version manually like this:

And you get:

If you change version to 1.2 your cached file will be removed from cache and new version will be reloaded.
It can become rather dreary to do it manually every time while development. That’s why the best decision will be to:

Disable wp_enqueue_style and wp_enqueue_script cache

Instead of manually setting new version will pass version number according to the current time:

This is how you totally disable caching for these script and stylesheet. The actual version will be loaded from the server every time the page is reloaded:

And even better solution to force CSS and JS refresh in WordPress

Instead of page load time

you would rather use

which will check when the script or stylesheet file you are adding was modified and fetch that time. So that style or script you enqueue will be reloaded only in case its file has been changed. Exactly what we need!

Just mind to change this back when development stage is over to cache scripts and stylesheets properly and speed up your site.

Leave a Reply

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