automating css version

  • Resolved SaladGoat

    (@saladgoat)


    3 years, 8 months ago

    After changing something in css, I will go to the page and do a force-reload (CTRL+F5) to make it reload the stylesheet so I can see if it worked.

    Unfortunately, that is not an available option on my iPhone, so it’s difficult to see if the changes I made work there.

    One solution is to change the version number on the stylesheet, but I can never remember to do that, after various minor tweaks.

    So I found code online that will automatically change the version number, based on the save date/time, I think. ???♂?

    I couldn’t find the code that calls the child theme stylesheet, so assumed it is called by wp_head, so placed this new code after that, knowing it would load the latest css.

    It’s only just now that I am realizing it’s loading the css twice. And I just read that you shouldn’t put anything after wp_head except the closing head tag. Oops.

    So what can I do with this magic code that works so well? This is the code I put in my header.php:
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?v=' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

    This is what is in my child theme’s functions.php regarding stylesheets:

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

    I’m assuming there is a way to incorporate the first code with the second, but the second appears to only call the parent stylesheet, so I’m lost now as to how to apply this automated versioning to the child stylesheet.

    Please help?

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

  • I couldn’t find the code that calls the child theme stylesheet

    It is likely that the parent theme is using get_stylesheet_uri() which is lazy and makes the child theme author have to do the work. It will load the parent stylesheet if there is no child, but it will load the child stylesheet if there is one, and then the child theme has to load the parent stylesheet. This is the worst situation, because any parameters that the parent theme used are ignored.

    If you read the page about child themes, there is a more complete explanation.

    For version numbers, the fourth parameter for wp_enqueue_style is the version number to put onto the URL. It defaults to the WP version, though, so that doesn’t help when you make more frequent changes. You can use a number that you change manually, a function to get the number out of the style.css file, or the modified time on the file like you want. The file time is said to be the slowest, although I haven’t measured it.

    Thread Starter SaladGoat

    (@saladgoat)

    It seems as if every time I create a child theme, the rules are different. I don’t know what I am doing, so I always go to that Child Theme page on WordPress to follow the steps. And every time, it’s different. The code I posted is what they had when I made the site, maybe five years ago. Before that it was something like @import in the child theme’s stylesheet to import the parent stylesheet. And now it’s different again. So I changed it to the current way, but that didn’t help with what I needed, which is to add the time/date as a version number.

    But with this new information, I was able to find the correct keywords to google the solution. For anyone interested, I used the second code listed on the Child Themes page, and modified the second part:

    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; 
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  
        $theme->parent()->get('Version')
    );
$themecsspath = get_stylesheet_directory() . '/style.css';  // this is added
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
    filemtime( $themecsspath )  // this replaces the get('Version') line
    );
}

    So the parent style shows the version listed in its file: 1.0.17
    And the child style shows the version derived from the creation time/date of the file itself: 1617237081

    Hope this helps someone, and thanks to @joyously for pointing me in the right direction. ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘automating css version’ is closed to new replies.