How to Optimize Your Self-Hosted WordPress Blog for Mobile

WP Touch1

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

MobileOptimize4Once 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


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.

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

WP Touch Plugin for WordPress

If you’re interested in enhancing the smartphone experience on your WordPress blog, the WP-Touch plugin by Brave New Code is worth checking out.

WP Touch_Before_AfterThe instant change that occurs upon activating WP Touch is impressive. WP Touch applies a mobile theme for those browsing via smartphone and gives a WordPress site an RSS reader feel. Blog entries are given center stage and site pages are accessed via dropdown navigation. As well, a switch is added to the bottom of the page, lettting the visitor switch between the WP-Touch theme and the original site.

The administration page added to the WordPress dashboard is also nice. Settings are clearly organized and explained well. One can adjust theme colors, decide which pages show up as options for visitors, set up AdSense and even set up push notification via Prowl.

I’ll be looking into other smartphone plugins for WordPress, but we’re very happy with this one at the moment. If you visit Mediactive via smartphone, please let us know what you think.