To quote Mark Jaquith’s helpful post on this topic:

“If you update your WordPress theme’s style.css, you may have noticed that you have to “force-reload” your site in your browser to see the changes. This is because your browser keeps a copy of the CSS cached on your hard drive. Depending on how your server is set up, it may not check for a new version of the stylesheet for a couple hours, or longer! And even if you force-reload to see the changes, visitors who have previously accessed your site may still get the old CSS.”

That post is from 2009 and WordPress coding conventions have changed a bit since then, so I’ll provide an updated solution:

One way to solve this problem is to “version” your CSS file, by enqueueing your stylesheet and appending a timestamp to the end of it that represents when the file was last updated. And the same can be done for JavaScript files, as well. WordPress has a $ver parameter built in to the wp_enqueue_style() and wp_enqueue_script() functions for just such a purpose. Versioning your CSS & JS files looks like this:

This tells WordPress to enqueue the stylesheet/js file just as it normally would, but to append “?ver=” followed by a Unix timestamp representing when the file was last modified to the end of the filename before doing so ( see the image below). This ensures that the version of the file enqueued is the most recent, so everyone instantly sees your changes.

versioning-assets

9 comments

  1. Kit Johnson October 28, 2015 at 2:48 am

    Reply

    This is brilliant. I’ve searched for a solution like this so many times. Finally found it. Thank you!

  2. Kelby Lamb August 26, 2016 at 1:57 pm

    Reply

    Which file in wordpress would you post this code?

    • Kellen Mace August 27, 2016 at 12:20 pm

      Reply

      Hey Kelby,

      It typically goes in the functions.php file in your theme. Just search that file for “wp_enqueue_scripts” and you should see it. If the stylesheet was named style.css, then it would look something like this:

      function km_load_theme_styles() {
      wp_enqueue_style( ‘theme-styles’, get_stylesheet_directory_uri() . ‘/style.css’, array(), filemtime( get_stylesheet_directory() . ‘/style.css’ ) );
      }
      add_action( ‘wp_enqueue_scripts’, ‘km_load_theme_styles’ );

      Just keep in mind that any changes made to your theme would be erased if you update it. So if it’s a theme you plan on updating, you should only make changes using a child theme (more info here: https://codex.wordpress.org/Child_Themes).

      Best of luck!

      • Marco Panichi January 10, 2017 at 3:41 am

        Reply

        It doesn’t work. I still have after adding the snippet in functions.php.

        Maybe because the style is already enqueued. Maybe you have to de-enqueue and then enqueue again? Any idea?

        • Kellen Mace January 10, 2017 at 9:30 am

          Reply

          Hey Marco,

          Yeah, if that stylesheet is already enqueued, WP won’t enqueue it again. One option is to find where the stylesheet is enqueued and change it there. If you’re using a child theme though, you should not do it that way. Instead, just as you suggested, in the child theme you should call wp_dequeue_style() to remove it, then immediately call wp_enqueue_style() to add it back, providing your new arguments to it. To get the URL and path to a stylesheet that’s in the parent theme, you can use get_template_directory_uri() and get_template_directory(), then append the rest of the path to those, like in the examples in this post. Best of luck!

  3. Echo Yang September 17, 2016 at 4:33 am

    Reply

    Thanks!

  4. mihail kolev October 6, 2016 at 10:10 am

    Reply

    Hi.
    I’ve tried to make the CSS changes “go live” on my site but nothing happened. Can you please help me?
    This is the website: http://realvsbarcelona.com/

    Thank you.

    • Kellen Mace October 7, 2016 at 12:24 am

      Reply

      Hi Mihail,

      I can see that your theme’s style.css file does not have ?ver= followed by a unix timestamp at the end of it. See this image: https://cloudup.com/c-LZVA8XYCB. You must not have used filemtime() to set the version properly. I would re-copy it from this post and make sure the timestamp is being added to the end of style.css file. In google chrome, you can go to the menu icon > More Tools > Developer tools to open the dev tools window and click the Sources tab to see all the files loaded on the current page.

  5. John Culbreth January 13, 2017 at 3:01 pm

    Reply

    Thanks for the simple solution to such an annoying problem.

Leave a reply

Your email address will not be published. Required fields are marked *