WordPress website still loading old style.css

Question

I have made changes to style.css but the wordpress website is still showing old contents. I checked the file in FTP, and the changes in the file are there, but it\'s not showing

Answer 1

Providing you haven't made an obvious mistake like forgetting to actually upload the updated CSS file to the server (I've actually done this), then this is almost certainly a caching issue.

First - disable any caching plugins you might have. This one got me when I forgot I had installed WP Cache.

Cloudflare Probably the number one source of forgotten caching.

If you are using Cloudflare, sign in and set your site to "development mode" so all requests just pass straight through.

Then open the developer tools (assuming you are using chrome) and click on the network tab. Here there is a tick box to disable caching. Make sure this is ticked. This will ensure your browser is not caching the file when you have the developer tools open.

Next, click on the sources tab. On the left there is also a "Network" tab that has a file manager style tree control for all of a website's sources. In this tree, navigate to your style.css file which is usually found at: wp-content > themes > themeName. Click on the style.css file and it should open on the right.

Here you can see that a previous version of your file is being served even though a query parameter has been appended that shows a later version. That is: the header/top of the style.css file says it is version 1.0.1 but the file name is something like style.css?ver=1.0.2. This tells you that WordPress is aware of the updated file but somewhere between you and the server a cached version is being shown. In the old days one of the ways to get around caching was to append a query parameter to a file when making a request and this would force whatever caching system to think this was a request for a different file that it hadn't cached. But often this doesn't work with CSS files.

This now means that the caching is happening on the server. Most hosts implement some sort of caching on their web servers. How you disable this caching depends on the host. There may be a function on the host's control panel to disable caching or you may have to edit the .htaccess file to do this. Something like:

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

or

Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"

Check the particular host's site for guidance.