9

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?

4

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
*/
  • 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 '14 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 '14 at 11:36
  • 5
    Does this still work? For me, changing the version in the child theme's style.css makes no difference - the style.css query string in the head still comes out as the Wordpress version number (in this case 4.1.1). – Tim Malone Apr 17 '15 at 8:24
  • 2
    It depends how your theme has been setup. Look down the page @kraftner answer. If your theme is de-registering and then re-registering the file then this wont work. – Matt Royal Apr 18 '15 at 8:24
  • 2
    Took another look and the default version is now based on the WP version. So this answer is no longer valid! (github.com/WordPress/WordPress/blob/…) – Matt Royal Apr 18 '15 at 8:39
9

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

  • 2
    I prefer using the theme version as cache buster. If you use $cache_buster = wp_get_theme()->get('Version') you'll get the version specified in the comment block in style.css. See codex.wordpress.org/Function_Reference/wp_get_theme for reference. – Marcel Stör Jan 2 '16 at 14:45
  • Nice didn't know the existence of this function. But again you have to change manually the version every time you make a change and it can be frustrated especially when developing (given cache issues). Also you are obligate to code in style.css even if you import your main.css file there, which btw I don't find it a good approach. Furthermore if you code in SASS it can be again difficult to maintain it. Finally I think is faster to check the file time than opening the file , reading the first comments and finding the version (I am not sure if wp_get_theme()->get('Version') works that way ). – Laxmana Jan 4 '16 at 19:18
  • True, but on the positive side you get better control over your styles. You can update the CSS incrementally and when you're satisfied with the result you can finally bump the version and "release" it. – Marcel Stör Jan 4 '16 at 19:28
  • 1
    "release" it to users who are returning to the site. new users see fresh whatever is in the file. – ryanrain Jul 22 '17 at 4:40
  • 2
    From an outside perspective id like to publicly say that Big17aw is clearly an ego douche – Patrick Sep 11 '17 at 16:12
8

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');
0

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.

  • 1
    Right but I don't use the WP editor to work on my stylesheets.. – drake035 May 26 '14 at 18:23
0

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 );
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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