“How to Ajaxify Your WordPress Site” plus 1 more

Posted: 18 Nov 2010 11:02 AM PST

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 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.

Post from: ProBlogger Blog Tips

How to Ajaxify Your WordPress Site

How I Monetize Mobile Traffic on My Blogs

Posted: 18 Nov 2010 05:01 AM PST

Over the last few days, I’ve been experimenting with monetizing my blogs for mobile readers who view mobile versions of my sites.

Those who read ProBlogger on an iPhone, Android phone, Palm, or Blackberry Storm will know that you’re given the option to view this blog within a theme designed for mobile devices. I use WPTouch to serve this up—it’s a WordPress plugin that I’ve found incredibly easy to use. I have it installed both here on ProBlogger and on Digital Photography School.

I had to switch it off recently while making some server changes, and I was amazed how many complaints I received. It seems a lot of readers these days read my blogs on mobile devices!

WPTouch offers a lot of great features that I won’t go into here, except to say that it lets you customize your display far beyond what I’ve done to date.

One feature that I will mention quickly is that the plugin offers those who view your blog on an iPhone a way to actually add a web app to their iPhone homescreen. This will increase the number of people checking out your blog on mobile devices.

One of the other great features WPTouch offers is the ability to monetize your mobile theme with advertising. Once you’ve got it installed on your WordPress blog, all you need is to open up the WPtouch area, and look for the Advertising tab.

In this view, you can select a variety of options. You can see here that I’m testing AdSense, and that I’ve put the ads below the header (you can also put them in the footer), and that I can select a variety of positions for them.

I did try the ads in the footer area initially, but they end up so far down the page that I doubted they’d ever be seen (note: it’d be good to have the option to display ads in the header and footer).

The ads are not the prettiest in the world, but here’s how they look on both the home page of the theme, and in individual posts.

The ad position is prominent, yet they don’t completely take over the page, and the ads are contextual—all a good recipe for performance (at least, it is in theory).

WPTouch also gives you a way to use AdMob ads on your blog, or even to show custom ads (so you could advertise your own products or sell ads directly to advertisers—something I’m yet to test.

I’ve had these ads working on the ProBlogger and dPS mobile sites for a few days now, and the signs are promising. Obviously their success on your site will depend a lot on how many readers you have and how many of them are reading your blog on a mobile device. However, already I’ve seen my ads earning more for each day of my test than I’m earning through RSS ads with AdSense.

In fact, the eCPM that I’m seeing is around five to six times what AdSense earns on normal ads on my pages. While the actual traffic numbers to my mobile site aren’t as high as traffic to the blog via computers, I’m excited to see the potential of this tool.

I’m averaging around $30 per day so far in earnings from mobile visitors, so the WPTouch plugin paid for itself in 24 hours. While that revenue figure isn’t huge in comparison to other earnings on my blogs, it adds up to over $10,000 a year. That’s $10,000 which was gained simply by installing a plugin and adding my AdSense account—certainly some low-hanging fruit that I’ve been overlooking.

Note: This post contains affiliate links to WPTouch.

Post from: ProBlogger Blog Tips

How I Monetize Mobile Traffic on My Blogs