Developing WordPress Mobile Themes

Here at OpenPlans, we decided we wanted to upgrade our mobile presence for a few of our blogs.  The number of smartphones that were shipped in the fourth quarter of 2010 exceeded the number of personal computers shipped, so we see our mobile presence becoming increasingly important.

Choosing a Mobile Plugin

The GothamSchools mobile theme shown in the Firefox browser.

The first step was to survey the various mobile plugins for WordPress.  I narrowed down the choices to WPTouch and WP Mobile Pack.  I ended up choosing WPTouch because it is compatible with the Disqus commenting system.  We recently launched Disqus on GothamSchools and plan on doing so soon on our other blogs.

The advantages WPTouch offers over our previous mobile theme, are:

  • it has a menu that gives access to all parts of the site and search
  • it has share buttons that will increase the viral nature of blog posts
  • it reformats images, videos etc. on the fly to be compatible with the specific mobile device
  • it has wizzy AJAX features, like auto-loading of more posts in the post listing
  • it is under active development and has a large community so is a good bet for future releases and ongoing support
  • it is compatible with wp-super-cache

I decided to buy the WPTouch Pro version of WPTouch instead of using the free version.  The Pro version is quite a bit more sophisticated than the free version and promises future upgrades and support.

Customizing the Mobile Theme

I then set out to customize the default WPTouch theme for GothamSchools.org.  I created a child theme of the default WPTouch theme in which I added some styles and slightly changed the markup in the index and archive templates.  Many other settings were easily customized using the WPTouch admin panel.  Because I made only a few changes to the template code, the new Gotham mobile theme will hopefully remain compatible with future upgrades to the WPTouch Pro plugin and its default theme.

To tweak the css, I used Firebug in Firefox.  You may be wondering how I managed to get the mobile theme to show in Firefox so that I could test it and inspect the markup.  Well, I used the Firefox User Agent Switcher extension.  Once installed, you can configure Firefox to send a specific user agent string, such as an iPhone’s, instead of the regular Firefox one, so it will appear that the request is coming from that device instead of a regular desktop browser.

I also had to debug some javascript code.  Some of the jQuery AJAX code that WPTouch uses was conflicting with code from other plugins I had enabled on the blog.  I turned off the other plugins one-by-one to figure out which one was conflicting.  One was the cforms plugin, which I upgraded to fix the problem, and the other was a custom plugin I use which had a jQuery.noConflict() line which I had to remove.

WPTouch is configured, by default, to support a specific set of smart phones.  All other devices will receive the regular GothamSchools theme.  It does, however, provide space for you to fill in additional user agent strings that you would like to serve the mobile theme to.  I found a list of these and added some to support our editors who use older phones:

wptouch-settings-e280b9-gothamschools-e28094-wordpress

Configuring WP Super Cache

We use WP-Super-Cache on our blogs to improve their performance.  In past versions of WP-Super-Cache and WPTouch, you had to configure them carefully for them to work well together.  With the latest versions, all you have to do is make sure that the “Mobile device support” option is checked.  I ran some tests with whichloadsfaster.com after I enabled super cache and found that the site loaded two to three times faster, on average

And that’s it.  Check out GothamSchools.org on your phone and let us know what you think!

Comments are closed.