How are updates to the style.css file in child theme recognized?

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

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

Leave a Comment