Attributing a version number to a child theme's main stylesheet

Question

In header.php, I like to attribute a version number to the stylesheet so that the browser gets forced to refresh it. But when working with a child theme, its stylesheet is not explicitely called, rather WordPress automatically seeks it. So how or where to attribute a version number to the child theme's stylesheet?

Answer 1

You can update the version in the child themes style sheet itself...

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.1.2 <---- Update here
*/

Answer 2

I think the best way to do this is to leave the child theme stylesheet (style.css) empty with only the necessary comments (like theme name, description etc, so can wordpress recognize your theme) and then make another css file in your-theme-name-folder/css/main.css

After that on function.php you can have a new "version" every time you change your file :

function my_scripts_and_styles(){

$cache_buster = date("YmdHi", filemtime( get_stylesheet_directory() . '/css/main.css'));
wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/css/main.css', array(), $cache_buster, 'all' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles', 1);

The logic:

Every time you save the file the modified time of the file is being changed. The new time is being passed to date function to convert the time(filemtime returns an integer representing the time) to date format to make it a string in the format you desire. In our example the time is being formatted with accuracy of minutes. You can change it to track even second ie "YmdHis".After that the new modified time of the file is being passed as a new version to wp_enqueue_style.

Reference :

http://www.php.net/filemtime

http://php.net/manual/en/function.date.php

Answer 3

What you need to do is de-register the main style by handle and then re-register with your version number. In this case the handle is style-css.

You can determine the handle that you need to use by looking at the rendered stylesheet link:

<link rel='stylesheet' id='style-css-css'  href='http://site-url/wp-content/themes/child-theme/style.css?ver=4.6.1' type='text/css' media='all' />

Here the id is style-css-css which means our handle is style-css

Put this in the function.php of your child-theme:

function wpse_145141_change_style_version(){
    // First de-register the main stylesheet
    wp_deregister_style( 'style-css' );
    // Then add it again, using your custom version number
    wp_register_style( 'style-css', get_stylesheet_uri(), array(), "VERSION_NUMBER" );
    //finally enqueue it again
    wp_enqueue_style( 'style-css');
}

add_action( 'wp_enqueue_scripts', 'wpse_145141_change_style_version');

Answer 4

The current top answer is theme dependent, as it requires the theme developer to have made that child theme version number into a variable and then appended it to the child style.css when enqueuing it. I've seen this on some themes, but not many. The following works on any theme that registers the child styles in functions.php - won't work with the old @import rule, which I haven't seen much any more.

In functions.php of the child theme, you should have something similar to this:

// enqueue the child theme stylesheet

function wp_schools_enqueue_scripts() {
  wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css'  );
  wp_enqueue_style( 'childstyle' );
}
add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

If you change it to the following, it will append a timestamp as a version number each time the file is saved, allowing each change of the stylesheet to bust through local cache:

 // enqueue the child theme stylesheet

 function wp_schools_enqueue_scripts() {
   wp_register_style( 
     'childstyle', 
     get_stylesheet_directory_uri() . '/style.css', 
     array(), 
     filemtime( get_stylesheet_directory() . '/style.css' ) 
   );
   wp_enqueue_style( 'childstyle' );
 }
 add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);

---

Hope this helps someone. I use this on every site that I actively manage.

Answer 5

Instead of using the default style.css I typically use wp_enqueue_style in the child theme's functions.php or another included php file. So, you'd still have the style.css in the child theme with all the child theme details but then you can have a separate css file in the child theme for the actual child theme styling (I usually put this in an assets/css directory within the child theme). This would also allow you to set the CSS version with the 4th parameter. For example:

function theme_name_child_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_directory_uri() . '/assets/css/child-style.css', array(), '1.0.0', 'screen');
}

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts' );

You can add a priority to the action if it's not loading in the correct order or work with the dependency parameter in wp_enqueue_style above:

add_action( 'wp_enqueue_scripts', 'theme_name_child_scripts', 20 );

Answer 6

Use filemtime to version by file change. Deregister and enque style.

1. Look in the source (ctrl + U) and find child's css id without "-css". Here it's voyager-default

<link rel='stylesheet' id='voyager-default-css' href='/wp-content/themes/voyager-child-theme/style.css?1606484598' type='text/css' media='all' />

2. Use this code (source) but replace 'style' by the found string (here 'voyager-default')

Child theme's functions.php

function add_timestamp_to_childtheme_stylesheet() {
    wp_dequeue_style( 'style' );
    wp_deregister_style( 'style' );
    wp_enqueue_style('style', get_stylesheet_uri().'?'.filemtime(get_stylesheet_directory().'/style.css'), array(), null);
}
add_action( 'wp_print_styles', 'add_timestamp_to_childtheme_stylesheet' );

Answer 7

I believe that if you use the Wordpress theme editor to edit your child theme's stylesheet that it automatically appends a new version number each time you save the file.