Update (31 December 2015): Although I have used AJAX with different challenges on other sites hosted on WP Engine (let me know if you want the code), in the example below I ultimately did it in a different way.
Simply put, I used all the good stuff on cookies from Paul Underwood (and it works great) but simply asked WP Engine support (via live chat) to exclude my particular cookie from their caching. And – hey presto – it works great.
This was not out of a laziness to use AJAX, it was the best solution for this particular problem.
I plan to come back and completely re-write this post in future (please don’t consider the example below in any way complete in the meantime) but I’m leaving this note here for now in case a) I never get around to it and b) I’ve had quite a few people email me about this.
PS If you are looking for a ‘proper’ cookie busting with AJAX on WP Engine example, check out this post.
That nice chap Jared Atchison reminded me of a little challenge I overcame recently…
@WPESupport I'm pretty sure I know the answer to this, but does your caching system allow using $_COOKIE ?
— Jared Atchison (@jaredatch) September 17, 2013
…when working on a website that is hosted on WP Engine (and uses their caching system for high performance) but still needed to use cookies.
Why use cookies at all?
In this case I was using cookies to determine an ‘edition’ for a user (e.g. New York, Miami, Austin) and then show different sidebar content and ads to that user based on their edition.
In my example a user’s edition was determined by the first page they visited on the website (the New York homepage, the Miami homepage etc) but of course this is just one example and Jared might have been doing something completely different.
The point is the theory is the same though so…
Why is this a challenge with caching?
The way cookies work is that they are assigned to individual users. That way both you and I can be looking at this article right now and the page could display different content if I have a cookie set to ‘A’ and you have a cookie set to ‘B’.
In other words, the website checks for a cookie and, if it finds one, it applies a certain set of rules to the content that it loads for that user.
This can be a challenge with caching though because, when a page is cached all the content on it is generally pre-calculated and formed before the user even arrives on the page (the benefit being the website will generally load faster and we won’t be hammering the server as hard).
Sounds good.
The problem for us in our cookie scenario though is we don’t the page to be fully formed when it arrives.
We want some calculations about the parts of the page that are going to be influenced by our user’s cookie to take place as the page is loading, but at the same time we don’t want to turn off the benefits of caching.
So how do we get around this?
By using Ajax (don’t worry if you don’t know what that is, for now just know that it works) in conjunction with WordPress and our cookies.
How to do it
#1 Set the cookie
First of all we’re going to use Paul Underwood’s awesome Cookies with Javascript article to setup our cookies (you’ll be wanting to follow the code and examples from the second half of it).
So in my example let’s say we’ve completed Paul’s steps and set a cookie with a key of ‘edition’ and a possible value of several different locations (New York, Miami etc) depending on which page of the website they land on first.
#2 Write our WordPress function as usual
Now we’ve got our cookie setup we can, as Jared suggests, use $_COOKIE in our PHP to do some cool stuff with it.
For example if a user has a cookie show sidebar ‘A’, otherwise show sidebar ‘B’.
Or if a user has a cookie set to a value of ‘New York’ show the New York sidebar. If the user has a cookie set to a value of Miami show the Miami sidebar otherwise just show the normal sidebar.
Here is an example of how you might achieve that in your code:
[gist id=6822613 file=sidebar.php]
Now if you’re not using any caching on your site you can probably go ahead and use that code right there (adapted to your needs) but in our scenario we want to use caching (specifically that provided by WP Engine) with our new functionality or it’s no good to us.
To do this we’re going to…
#3 Apply some Ajax magic
Now this is actually really easy thanks to the fact that WordPress already plays nicely with Ajax.
In our example in fact we just add one or two lines to the code:
[gist id=6822613 file=ajax-call.php]
In my example I only needed the cookie for logged out users (i.e. those not logged into the WordPress admin screens in some way) so I just used the second line, but I include both for completeness.
This then gives us a complete function of:
[gist id=6822613 file=sidebar-ajax.php]
You can get more information on this with WP Engine’s own guide on the subject ‘Cookies and PHP Sessions‘.
How was it for you?
This is actually the first time I’ve done a blog post with fancy embedded Gists etc (inspired in particular by Bill Erickson’s blog) so I really appreciate any constructive feedback on anything above.
I realise also there is more than one way to achieve the same thing (I want to do another article soon on how to achieve the same for logged in users without a cookie, as I’ve done this too).
My goal with the code above is you don’t take it as a literal example (the code I used for the project was quite different and more complex) but just to give you the theory behind it so you can know what is possible and adapt it to your needs.
OK, enough disclaimers and warnings, I hope you find it useful for your project and if it helped you please give me a shout in the comments below or on Twitter.
