Grow your CSS skills. Land your dream job.

Last updated on:

Prevent CSS Caching

WordPress:

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

bbPress:

<link rel="stylesheet" href="<?php bb_stylesheet_uri(); echo '?' . filemtime( bb_get_active_theme_directory() . '/style.css'); ?>" type="text/css" media="screen" />

Adds stylesheet with time of last update. If the number changes the browser updates the CSS instead of using cached version. Easily amended to be none WP specific.

Comments

  1. In WordPress,

    filemtime(get_bloginfo( 'stylesheet_url' ));

    Will fail, apparently because get_bloginfo('sylesheet_url') returns an absolute path and that upsets the filemtime() function.

  2. Permalink to comment#

    I’m trying to move a website to a different server, downloaded all the files the new company put them up for me but I have lost all my css formatting for my theme (striking). Can find where the original developer of the website make the changes to header sizes, link colours etc etc. Could you help me maybe. Please

  3. Permalink to comment#

    And for your JS…

    
    <script type="text/javascript" src="<?php echo get_bloginfo('template_directory') . '/js/script.js?' . filemtime( get_stylesheet_directory() . '/js/script.js');?>"></script>
    
  4. Christian Sciberras
    Permalink to comment#

    Agustin….on the contrary…it fails because it returns a path relative to document root…

  5. Martin Klasson
    Permalink to comment#

    I am getting a “Stat”-php error for the example given above.
    The solution that I worked out that was working for me was this:

    <link rel="stylesheet" href="/css/style.css?version=”>

    What I have done is used the dirname(_FILE_) to get the path to the directory. Not the URL, but the PATH on the computer.

    The code above is used for my custom css-class. (I dont use the default css), but can easily be amended of course to work along with the stylesheet_url as well.

  6. Murdoc
    Permalink to comment#

    Thank you, sir! This is exactly what I have been looking for!

  7. Permalink to comment#

    There is a plugin up on the WordPress Plugin Repository that takes care of this automatically. Fixes version numbers for stylesheets and scripts. WordPress plugin Versions. Works really good.

    • scott

      only problem is it renders your site completely blank. uninstalled. thanks for the panic.

  8. Permalink to comment#

    This is exact copy paste from Mark’s site, without any reference. You have only changed the subject and added the bbpress stuff…. rest everything is same

    http://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/

  9. Permalink to comment#

    I released a plugin that just works doin’ the drink, it’s Style.css Load Last Version plugin for WordPress.

    Cheers,

  10. John
    Permalink to comment#

    Hello guys!

    For those who uses WooThemes Canvas, child theme, and want to automatically add version to custom.css file, here is the code (put it in your functions.php):

    View in Pastie.org

    Thanks to Tiago Noronha, for WooThemes Support Team.

    Cheers,

  11. Kenny

    I know this is old, but for WordPress, in your functions.php file, why not just pass NULL to the version parameter of wp_enqueue_style?…It will do the same thing without having to hard code the link into the header, if no dependencies use null as well…

    wp_enqueue_style('your-theme', get_template_directory_uri() . '/style.css', NULL, NULL, 'screen');
    
    • Kenny

      of course that is, if you would like to prevent in dev stage…when you push live remove the nulls and the version num will pop back in again…

    • Permalink to comment#

      For me it didn’t do the job. And I can’t see why it should. If you pass NULL to the version parameter then the version never changes and therefore you don’t force your browser to reload it.

      Please correct me if I’m wrong. I’d really like to understand how this works better.

      Anyway, what I used in WordPress was this code:

      add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
      function enqueue_child_theme_styles() {
          wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
          wp_enqueue_style( 'child-style', get_stylesheet_uri(), NULL, filemtime( get_stylesheet_directory() . '/style.css' ) );
      }
      

      I prefer this over the orginal code-snippet from css-tricks as it is the best way to include a childtheme-stylesheet in WordPress combined with filemtime() to force browsers to load new versions of the css-files. I didn’t use filemtime() for the parent-style as I never touch it and therefore filemtime() would only waste resources.

      Cheers

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".