New Custom CSS Version: Force to refresh in Browsers!

Support
#1

Hi there!

I have read several posts on this topic in this forum, but I found no solution. Can You help me please forcing a style.css update in the browser cache of the user with X Pro? (Every time after I make CSS updates)

I have the following setup for my custom CSS:

This are the CSS files in the child theme folder
custom-x-theme-style.css
custom-gravity-forms-style.css
custom-slider-revolution-style.css

This is how I enqueue the CSS files via functions.php

 function child_enqueue_styles() {

        	wp_enqueue_style('custom-x-theme-style', get_stylesheet_directory_uri() .'/custom-x-theme-style.css', array());
        	wp_enqueue_style('custom-slider-revolution-style', get_stylesheet_directory_uri() .'/custom-slider-revolution-style.css', array());
        	wp_enqueue_style('custom-gravity-forms-style', get_stylesheet_directory_uri() .'/custom-gravity-forms-style.css', array());
    }
add_action('wp_enqueue_scripts', 'child_enqueue_styles');

Any kind of help would be nice.

#2

Hi @Finlando,

Thanks for reaching out.

You can try adding version every time you apply changes, example

wp_enqueue_style('custom-x-theme-style', get_stylesheet_directory_uri() .'/custom-x-theme-style.css', array(), '1.0.1');

The version if applied to the URL in which browser may recognize as new, hence, it’s forced to download that copy instead of using the same cache of the same version. If you fail to change the version then it will use the one with of the same version of cache. Example, you fail to change it from 1.0.1 to 1.0.2, then it will still use the 1.0.1.

Thanks!

#3

Hi @Rad,

Thanks a lot for clarification.

In my case the browser fails to download the new version…:

wp_enqueue_style('custom-gravity-forms-style', get_stylesheet_directory_uri() .'/custom-gravity-forms-style.css', array(), '2.0.1');

Did I miss something?

And what about the modifications in the Header, Content and Footer Pro Editor? How we force them to be rewritten.

Sorry for bothering, but that is a big question for me and my clients during and after finishing the project. They keep telling me, that they can’t see the changes. :joy:

Thanks!

#4

Hi Finlando,

Did you sort it out? I could see that the vesion 2.0.4 of CSS file is loading on your website right now:

https://***.de/wp-content/themes/pro-child/custom-gravity-forms-style.css?ver=2.0.4

Regards!

#5

Hi @thai! Hi @Rad!

Thanks a lot for Your help!

I can’t sort it out. The styles in the front end are the old ones if viewed in normal mode.

In incognito mode everything looks fine and refreshed…:

I have to figure out, how to get the browser in normal mode to grab the new CSS versions - not the cached ones. It seems to be loading, but the old cached version is rendered in the front end…:

Thanks!

#6

Hi @Finlando,

Please try contacting to your hosting provider to completely turn off the server cache.

Also try clearing your Google Chrome browser cache as well.

Let us know how it goes!

#7

Hi @thai! Hi @Rad!

Thanks for Your advice @thai!

You can’t expect every average web user to keep refreshing the browser cache until things straighten out. (After rebranding the whole page.) I never saw a serious website asking me for refreshing my browser cache to be able to enjoy the new button styles.

Is it possible to implement something like the following solution, which would force the browser to download the new version?

<link rel="stylesheet" href="style.css?v=1.0.1">

Thanks!

#8

Hi @Finlando,

This code looks good:

wp_enqueue_style('custom-gravity-forms-style', get_stylesheet_directory_uri() .'/custom-gravity-forms-style.css', array(), '2.0.1');

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

#9

Hi @thai!

Sure thing…

Thanks!

#10

Hi @Finlando,

I checked on two computers and three different browsers, your css is loading fine on my end in normal browser.

Are you still having issues in your end? Try to change the version number in your code.
Browser cache will eventually refreshed depending on the time it was set to expire but if you want your changes to take effect instantly, you need to clear your browser cache manually.

Thanks

#11

Hi @paul.r,

You checked the site on computers, where the old CSS version is not cached.

I am going to hire an expert for this. If we find a solution, I’ll share it…

Thanks!

#12

Hey @Finlando,

Please let me clarify first that investigating custom setups is not a part of our support service. Since we haven’t cached your site, we really have no means to check if our suggestion works. Just looking at the setup, it seems correct.

I’m sorry but I don’t have anymore suggestions other than you read these 2 cache busting methods article:

If those articles doesn’t help, please consult with a third party developer.

Thank you for understanding.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.