TwentyTwelve versioning

2 comments

1. How it’s NOT done in WordPress

   The following example is the opposite of how one should do it. Bad practice following:

   <style type="text/css">
   <!--
   /* ... Definitions that are hard to override or get rid off are here ... */
   -->
   </style>
   

   This is another example how you should not do it:

   <link rel="stylesheet" type="text/css" href="style.css">
   

   Do it right

   WP uses a “dependencies” API for managing script and style files. This means that you

   1. Register
   2. Enqueue
   3. (optionally, and for scripts only) Localize

   This means that you first go and register a script for further usage and then enqueue it. This way you can register a stylesheet or script in your parent theme or plugin and later on enqueue it and print it to your webpage on demand.

   How to prevent caching

   This API as well has one nice little argument for versions. This means, that you have a variety of options how to update your browser or server cache, as the version gets added to the query string when loading the file:

   • manually add a new version string every time you write an update
   • Using the date() or time() (or similar DateTime) functions to permanently update
   • Use filemtime( get_stylesheet_directory().'style.css' ) to **only change the version when you did an update.
   • And finally there’s the technique of “filename based cache busting” that actually alters the filename if there were changes. It needs some .htaccess modifications as well.

   Example

   This one’s taken from a plugin I’m currently developing:

   $file   = 'js/chained_selection.js';
   
   wp_register_script(
        $this->handle
       ,plugin_dir_url( __FILE__ ).$file
       ,array( 'jquery',  )
       ,filemtime( plugin_dir_path( __FILE__ ).$file )
       ,true
   );
   wp_enqueue_script( $this->handle );
   
   wp_localize_script(
        $this->handle
       ,"{$this->handle}_obj"
       ,array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
           ,'nonce'   => wp_create_nonce( $this->ajax_nonce_val )
           ,'action'  => $this->action
       )
   );
   

   When to load the stylesheet/script

   Normally one simply wraps the register/enqueue/localize statements into a function or class method. To allow others jump in at the right point, the hooks used for styles and scripts are the following:

   • admin_enqueue_script // Admin UI
   • wp_enqueue_script // Themes
   • login_enqueue_script // Login pages

   Log in to Reply

2. Ok, so what I did to fix it, is add a functions.php to my child-theme, and added the following:

   <?php
   function my_theme_styles() {
       wp_enqueue_style('my-theme-style', get_stylesheet_directory_uri(). '/style.css', false, date('h:i:s'));
   }
   add_action('wp_print_styles', 'my_theme_styles');
   

   So it loads the stylesheet twice, which is not ideal, but while the site is being developed, it helps keep the stylesheet fresh.

   Log in to Reply