Learn how to fix, CSS changes not showing up in WordPress immediately. You might have experienced that you made some changes in the CSS and design of your WordPress site, but those changes are not updating WordPress live site in the browser.
You have tried all the things – cleared your browser cache, cleared all caches in cache plugin, sometimes even rebooted your machine etc. But no success, your browser is still showing the old version of Cascading Style Sheets (CSS) files and script files.
☲ Table of Contents
Why CSS Changes not Showing Up in WordPress Immediately
What’s wrong?
This issue can arise because of data caching involved at various ends between browser and server. The problem is data remained cached somewhere between browser and server, even after you cleared all the caches in cache plugins and browser etc.
How to Fix this issue – Cache Busting CSS WordPress
This problem can be fixed by many methods. When I start facing this issue, I research about possible solutions to fix this issue. In many forums and blog articles, they suggest using a php script that force browser to load updated files based on date and time of their last modification.
They have coined the technique of fixing this issue as ‘Cache Busting’ or ‘Cache Busting CSS’.
You can use any of the following methods for Cache Busting CSS in WordPress:
- Using a plugin
- Using a script
Plugin Method:
Steps to be followed:
- All you need to install and activate a WordPress plugin called Busted. That’s all, you are good to go.
- If you have installed a cache plugin, it is advisable that you should clear all caches once.
Script Method:
Though there are many php scripts available on the web which are able to do the trick. However, Lutz Schröer mentioned a script in this article. I found the idea of his script more effective as it includes the updating of files in both ways i.e. file version as well time of its last modification.
I hope this article help you to fix CSS changes not showing up in WordPress. You might be interested to learn how to Remove Render-Blocking JavaScript above the fold in WordPress.
Cheers!
You may also like:
How to Remove Dashicons from Genesis Theme
Set Up Accelerated Mobile Pages in WordPress
How to Remove Font Awesome from WordPress Theme
Enable Keep-Alive to Speed up Your Site
