Prevent installation of style.css cookies and file caching

I’m having a problem which I have never encountered before.

When I update my style.css file within my child theme, the webpage does not use the new style.

Read More

I have pinpointed that to a cookie within my browser which seems to use style.css?ver=3.8.1 instead of the basic style.css. Incidentally, 3.8.1 is my version of WordPress.

The only fix I found is to manually delete the cookie, but it’s a hassle to do whenever I make changes.

Any ideas on how to fix ?

Related posts

3 comments

  1. I expect that your theme has code similar to this in it:

    wp_enqueue_style( 'themename-style', get_stylesheet_uri() );

    You need to alter this to have version information, like so:

    wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array(), '1.0' );

    Where “1.0” is the version of the theme.

    Now, every time you alter that stylesheet, you need to update the version number. This updates the URL to have the new version, and thus busts the cache.

  2. Check to see if you have browser caching enabled in your .htaccess file. That’s a temporary workaround.

    But a long term solution is from Mark Jaquith http://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/ there is a way to append a timestamp to the style.css URL as query string; that will force a reload of the style.css file whenever it is changed. I.e.,

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url');
    echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>"
    type="text/css" media="screen, projection" />
    

    As he says:

    This automatically updates the ?12345678 ending part every time you
    modify the file. Boom. Now everyone instantly sees your changes.

  3. If anyone was trying to figure out how to get multiple stylesheets to refresh, you can use this code

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); 
    echo '/differentnamestylesheet.css?' . filemtime( get_stylesheet_directory()   ); ?>" 
    type="text/css" media="screen, projection" />
    

Comments are closed.