Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Is there a simple way do prevent all caching when testing the appearance of changes to the site? I use WP Super Cache. I can delete its cache using the option provided, delete the cache for my browser, and still some changes to css or widgets do not refresh. I try other work-arounds like switching browsers or computers, but there must be a more stream-lined workflow where I can ensure I'm viewing the changes I made and not some cached earlier format? What's the best solution for this?

share|improve this question
    
It seems there are also several plugins just to do this for CSS. Is it really necessary? Do those plugins do something that clearing browser cache does not? –  cboettig Jan 30 '12 at 17:53
    
In my case it turned out I had to clear the cache created by the DNS provider (cloudflare). Thanks all for the suggestions below though. –  cboettig Jan 30 '12 at 23:35
    
I use Chrome browser; Its incognito window comes handy, when I come across browser level cache issues during development. –  Joseph Kulandai Nov 8 '13 at 6:47

7 Answers 7

up vote 14 down vote accepted

Add the filemtime() of your stylesheet as a parameter:

<link rel=stylesheet href="<?php 
    echo get_stylesheet_uri() 
    . '?t=' . filemtime( get_stylesheet_directory() . '/style.css' ); 
?>">

Result:

<link rel=stylesheet href="http://example.com/themes/your-theme/style.css?t=1327543705">
share|improve this answer
    
Would you mind explaining what this does and where you propose adding this? –  cboettig Jan 30 '12 at 17:55
    
You would add it as the version where you enquque or directly <link rel="stylesheet" type="text/css" href="style.css?=t<?php filemtime( 'style.css' ); ?>" /> –  m0r7if3r Jan 30 '12 at 18:22
    
@cboettig I made it more explicit. Better now? –  toscho Jan 30 '12 at 21:09
1  
+1 The only valid answer to this Q. –  kaiser Jan 30 '12 at 22:02
    
Many thanks. It appears this is also the approach of the above plugin. It did not solve the problem in my case because my DNS provider (CloudFlare) was caching the css file, so I had to clear the cache there -- guess there is no simple way around that. In general though, I think this is the best answer to this kind of issue so I'll mark accepted. Thanks again. –  cboettig Jan 30 '12 at 23:33

This might seem overly simple, but how about just disabling caching until you're done with the development portion of your site? It's more than simple to turn on and off.

share|improve this answer
2  
+1 - I use "Web Developer" toolbar for Firefox, allows you to very quickly disable cache (among other things) –  Shane Jan 30 '12 at 17:44
    
Thanks - is it only necessary to disable the browser's cache? Will WP superCache still result in providing cached content? Even my DNS service caches, so I am uncertain if I need to disable every cache (WP, browser, DNS, etc) separately. –  cboettig Jan 30 '12 at 17:48
    
Sorta depends, you'll have to play around with it and figure out what you need to do for your configuration. –  m0r7if3r Jan 30 '12 at 18:23
    
Im with him, just disable it, thats what I do. –  matt Jan 30 '12 at 23:07

I know that this question has had an answer accepted, but I think that that answer is still too complicated for the problem at hand, and may actually be incorrect depending on the user (no offense though), so I thought I'd still share how I bypass caching when I do my dev (not just with Wordpress).

Most modern browsers have something called incognito mode. In this mode, nothing in your computer is cached, so every refresh is a fresh slate download off the server. In Internet Explorer you press Ctrl + Shift + P. In Firefox and Chrome, you press Ctrl + Shift + N.

If your browser doesn't have incognito mode, you can normally force a hard reload by pressing Ctrl + F5 for IE, or Ctrl + Shift + R on Firefox and Chrome.

As for your question regarding the CSS files (and essentially, all your asset files, like images and Javascript files), those aren't cached in any way by WP Super Cache. Your settings and/or use of this plugin does not affect how those files are served. What's caching those files are your browser, and that's the reason why you do a hard reload.

What the plugin does is it evaluates how Wordpress builds your HTML files (via PHP), and stores a copy, so that the next time someone requests the same post, page, or whatever, it serves the copy, and won't have to reevaluate the PHP-generated HTML again, and therefore save some computing time, loading your pages that much quicker. (I hope that's clear.)

The problem with that is, if you're slapping on a timestamp on your CSS files' URL via a PHP function, that is a PHP evaluation to HTML, and that will be cached by WP Super Cache. Every request to the same post will have the same timestamp because users are being served a copy of the original timestamp evaluation. (Correct me if I'm wrong.)

The correct way to bypass WP Super Cache's caching is to set the option Don't cache for known users to true in the plugin's setting page.

Finally (and this is a personal preference, as I'm a real stickler when it comes to coding), resorting to the use of incognito or forced hard reloads won't require you to add unnecessary markup on your HTML pages. Of course, adding a timestamp only adds about 13 bytes per static file per request, but hey, like I said, I'm a stickler for this kind of stuff. It's still 13 bytes unnecessary.

share|improve this answer
    
Thanks for the useful tips. Unfortunately none of the answers here are correct in my case, since my solution required clearing the cache of the Domain Network Service provider, cloudflare, but many were still good information. –  cboettig Feb 1 '12 at 19:50

HyperCache disables caching when you're logged in as an admin. Not sure whether WP Super Cache has the same functionality.

share|improve this answer
    
There is an option for that, yes. –  Matthew Boynes Jan 30 '12 at 21:53

Gosh, many ways to answer this one! First and foremost, you asked about two different things: WP Super Cache and CSS files. These are cached differently, in different places, so it's important to recognize where your problem is.

If WP Super Cache, you can define the constant DONOTCACHEPAGE in your functions.php during development to prevent WP Super Cache from caching anything. Don't forget to remove this on launch though!

define('DONOTCACHEPAGE', true);

Each site also has a unique key to append to the URL to load a fresh version of the page, which you can find in the "Advanced" tab, I believe.

Breaking it down to an even better solution, you should consider setting up a development environment and a production environment, where your development environment doesn't have WP Super Cache enabled (again, assuming that's your problem).

If your issue is with CSS/JS files, then see the answer by toscho and subsequent comment by m0r7if3r above.

share|improve this answer

If you're using Chrome (which I highly suggest), open Inspector, click the settings icon in the lower right corner, and under "Network" select "Disable Cache."

share|improve this answer

After searching for a simple solution many times i decided to find something that works!

so... after thinking about it i found a great way to override caching while developing new websites... (and its easy).

What we need is to tell wp this is a new CSS version like this...

Before changes:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

After changes:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

This is what we added:

?v='.time()

Explanation:
We are basically adding a dynamic version number to the css file which forces the browser to load the new css every time we update it.

Don't forget to remove it after your done developing otherwise your caching won't work for this file and it would load for returning users again and again.

This technique works for css & js files - hope this helps ;)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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