2

When I update the style.css in my active child theme, the changes are not immediately picked up.

I tried doing a touch on the file, but the results have been inconsistent. It worked once, but did not work the next time. The changes were recognized after waiting for some time (~15 minutes). I checked the file timestamps and they

Is there something else that I need to do to let WordPress know that the style.css file has been updated for the current theme? Is the browser's concept of time involved in the decision to include changes from the style.css file?

Note: I am using the wp-enqueue-style() approach instead of the @import method for including the parent style.css.

Update: I do refreshes on the browser side every time I update style.css.

3 Answers 3

3

The problem is that you stylesheet is cached by your browser. This is no problem specific to WordPress, but will happen with every resource that you open in browser. The second thing that can (and probably will) be happening is that you have some sort of server side cache. You can work around your webservers caching, by hitting Ctrl + R or the same with Ctrl + F5 – as long as your server sends a proper Cache-Control header, else it won't work as your servers cache will refuse to react on commands from the outside world (your client/browser).

Aside from that, you can tell the server that you have a new resource every time you have a change to your stylesheet. This can simply be done by appending a query argument like ?<key>=<value>. The easiest way to do so, is to append a UNIX timestamp of the last time your file was modified:

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style(
        'child-style-css',
        get_stylesheet_directory_uri()."/style.css",
        false,
        filemtime( get_stylesheet_directory()."/style.css" )
    );
}

This will produce an HTML tag like the following, where the query argument appended is ver and the value is 1456786622:

<link rel="stylesheet" 
    type="text/css" 
    href="https://example.com/wp-content/themes/your-theme/style.css?ver=1456786622">
5
  • Thank you. I did not see your comment about server-side caching until after I added my own answer. Also, I don't quite understand the second paragraph - how does query argument figure into the code you have provided? Possibly I just don't have the necessary PHP background.
    – Sabuncu
    Commented Feb 29, 2016 at 21:32
  • @Sabuncu See update. For the rest, you might want to exhibit how your server actually adds the Cache-Control header so you don't have localized knowledge for a single hoster with a GUI.
    – kaiser
    Commented Feb 29, 2016 at 22:58
  • Kaiser, thanks again. The "false" in the wp_enqueue_style() call - what is the syntax for that? It follows a literal string but there's no separating syntactical element.
    – Sabuncu
    Commented Mar 1, 2016 at 12:36
  • @Sabuncu I copy/pasted that quickly from another answer and seems like the origin had no commas. One line is one argument – fixed. Btw, developer WordPress resources, which includes source code.
    – kaiser
    Commented Mar 1, 2016 at 12:48
  • Whew! Thanks, I am already apprehensive about learning PHP, and I was really spooked by that syntax. :)
    – Sabuncu
    Commented Mar 1, 2016 at 13:37
1

It is probably because your browser is caching your css file. Try to reload with ctrl+F5 or for mac cmd+shift+r.

8
  • Just a F5 reload or a clear cache reload ctrl+f5? Are the changes visible in the css file if you go to it through you browser? Commented Feb 29, 2016 at 20:47
  • Per your suggestion I have tried CTRL+F5 but it did not help.
    – Sabuncu
    Commented Feb 29, 2016 at 20:57
  • Are the changes visible if you load the css file in your browser? Commented Feb 29, 2016 at 20:58
  • Just enter the url of your stylesheet in your browser. something like http://www.yoursite.com/wp-content/themes/your-theme/style.css Commented Feb 29, 2016 at 21:00
  • Didn't realize you could do that! Yes, the contents of the file are up-to-date when I look at it through the browser. But on another tab (Chrome), the site is out of date.
    – Sabuncu
    Commented Feb 29, 2016 at 21:03
1

The culprit was the server-side cache system used by my service provider (SiteGround). Their cPanel has a cache-flush device; using it solved the problem:

enter image description here

This stackoverflow question also helped.

Here's a link to the SiteGround page describing the system: SiteGround static cache

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.