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?
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' );
<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.
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.
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.
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'
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() ?>">