Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

5 Answers 5

up vote 1 down vote accepted

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
*/
share|improve this answer
    
Are you positive that this will necessarily flush any cached stylesheet and force the new version to be loaded, just as when adding a version number in header.php? –  drake035 May 30 at 10:35
    
Yes, if you look at the page source you will see the query string updated as you change the version number within your child themes style.css –  Matt Royal May 30 at 11:36
    
Awesome. Did I start a bounty for this question? Matt let me know, if so I'll start it again and grant it to you. Thanks! –  drake035 Jun 10 at 11:59
    
@drake035 You did, yes. That would be great, thanks man :-) –  Matt Royal Jun 10 at 13:37
    
I realize I can only start a 100 bounty now, the 50 option disappeared from the list. 100 is a third of my reputation, a little too much... Really sorry! –  drake035 Jun 14 at 18:22

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.

share|improve this answer
    
Right but I don't use the WP editor to work on my stylesheets.. –  drake035 May 26 at 18:23

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 );
share|improve this answer

What you need to do is de-register the main style which has the handle style-css and then re-register with your version number:

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_head', 'wpse_145141_change_style_version');
share|improve this answer

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_template_directory_uri() . '/css/main.css'));
wp_enqueue_style( 'main', RLP_CSS_URL . 'main.css', array(), $cache_buster, 'all' );

}

add_action( 'wp_enqueue_scripts', 'rlp_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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.