Four Cool Ajax Plugins for WordPress

WordPress is probably the most popular free software solution for publishing and managing a dynamic personal Web site. It installs easily and quickly, it has a lot of plugins that extend its functionality, and it can be used with practically every Web hosting provider on the planet. Ajax (Asynchronous JavaScript and XML) is a mix of Web technologies used for building Web sites that respond much more quickly and smoothly to user input. Combining WordPress and Ajax to build a snappier Web site in a few minutes is much easier than it may seem at first, but you need to follow the instructions carefully to avoid a few little traps.

This article discusses four Ajax plugins that can make your WordPress-based Web site more dynamic, friendly and fun for visitors. The only prerequisite is that you have an already-working WordPress installation (we used version 2.1) and, of course, a complete backup of it just in case something goes wrong.

Let's start with a plugin that doesn't generate impressive snapshots, but makes your site less boring by making navigation faster. AjaxWp improves the responsiveness of your WordPress pages with a relatively simple trick; it dynamically replaces all the internal links to other parts of your Web site with onclick() JavaScript function calls.

When visitors click on these modified links, their browsers launch the scripts embedded in the AjaxWp code. These scripts then request the new page, all by themselves, in the background. In the meantime, the visitors' browsers will not go blank; the header, footer, sidebars—basically every part of your Web site that is common both to the current page and the one just requested—remain fully readable where they are.

The part to be replaced, and that only, gradually vanishes, and the block of new content takes its place as soon as the AjaxWp scripts have it ready. During this phase, to show that it is actually doing something, AjaxWp superimposes an animated GIF of a rotating wheel to the area it is replacing. The animation with which AjaxWp moves from the old page to the new one, courtesy of the Script.aculo.us library, can be set to appear, slide or blind.

How slowly or quickly all this happens depends on the speed of the Internet connection, the load on your Web server and the speed of your visitors' computers. If something goes wrong, after a programmable timeout, AjaxWp simply lets the browser load the page in the standard mode.

AjaxWp depends on a few JavaScript libraries that are included in the distribution. To use this plugin, download the latest tarball from the home page, unpack it, and move its JavaScript folder, the animated GIF and a PHP file called, you guessed it, ajax-wp.php, inside your WordPress installation. Then the fun begins.

AjaxWp can work in two modes: Quick, which is easier to configure and use, or Optimized. Whichever mode you choose, the home page and the README file describe in detail all the actual steps of the installation procedure, but I summarize the main points here.

In Quick mode, every AjaxWp call requests a whole new page from the server and then extracts from it the single area that must be refreshed in the browser window. Other than the steps described above, you need to add only a few lines of PHP code to the header file of your WordPress theme to start using Quick AjaxWp.

Optimized mode is faster and more efficient, because only the pieces of the pages that have to change are requested from the server and dropped as they arrive in the right part of the browser window. To make this work, however, you have to create an AjaxWp version of your theme—that is, add to each of its pages the snippets of PHP code described in the on-line documentation. Depending on your theme, this may take a bit of tweaking to get right.

Regardless of which mode you set up, once everything is in place, users who have JavaScript enabled in their browsers will enjoy a faster or at least much smoother navigation of your pages. Users without JavaScript enabled still will be able to load and read the pages in the old, pre-Ajax way.

Some advice: keep a copy of all the original WordPress files and restart from those if you configure Quick AjaxWp and decide to switch to Optimized mode later. If you mix or repeat installation steps or JavaScript calls in the code, strange things will happen.

Whether you choose Quick or Optimized mode, don't forget to spend a few minutes checking the configuration variables of AjaxWp to adapt them to your taste and, more important, to your theme and general WordPress setup. The two most important options are ajax_wp_blog_base_path, which is the relative path from the root of your Web server to your WordPress installation folder, and the list of pages (ajax_wp_ignore_links) that should be loaded normally rather than through AjaxWp.