Varnish and Preview Posts in WordPress

I wrote earlier that I started playing around with Varnish here on my site and that post has a little snippet that strips all incoming and outgoing cookies (except the admin of course.) Today I stumbled on a problem where I had no permission to preview a post I was drafting in WordPress and they all turned 404’s when I tried to.

I first thought Varnish was stripping out the preview query string but I was wrong, the problem was that WordPress knew I was logged in and editing the post when I were in the admin panel, but when I tried to preview it on the front end Varnish was stripping out my login cookies, hence it didn’t display my draft post.

Here’s a snippet for vcl_recv and vcl_fetch that should go before the unset cookies statement which passes the request to the web server if preview=true is found in the request URL.

if (req.url ~ "preview=true") {
	return(pass);
}

Restart the Varnish service and voila! Your cookies aren’t stripped out anymore and you can now preview your posts and pages. Do note though that if somebody manually types in the preview query string in the browser, they’ll by-pass Varnish as well.

Varnish and WordPress Comment Cookies

I wrote before that I’ve been running some experiments with Varnish lately. Not that I have huge traffic here but I’ve always used my own website to test things out. As I wrote earlier, the problem with WordPress and Varnish is that WordPress relies on cookies which create cache misses on Varnish and in that previous post I shared a snippet on how to strip all incoming and outgoing cookies, which hopefully solves one problem.

The second problem now is that cookies are disabled throughout the whole website (except the admin section of course) so if you’ve got commenters on your website, their browsers will no longer save their names and e-mails, so they’ll have to type them in every time they want to leave a comment. I agree it’s a pain, which is why I was searching for a solution, which turned out to be quite simple — handle it all on the client side using javascript.

So I wrote a little plugin which you can download and use. It simply enqueues a javascript file if the request is a singular page and comments are open. It passes in some cookie constants used by WordPress. The javascript itself hooks onto the submission of the comment form to create cookies and restores the form fields upon page load.

Note that the plugin can fail if you’re rendering your comment form differently (with different DOM IDs) from WordPress, and don’t forget to purge.url your Varnish cache after activating!

My website is now super-fast with Varnish

My website is now super-fast with Varnish — an open source HTTP accelerator which sits on top of your HTTP servers and serves your cached pages.

It didn’t take me longer than 20 minutes to get Varnish up and running on my Ubuntu VPS, and a few more minutes to set all my nginx configurations to port 8080, bringing Varnish to port 80. The problem with WordPress however, is that it heavily relies on cookies, resulting in almost no cache hits with Varnish. Here’s a little snippet for your Varnish configuration file that removes all cookies and still leaves your admin dashboard accessible:

# Remove all cookies sent to web server except for wp-login and admin
sub vcl_recv {
	if (!(req.url ~ "wp-(login|admin)")) {
		unset req.http.cookie;
	}
}

# Remove all cookies sent by web server except wp-login and admin
sub vcl_fetch {
	if (!(req.url ~ "wp-(login|admin)")) {
		unset beresp.http.set-cookie;
	}
}

Anyhow, even if you don’t look for the wp-login and wp-admin and clear out all cookies sent back and forth, you could still access your admin panel by asking for it directly from your webserver, i.e. from port 8080 (or however you have configured it) which will bypass Varnish.