0

I am struggling with css caching on my wordpress theme. I am trying to change the version of css, but no matter how I do it, it still won't print css version on staging (testing) enviroment. I can see the version of css on my local enviroment but nothing happens on staging:

in my style.css file i added this version: Version: 1.0.2

in my functions.php, this is what I have:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->Version); //gets version written in your style.css 

and later when I enqueue CSS:

function front_assets_load() {
    if (is_admin()) return;
    /* Enqueue theme script & style */
    wp_enqueue_style('main', get_template_directory_uri().'/assets/css/main.css?ver=', [], THEME_VERSION, 'all');
}
add_action('wp_enqueue_scripts', 'front_assets_load'); 

But the version is still not there, this is my output:

enter image description here

no version!

I'm still not sure if the caching problem would be fixed if the version was printed, I think it would, but not sure why can't the version be printed on this testing enviroment, any ideas?

2
  • 1
    Are you using a caching plugin and if so, which one? If the HTML has been cached, the version number here won't matter until the page cache has been cleared.
    – AuRise
    Sep 14, 2022 at 14:23
  • 1
    Are you sure you should be using $theme->Version and not $theme->get('Version')?
    – vancoder
    Sep 14, 2022 at 16:06

1 Answer 1

0

To answer the question why you can't add the theme's version to your CSS file, it's likely because the Version property of $theme is private so you cannot access it directly, but you can access it through the public get function. Try this instead:

$theme = wp_get_theme();
define('THEME_VERSION', $theme->get('Version'));

You also don't need to add the query to the end of your file when enqueing. Simply adding a valid version to the wp_enqueue_style() function will automatically append it.

wp_enqueue_style(
    'main',
    get_template_directory_uri().'/assets/css/main.css',
    array(),
    THEME_VERSION,
    'all'
);

However, if this still doesn't solve your caching issue for the dev/testing environment, I'll use this for file versioning when enqueing my assets:

function front_assets_load() {
    if (is_admin()) return;

    /* Enqueue theme script & style */
    wp_enqueue_style(
        'main',
        get_template_directory_uri().'/assets/css/main.css',
        array(),
        filemtime(get_template_directory().'/assets/css/main.css'),
        'all'
    );
}
add_action('wp_enqueue_scripts', 'front_assets_load');

The filemtime() will output a timestamp of when the file was last modified, so everytime you update the file in your testing environment, it will also update the version number and hopefully force your browser to get a non-cached version of it.

2
  • Hi! Thank you for your answer! I think the last option might help me on production but still no luck with showing the css version on staging/testing env, it still won't print it, when i check page source, it still says: assets/css/main.css' media='all' /> css is still cached until i manually clear it on staging..nerve wracking@
    – MGmgmgmg
    Sep 14, 2022 at 14:10
  • @MGmgmgmg Do you see anything different when you use this? wp_enqueue_style('main', get_template_directory_uri().'/assets/css/main.css', array(),'test'); If not, I'm wondering if the HTML output has been cached. Try adding ?nocache=1 to the URL in your browser (works for some host providers like GoDaddy)
    – AuRise
    Sep 14, 2022 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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