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.

Answer 2

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.

Answer 3

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 );
}

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

Answer 5

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..

Answer 6

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.