How to Optimize Your Self-Hosted WordPress Blog for Mobile

Update: Rich Gubby wrote to pitch his Wapple Architect Mobile plugin for WP. I’ve tested it and believe it’s another good option. Thoughts on Wapple are appended below. I’ve also updated the theme names for clarity.

WordPress is activating two new themes for mobile phones, one for smart phones and the other for standard mobile browsers. These will be displayed automatically for visitors based on the phone. However, this upgrade only applies to WordPress.com users at the moment. What if you self-host your WordPress blog?

No worries. Upgrading your self-hosted WordPress blog is rather painless and involves just two plugins, one of which I blogged about previously. These two plugins are the same that WordPress has modified for WordPress.com users.

1. Download the following plugins:

–WordPress Mobile Edition by CrowdFavorite
–WPtouch iPhone Theme by BraveNewCode

2. Upload and Activate WordPress Mobile Edition

For WordPress Mobile Edition, you’ll need to drop one file in your plugin folder and a folder in your themes folder. The creators explain this here.

Once uploaded, activate WordPress Mobile Edition on the plugins screen in your dashboard. This will add a link called “Mobile” to your Settings section. Click “Mobile” to access the settings. In here, you will see two lists. The first is for traditional mobile browsers and the second is for smart phones. Delete the list of smart phones as we’re going to let WP Touch handle those. Click “Save Settings.”

3. Upload and Activate WP Touch

For WP Touch, you just have to drop the WP Touch folder in your plugins folder.

Once uploaded, activate WP Touch on the plugins screen in your dashboard. This will add a link called “WP Touch” to your Settings section. There are a lot of adjustments you can make here, but the plugin will be working immediately. I go into more detail on the WP Touch settings in a previous post.

4. Test

Now, jump on your phone and take the site for a test drive. If you don’t have access to a smart phone or a non-smart phone, I’ve found a couple online tests. They aren’t perfect, but will give you a basic preview:
-Smart phone test
-Non-smart phone test

Update:

Another Option:

If you’re comfortable editing CSS, Wapple Architect Mobile is another option worth checking out. The options are rather robust and allow for a high degree of customization. The biggest pro may be the fact that one plugin takes care of both smart and non-smart phones.

In my previous post about WP Touch, I mention that it does give your blog an application feel. If you prefer a more customized look, Wapple offers that. Updating your mobile theme with a unique header is done via dashboard. However, color and typography options must be managed by editing a style sheet. The style sheet is well-commented, but may be a steeper entry point for novices.

You can find the plugin here. You’ll also need to register for an API key for activation here.

If you visit Mediactive via mobile, let me know if you run into any conflicts. I’ll update with surprises we find.