Close
Close

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

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.

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.

About Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for ProBlogger check out our Write for ProBlogger page for details about how YOU can share your tips with our community.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. One Backpack says:

    Jeff,
    Thank you so much for such a great post. You really brought a lot of great resources under one roof!
    Thanks.

  2. Good post, lots of great information! One question though… after opening several sites, on several browsers, all using some form of ajax… do you find your system (PC) slowing down?

  3. Nathan says:

    Being there, done that, don’t think it’s worth it :).

    I mean, Ajax is pretty cool stuff, but not for blogs, most people still prefer more classic approach to switching pages imo.

  4. Emil says:

    This is really great collection, thanks for the post.

  5. ajaxus says:

    Nice post… but one major section is missing.

    What about Ajax plugins for search?

  6. Wonderful wonderful wonderful – off to add some of these goodies meself.

    Thanks so much for the headsup!

  7. jason says:

    Never heard of ajax. Will have to look into it!

  8. dotCOMreport says:

    So much resource in a single post; thanks!

  9. Brandon Cox says:

    I love WordPress. I love Ajax. I just need to get the two of them together more! Thanks for the awesome introduction, Jeff. I have your book but now need to dig in more to this area!

  10. David Knapp says:

    I can’t wait to try some of these out on my site.

    Thanks for letting us know this doesn’t hurt the performance of our site. I didn’t know this.

  11. First time I heard of ajax.

    I will study the information, thanks !

  12. Thanks!

    Been meaning to try out DynamicWP Contact Form. Tried to install on a couple of 3.01 sites. No luck, getting “The plugin does not have a valid header” each time. Anyone know a work around? .

  13. dee oneal says:

    Oh well, I’m quite good in wordpress but still familiarizing with almost everything from tools to plugins and some settings. WordPress is easy to use I must say and you can easily learn it if you just read a lot and observe. There’s no wasted effort in learning it by yourself. When it comes to ajaxify I think I’ll think about it still but I am willing of course.

  14. Andy Beard says:

    Google has been crawling AJAX for over 10 months

    http://searchengineland.com/googles-proposal-for-crawling-ajax-may-be-live-34411

    You just have to write the code correctly.

    Google can also interpret some javascript even including more complicated code such as their recent annoucement of supporting javascript embedded videos with things like swfobject.

  15. This ajax of a thing looks cool but won’t it slow down your Blog. Somebody please respond.

  16. This is a bookmarked post for sure. Thanks. I have a few of these but many I didn’t know about. It’s lovely when someone else does the work for me. ;)

  17. paul says:

    Wow, this is something I haven’t thought about, thanks Jeff. I’ll try these out for sure

  18. Ajax and wordpress is one of the best combination in the world of bloggers. And thanks for the plugins

  19. randy says:

    This is totallynew for me i still have to learn what’s ajax is but i will sure use it !!!!

  20. With everything which seems to be developing inside this subject material, a significant percentage of perspectives happen to be rather exciting. On the other hand, I beg your pardon, because I do not subscribe to your whole plan, all be it radical none the less. It would seem to me that your opinions are not entirely justified and in actuality you are your self not even fully convinced of the assertion. In any event I did appreciate examining it.