Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1013304

    adaptifyDesigns
    Participant

    Hi, I am using my own child theme with X. I would like to be able to add my own version number query string to the child theme’s stylesheet.

    The problem I’m having is that because the version number only changes when the parent X theme is updated, this means that when I make changes to my child theme’s stylesheet most returning visitors’ browsers will not cache bust the stylesheet, therefore serving them an outdated version.

    If I could update the version number of the stylesheet, then most browsers would cache bust it and serve the correct/current version (without me having to ask visitors to “hard refresh”).

    I found this article on how to do it, but I’m not sure how to integrate this with the X theme x_enqueue_parent_stylesheet filter.

    Can you provide a little guidance on how to accomplish this without conflicting with any X theme functionality?

    Much appreciated.

    #1013886

    Rad
    Moderator

    Hi there,

    Thanks for writing in.

    It’s under \wp-content\themes\x\framework\functions\global\enqueue\styles.php ( X_VERSION ) but if I were you, I’ll use this method http://www.ipserverone.info/programming/how-to-prevent-http-file-caching-with-htaccess/ if I just wish to disable caching.

    Cheers!

    #1014036

    adaptifyDesigns
    Participant

    I don’t want to disable caching. And I also do not want to edit any parent theme files. I am hoping for a method for controlling the version query string of my child theme’s style.css file, independently of the X theme version.

    I tried today to dequeue the child theme stylesheet, and then enqueue it again with my own handle, but I could not get it to work. I was able to dequeue the ‘x-child’ handle, but was unable to enqueue it again under any handle. This is what I tried:

    
    function wuwo_theme_styles() 
    {
      // de-register the child theme stylesheet registered by X theme:
      wp_dequeue_style( 'x-child' );
      wp_deregister_style( 'x-child' );
    
      $theme_version = wp_get_theme()->get('Version');
    
      // Register and Enqueue our style.css with our own handle and version:
      wp_register_style( 'wuwo-styles', get_stylesheet_directory_uri() . '/style.css', array( 'x-customizer', 'x-stack' ), $theme_version, 'all' );
      wp_enqueue_style( 'wuwo-styles' );
    }
    // Enqueue this theme's scripts and styles (after parent theme)
    add_action('wp_enqueue_scripts', 'wuwo_theme_styles', 99);
    

    I used the same method when enqueuing my custom javascript file, and the version number is correctly printed as the number written in my child theme’s style.css. So I know that this method works, but for some reason it is not working when I try to enqueue the style.css file itself. Any ideas why this method wouldn’t work? I even tried to override the x_enqueue_site_styles() function by copy/pasting it into my child theme’s functions.php, but this also did not work. I am a bit confused as to why not.

    Can you help me find a solution to this?

    Thank you.

    #1014110

    Rue Nel
    Moderator

    Hello There,

    Please have your code updated. You can make use of this code instead:

    function wuwo_theme_styles() {
      // de-register the child theme stylesheet registered by X theme:
      wp_dequeue_style( 'x-child' );
      wp_deregister_style( 'x-child' );
    
      $theme_version = wp_get_theme()->get('Version');
    
      // Register and Enqueue our style.css with our own handle and version:
      wp_register_style( 'wuwo-styles', get_stylesheet_directory_uri() . '/style.css', array( 'x-stack' ), $theme_version, 'all' );
      wp_enqueue_style( 'wuwo-styles' );
    }
    // Enqueue this theme's scripts and styles (after parent theme)
    add_action('wp_enqueue_scripts', 'wuwo_theme_styles', 99);

    Please let us know how it goes.

    #1014414

    adaptifyDesigns
    Participant

    Ok, I see. I cannot have ‘x-customizer’ as a dependency because that handle actually doesn’t exist, correct? I didn’t realize that. I also tried having ‘x-generated’ as a dependency, but that also didn’t work. It would be nice to have my stylesheet load after the x-generated css, but if that’s not possible, so be it. I’ll make do.

    Thank you very much for your assistance with this!

    I have one final question. The above code works. It successfully enqueues my child theme stylesheet (with the correct version) after the ‘x-stack’ stylesheet. Now I’m wondering if I need this line anymore:

    
    add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );
    

    I tried loading the site with and without it, and it didn’t seem to make any difference. What would you recommend?

    Thank you again for your help, and your quick responses!

    Cheers,

    – colin

    #1014668

    Rad
    Moderator

    Hi there,

    It should be there, parent theme contains the stylesheet needed by the child theme. You could be seeing cache that’s why it has no noticeable change.

    Thanks!

    #1014885

    adaptifyDesigns
    Participant

    ok. will do. thanks. although, I don’t think I was seeing a cache. I’ll just keep it just in case.

    Much appreciated.

    #1014943

    Christopher
    Moderator

    let us know if you need further assist.