21

I am working on the CSS of my wordpress site. When I make changes and refresh the page the changes are not reflected. When I clear the browser history and cache the changes are still reflected. When I view the source code of the page and look at the css file it has the old content before the change. How do I get this to update so I can develop?

4
  • Do you have a caching plugin running? Your CSS files could be cached on the server.
    – Pat J
    Jul 23, 2013 at 13:09
  • It does not appear I have a caching plugin. Jul 23, 2013 at 13:12
  • Does it work if you're not using WordPress? For instance, a file called test.html and an associated .css file?
    – Pat J
    Jul 23, 2013 at 15:02
  • If either of the answers helped you solve the problem, please make sure to accept it!
    – mrwweb
    Aug 26, 2014 at 23:25

11 Answers 11

20

Add a random version number at the end of the css file you are attaching. If you are using 'wp_enqueue_style' or wp_register_style functions, pass a random (version) number rand(111,9999) to 4th parameter. If you are attaching css as an html tag, you should add "?ver=<?php echo rand(111,999)?>" at the end of the file name. Examples are here

wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), rand(111,9999), 'all' );

or

<link rel="stylesheet" type="text/css" href="http://website.com/css/custom-style.css?ver=<?php echo rand(111,999)?>">

It will avoid caching on client end caching and possibly server caching too.

1
  • 1
    What file contains these functions so we can do the edit?
    – Sam
    Oct 4, 2021 at 19:37
10

I know this post is over a year old but I thought I would mention that CloudFlare caches static files such as css, js and images to aid in faster loading times. Something I just took hours to figure out, since I was having issues with my css changes not reflecting on reloading. CloudFlare has Development mode that you can enable for 3hrs. If you forget to enable it before you start making modifications then you can purge cache from cloudflare management.

2
  • 1
    CloudFlare thinks if there is ?ver= then file can't be updated.
    – Artem P
    Apr 20, 2016 at 10:40
  • R u telling that every time I make a change in CSS, javascript, I need to purge the Cloudfare cache ? What does this development mode do actually ? Thnx
    – Tanvir
    Jul 3, 2017 at 14:31
1

I have this problem too and had tried the most voted solution here but didn't work. You can do simple tricks like I did.

Override the css you want to change into Themes > Customize > Custom CSS in your dashboard.

Eventually the css will be updated. Then you can delete it again.

1
  • That is certainly the cleanest if you don't have too many changes to make. Jan 25 at 18:05
0

It is possible that your host is using something like Varnish to cache your site's output. I ran into this with a client's site hosted on a cut-rate shared hosting account. The only remedy I found was to just be patient.

0

If you are using a child theme, its possible that you need to enqueue the child theme stylesheet in order to see the changes immediately. This solved my issue.

0

Just want to point out - be sure to be mindful of any caching plugins that you have installed. WP Fastest Cache, for example, can create this problem if you don't remember to log into the WP dashboard and click on "Clear Cache --> Delete Cache and Minified CSS / JS" up in the nav menu.

0

This maybe old. But I need to support someone who may looking for a help. I had the same problem and I checked my plugins. There was "w3 total cache" plugin that speedsup loading. That is server side cache plugin so I disabled it. The css changes are visible again realtime. There are lot of loading booster plugins. So check your plugin list and disable them until you finish the development.

0

Modify this according to your need, works like a charm, generates random version number each time you reload the page, perfect for development :

wp_enqueue_style('mypluginstyle',  plugins_url('/assets/mystyle.css', __FILE__), array(), rand(111,9999) );
3
  • That's the same as the accepted answer I think?
    – Rup
    Jul 4, 2021 at 13:39
  • @Rup yes please, had not seen the example properly Jul 5, 2021 at 16:01
  • And like in the accepted answer you don't say which file needs to be edited... Jan 25 at 17:58
0

Please change the version in top of style.css file (location ..wp-content\themes\theme_name\style.css) to a newer.

/*
Theme Name: SF TEST
Version: 1.0.1
*/

Like this 1.0 to 1.1 or 1.0.1.

also, change the version in fuction.php file for that CSS file

wp_enqueue_style('style', get_template_directory_uri() . "/assets/css/style.css", array(), '1.0', 'all');

here change '1.0' to newer version like '1.1'

2
  • Could you give an example of now and where you change this in function.php?
    – Sam
    Oct 4, 2021 at 19:49
  • wp_enqueue_style('style', get_template_directory_uri() . "/assets/css/style.css", array(), '1.0', 'all'); here change 1.0 to newer like 1.1
    – SF007
    Oct 28, 2021 at 9:48
0

I know this question already has an accepted answer that works fine, but I wanted to mention another solution that's a little simpler.

When enqueue-ing, use the PHP function time() to grab the current time and use it as the version. You're enqueue will look something like this:

wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/style.css', array(), time() );

And if you're loading the stylesheet with html, your code will look like this:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri ?>/style.css?ver=<?php echo time() ?>">
-1

It is on the Privacy Settings of the browser that you are using. just turn off the section that said:

Preload pages for faster browsing and searching Uses cookies to remember your preferences, even if you don’t visit those pages

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.