I recently found the need to give AJAX abilities to a WordPress widget. Notably, I had a request from Kjell Martin Bovre of Scribo.no to allow ThinkTwit to update when used with a caching engine, for instance WP Super Cache. Caching engines work by converting the pages of a site in to HTML and, rather than loading the website code using calls to its database, calling these pages directly when a user makes a request.

The first time that a user visits a site with a caching engine the pages they visit will be converted to HTML. After a period of time these pages will get updated, but if you have a particular item on that page that should be updated more often this will not happen. One way to ensure this item is updated correctly is to enable it to use AJAX. The AJAX code will get called whenever the site is loaded, even in its HTML format – therefore it will work even when cached as the Javascript will make a server call, the server will respond with the up-to-date data and the Javascript will then update the HTML within that page.

After a good few hours research I was able to find a site that helped me do most of this, but there were some errors and it did not work with WordPress widgets as it would break their ability to create multiple instantiations. It was therefore necessary to update the code to allow this, so I thought I would just write a quick and easy guide to writing AJAX capable widgets to allow other developers to quickly and easily resolve this issue. I hope it comes in handy!

Continue reading →