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 on the website. I don't have any WP cache plugins. I also deleted cache in my browser and forces cache refresh through Ctrl+F5.

:(

Speleology

Did you checked if the theme folder you FTP is the same of the current theme that you're using? – Innocuous

Yes I checked it using Developer's tool and I only have one theme. – Speleology

Try do delete the old one and re-upload the new one via FTP. I got this problem once too but it was a server problem, after like 30 minutes I tried to re-upload the files via FTP and it worked fine. – Innocuous

The style.css? Okay, I will try that. Thanks! – Speleology

Hmm. I deleted the style.css through ftp and tried to refresh the site without the style.css. It still shows old content. Then, I guess it might be a server problem. What do you think? I will try to re-upload the css file after 30 minutes. – Speleology

Yeah, if with the deleted file is still showing the old file or even working... it might be a server problem. try that 30m later. otherwise wait until tomorrow – Innocuous

I've found the cause of the cache issue and it is Cloudflare which contains a cached of the site. :( Thanks for your help, Chun! – Speleology

ohh ok, that makes sense xD you're welcome – Innocuous

Answer 1

Try changing the version of the style.css file If included by giving the path in header then try to append version as

<link style ........ href="...../style.css?v=1.5"... /> 

note the ?v=1.5 indicates the version

if style.css is auto loaded then open your style.css file and add/change version as below:

/*
Theme Name: yourthemename
Theme URI: yoururl
Author: Vantage Tel
Version: 1.5 
.
.
.
*/

//change this version and upload file try pressing Ctrl+F5 to refresh your page once..

Angio

Thanks, Yamu! But I've found what's causing problem. :) – Speleology

@icy, if you found out what's causing the problem, could you please expand on it? I'd love to know how you solved this. Thanks! – Ical

Hi Luqita! CloudFlare is causing me the problem on this case. So I manually clear the cache on it whenever I make changes on the .css file. – Speleology

Cloudflare was the cause for me too. Clicking on Caching Level: Standard, then Purge Individual Files, finally entering: (...)/themes/mythemename/style.css?ver=62743ebf16e235fcdfbf89640f63baa0 solved the problem (after waiting around one minute and pushing Ctrl+F5) – Meteoritics

Amazed.Worked like a charm.+1 – Wonderful

Versioning will work with CloudFlare which will see the version query string as a new filename. – Flavoprotein

Thanks Man you just save my time. I tried it more than 3-5 hours :( . Thanks Again. – Triley

Answer 2

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.

Imponderable

Thanks for your answer - Cloudflare caching was the issue and setting the site to Development Mode fixed it! – Grant

Any chance you can mark this as answered? – Imponderable

I didn't create the question I'm afraid – Grant

Answer 3

In modern WordPress, the wp_enqueue_style() function has an optional parameter for "version". When set, a query string is added to the URL for the stylesheet, e.g. ?ver=foo which as mentioned by Yamu should indicate to the browser that the file is different than the old one and cause it to load the new version instead.

The version can be set manually during the call to the function to some versioning scheme (e.g. "1.0.1") or can be built using PHP as in this example which appends the time the stylesheet was last modified to create something like ?ver=1568061612: filemtime(get_stylesheet_directory() . '/style.css'). The full function then reads:

wp_enqueue_style('main_css', get_template_directory_uri() . '/style.css', array(), filemtime(get_stylesheet_directory() . '/style.css'));

Note the 3rd argument is an empty array() which is the default argument for $deps.

The method of cache busting by using a timestamp from a file goes back a long time and is reasonably reliable.

Flavoprotein

Answer 4

I had the same problem while working in localhost, worked after disabling the cache in chrome under developer mode(f12) >network > check disable cache

Jabber

Glad it worked for you in the localhost, but the real issue is not with client machine but the server keeping a cached copy so we must make sure that the client will always receive the latest version of the file if any modification is done to the file(css). – Angio

Thats a very good solution if the goal is just debugging. – Osteophyte

Answer 5

This article has an interesting suggestion where you make your version equal to the current timestamp:

wp_enqueue_style( 'louiscss', get_template_directory_uri() . '/mystyles.css', array(), time() );

That function goes in functions.php and I believe you need to wrap that in a function and have add_action('init', 'your_wrapper_fn' ); later in functions.php (but I'm not entirely sure);

You may want to put time() in while developing and then set it to a static version later.

One thing that sometimes works is to "Settings > Permalink Settings" and literally just press the save button. I know it seems off the wall, but pressing that save button just seems to update the whole configuration.

Having "Disable Cache" checked in the Chrome developer tools' "Network" tab is a good way to know if it's WordPress doing the caching. It's tough when you don't know if it's the brwoser or WordPress.

Update: I'll leave this answer up, but I'm still having trouble.

Rhodonite

Answer 6

I had the same problem and I fixed it in another way than the default.

First I located the file that I need to change:

wp-includes\theme.php

There is a function called get_stylesheet_uri

My function looks like this:

function get_stylesheet_uri() {
    $time = time();
    $stylesheet_dir_uri = get_stylesheet_directory_uri();
    $stylesheet_uri = $stylesheet_dir_uri . '/style.css?v='.$time;
    /**
     * Filter the URI of the current theme stylesheet.
     *
     * @since 1.5.0
     *
     * @param string $stylesheet_uri     Stylesheet URI for the current theme/child theme.
     * @param string $stylesheet_dir_uri Stylesheet directory URI for the current theme/child theme.
     */
    return apply_filters( 'stylesheet_uri', $stylesheet_uri, $stylesheet_dir_uri );
}

Airport

I think this means your CSS will NEVER get cached which will slow down performance – Humphries

you should never change the core files. they will be overwritten whenever WordPress updates itself. – Iatrics

I would strongly recommend not to use this method of editing the file in wp-includes as this file will be overwritten if you update your WordPress. Instead try using the add_filter('stylesheet_url','your_custom_function_name'); then define your function name and copy the above code to create a function in your function.php file. This way upadate to core wp will not affect your changes and continue to work in the future. – Angio

I have added CSS after time it's not working any other solution please @Airport – Delegation

@SavanDholu you might also take a look at the versioning for the style.css you can find here: developer.wordpress.org/reference/functions/wp_enqueue_style an example for this is below: wp_enqueue_style( 'style-theme', get_stylesheet_uri(), array(), getThemeOption( 'theme-style-version' ) ); instead of the getThemeOption you can put a numeric value or a $time like above – Airport

@Airport Thanks for sharing this but I have already found that solution. Thanks appreciate IT – Delegation

Answer 7

For me it was the quic.cloud CDN. I have a Lightspeed plugin installe that I thought would control the quic.cloud cache, but it does not. I had to go to the quic.cloud backend and clear cache there to get a new version of my css.

Eventually I found "Empty Entire Cache" in Lightspeed Cache > Toolbox, which works, too.

Illyricum

Answer 8

You can write this code on your functions.php file-> in the beginning

if(site_url()=="http://demo.com"){
    define("VERSION",time());
}
else{
    define("VERSION",wp_get_theme()->get("Version"));
}

And change all the wp_enqueue_style(.....,1.0) <- here change the it with "VERSION".

Hottentot