Creating a mobile WordPress site using WPTouch Pro

I like my wordpress desktop site, I really do. It took me a long time to design the layouts in Photoshop, with countless evenings creating the CSS styles, and just as long, if not longer, creating and updating the various WordPress theme PHP pages.

However it is a desktop theme, and in today’s world where more and more people are using mobile devices to browse the Internet, it doesn’t make sense to alienate this potential audience by providing content that they cannot see, navigate or interact with.

I wanted to make sense, and to do so needed to provide viewing public the ability to view, navigate and interact with my site regardless of the device they use.

Two options came to mind, firstly create a new responsive site, the site would adapt based on the users device resolution, so whether they’re using a smartphone, tablet, laptop or desktop, the contents they would see and interact with would be suited to their device. the second option is to create a site specifically for the mobile devices, whilst leaving the desktop version as is.

The ultimate goal is to create a responsive site, however, that is going to take a long time as I’d like to keep my current theme but make it responsive, so I decided with the second option, which I expected would be a much quicker implementation.

Problem with creating a new layout for mobile usage is that I would’ve ended up with two sets of themes to maintain, one for the desktop and the other for mobile. This didn’t appeal to me, so instead a started looking for existing wordpress mobile themes, or better still wordpress plugins that would take care of the theming without much intervention from me.

I soon discovered a plugin application called WPTouch Pro, which allows you to present a mobile theme to users on mobile devices, whilst displaying the desktop theme to desktop browser users, perfect.

Installation and configuration was fairly simple, all done through its own GUI within the WordPress admin panel. What wasn’t so straightforward was displaying custom template pages and fields. Luckily WPTouch Pro allows you to create a clone of the pre-configured themes, which you can then modify without affecting the default. I downloaded the cloned version of the theme from ../wp-content/plugins/wptouch-pro/themes/classic and using Coda, started to look at their PHP and CSS pages. After making some changes to the ipad/style.css and iphone/style.css pages and creating my own set of template pages ( the same names as those used in the desktop theme) I uploaded the files back to the server ../wp-content/wptouch-data/themes

I now have a dynamic mobile theme for mobile devices and a desktop theme for desktop browsers, and all this took me less than one day!

As I said the ultimate goal is to create a responsive design based on the desktop theme, but that will take a very long time, so in the meantime WPTouch Pro serves it purpose and hopefully helps people read my content using a mobile device.

2 comments

  1. Hey, great advice. I am going to look at this. If I run into trouble I assume you have a fee schedule for helping me. I haven’t looked before writing this. I know that the company I work for has had real issues with the mobile applications that resulted in a lot of complaints. Our business serves people on the move and in a big need, often not aware of us until they need us. Phone optimization has increased our visibility and the number of people to our local site

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>