How to Ajaxify Your WordPress Site

This guest post is by Jeff Starr, co-author of the book Digging into WordPress.

Injecting a dose of Ajax into your WordPress-powered site is an excellent way to enhance functionality and streamline the user experience. Without touching a line of code, you can harness the power of Ajax to boost performance, improve usability, and fill your site with win.

Ajax enables your web pages to respond very quickly and smoothly to user input by loading only snippets of data instead of the entire page. The WordPress login/registration screen is a perfect example. Without Ajax, logging into the WordPress Admin requires a URL redirection and complete page load. With Ajax, users can log in from anywhere with no redirection or page load required. This translates into a more luxurious, sophisticated experience for you and your users.

Beyond the “coolness” factor, Ajax can also improve the responsiveness and performance of your site. Instead of loading new pages to leave comments, view posts, and share content, Ajax empowers users to interact with your site with greater intimacy and efficiency than ever before. By eliminating page loads, Ajax helps to save valuable server resources and bandwidth, resulting in improved performance for your site. And you can “ajaxify” just about anything: from logins and comments to navigation and updates, Ajax can speed things up, save resources, and make your site better than ever.

WordPress + Ajax = Awesome

Using WordPress, implementing Ajax functionality couldn’t be easier. By installing and configuring a few choice plugins, you can ajaxify your entire site (or any part of it) without touching a single line of code. The trick is choosing only the best plugins for your site, and only what’s needed. There are a zillion Ajax plugins available, but only a handful of them really work as advertised (or at all). Let’s check out some of the best WordPress plugins for adding Ajax to your site from within the comfort of the WordPress Admin.

• Ajax plugins for WordPress comments
• Ajax plugins for user login and registration
• Ajax plugins for the WordPress Admin area
• Ajax plugins for other cool stuff
• Ajax plugins to ajaxify everything
• SEO considerations for ajaxed content

Ajax plugins for WordPress comments

A majority of the Ajax plugins listed in the Plugin Directory are aimed at improving the commenting system. Here are five of the best plug-n-play Ajax plugins for your WordPress comments area:

• WP-Comment-Master: Put simply, WP-Comment-Master ajaxifies the entire commenting system: comment display, comment paging, comment submission, and posting. It features a great Settings page for easy integration and configuration and is definitely one of the best Ajax-comment plugins available.
• iF AJAX Comments For WordPress: Another excellent plugin for ajaxifying the comment-submission process. iF AJAX Comments enables users to preview and post their comments without refreshing the page. It includes a ton of options for fine-tuning required fields, CSS styling, status messages, and more. It also features a host whitelist for tighter security.
• AJAX Comment Page: AJAX Comment Page is a nice little plugin that ajaxifies the display of your comments with a fancy slide-in effect. It works great for paged or unpaged comments and includes a simple Settings page to control the number of comments per page.
• Ajax Comment Preview: So far, this is the best plugin I’ve found for true comment previews. Ajax Comment Preview enables your users to see exactly what their comments will look like when submitted. This plugin uses Ajax to send the preview through WordPress’ “inner voodoo” and then instantly display the results. The plugin features a nice Settings page to control functionality and integrate the comment preview with your design.
• AJAX Report Comments: One of my favorite Ajax plugins, Ajax Report Comments enables your visitors to report inappropriate comments with a single click. The Admin page includes basic settings and an email template. This plugin offers truly tight functionality and amust-have for sites with tons of user comments.

Ajax plugins for user login and registration

Ajax can literally revolutionize the user login/registration/lost-password experience. Instead of requiring multiple clicks and page loads to log into the Admin, here are three plugins that ajaxify the entire process into a single click.

• Login With Ajax: Login With Ajax is a popular, well-ranked plugin (it has over 45K downloads). It enables users to log in, register, and recover lost passwords from the sidebar (via widget) or anywhere in your theme (via the login_with_ajax() template tag). It features a great Settings page with role-specific redirects and custom registration email templates.
• iRedlof Ajax Login: Much more than a login widget, iRedlof Ajax Login adds a complete user dashboard to the top of the screen. The dashboard is pre-styled and includes complete login functionality as well as links to random posts and admin menus personalized to each user according to their role. Downsides: there’s no Settings page, and you need to add updateHeader() to your theme template.
• AJAX Login Widget++: Another good plugin for Ajax-powered login, registration, and password functionality, this one also features login redirect. The login form can be placed in your sidebar with a widget, or anywhere else with add_ajax_login_widget().

Ajax plugins for the WordPress Admin area

On the other side of WordPress, the Admin area is another excellent place to enjoy the smooth and sophisticated comforts of Ajax. Unfortunately there aren’t quite as many Ajax-based Admin plugins to choose from, but here two that are both fun and useful.

• Ajax Plugin Helper: It’s simple: save time while keeping up with WordPress plugin updates. Ajax Plugin Helper lets you activate, deactivate, delete, and upgrade plugins without leaving the Plugins page. Very smooth stuff, and there’s even an “Upgrade All” feature for knocking out multiple upgrades with a single click! Nice.
• Admin Ajax Note: Ever wish you could leave notes and stuff for other admin users? Admin Ajax Note makes it easy with an Ajax-powered notepad in the upper-right corner of the Admin area. Create, edit, and delete as many notes as you want, and share with all users, one user, or none. Good stuff.

These two plugins are great, but it would awesome to add more to the list. If you know of any sweet Ajax Admin plugins, please share them in the comments!

Ajax plugins for other cool stuff

Here are some other keen plugins for ajaxifying different parts of your WordPress site:

• DynamicWP Contact Form: The DynamicWP Contact Form puts a floating Contact button on the upper-left side of the page. Click the button and the dynamic contact form slides into view. Messages are sent via Ajax to keep the user on the same page throughout the process. Snazzy indeed, but the styling is distinct and may need to be tweaked to fit your design.
• AJAX Calendar: An ajaxified version of the classic WordPress calendar, AJAX Calendar enables you to browse the months without reloading the page. It features a link to display all posts for the current month, as well as a caching option to enhance performance. If you’re already using the classic WP calendar, this plugin is highly recommended.
• Ajax Category Posts Dropdown: This plugin is perfect for sites with lots of subcategories. Ajax Category Posts Dropdown lists your categories in a dropdown box. When a user clicks on a category, all posts from that category are displayed via Ajax. Easily display the list in your sidebar via widget, or anywhere in your theme via the acpd_display($acdp_title) template tag.

Ajax plugins to ajaxify everything

One of the coolest things to ajaxify is your WordPress navigation, so that when users click to the next post, it’s loaded instantly and on the same page, without a reload. Here are two awesome plugins that use Ajax to load posts, pages, comments, and archives to basically ajaxify all default functionality on the public side of your WordPress site.

• Ajax For All [Demo]
• AJAXed WordPress [Screenshots]

As with any plugin that greatly modifies WordPress, these plugins involve a lot of options. You’ll need to spend some time to understand and configure them properly. Most of the other plugins mentioned so far are plug-n-play, but Ajax-everything plugins like these require some time to familiarize and customize.

SEO considerations for ajaxed content

As you ajaxify your site, keep in mind that search engines aren’t yet crawling or indexing ajaxed data, so make sure you’re enabling Google et al to find your content. There are numerous solutions to this challenge, the easiest of which involves the use of a well-linked sitemap and actual HTML content delivered via noscript tags.

Also consider SEO when ajaxifying your comments. User comments add content to your web pages, but they won’t be crawled, indexed, or considered in page rank if they’re served with Ajax. For many sites, this shouldn’t be too big a deal, but it is something to think about.

For more information on Ajax and SEO, check out Scott Allen’s article, AJAX, Web 2.0 and SEO.

Wrapping up

These are the Ajax gems that I’ve managed to find, but many other great plugins are available. If you know of any good WordPress Ajax plugins (or themes!), please share them in the comments. Thanks!

Jeff Starr is a web developer, graphic designer and content producer with over 10 years of experience and a passion for quality and detail. Jeff is co-author of the book Digging into WordPress and strives to help people be the best they can be on the Web. Read more from Jeff at Perishable Press or hire him at Monzilla Media.