WordPress Tutorial: Mobile Theme

This tutorial was inspired by Gillian’s tutorial.

It does use the same plugin, WPtouch, but I have chosen to go into a little more detail with some extras.

With the development of internet on mobile phones, iPods and other mobile devices, it has become commonplace to have mobile themes on websites, that are more compatible with these devices. For example, Twitter has its own mobile version.

With WordPress, you can have a simple, easy-to-install mobile theme that is viewable on a number of user-agents including the iPhone, iPod, Aspen, some Blackberries and Opera Mini. You can even add more user-agents if you want.

For this tutorial, you will basically need the following. If you don’t have them yet, don’t worry – I’ll be walking through and explaining why you need them.

• access to your WordPress dashboard and the internet
• the plugin WPtouch
• the browser Safari, v. 4.0.3 or higher (optional)
• an iPhone or an iPod touch with wireless internet access (optional)

Of course, you will need to install the plugin WPtouch. You can do this manually by visiting the site, downloading the plugin, and then uploading the contents to your wp-content/plugins folder.

Or you can visit the Plugins section in your dashboard, search for WPtouch, and install it within a matter of seconds.

Make sure you’re logged into your dashboard. Now activate the plugin.

Now visit Settings, then WPtouch.

Note: If you have a lot of pages this page could take a little longer to load than expected.

The explanations on this settings page should be easy to understand. As you can see, you are able to choose a different site title, add custom user-agents (if you have a mobile device not listed), change the theme colours, icons for pages, and a myriad of other things.

I will only be going through the important ones.

The style and colour options will allow you to customise the colour and background of the mobile theme. Clicking on the colour will give you a colour palette for easy use:

You will notice a custom icon pool. If you want your own icons to appear in some parts of your mobile theme, read the instructions to upload your own.

Important: With the Pages and icons, you must tick the boxes next to the pages that you want to appear in the mobile theme. You can also choose which icon you want displayed next to that.

Here’s roughly how my page navigation looks on an iPod/iPhone, and how the homepage looks (thank you to Rachel for these screenshots):

Viewing the theme

Obviously you can view the theme on your mobile device. At the foot of the page you will notice that you have the option of turning the mobile theme on and off.

However, if you cannot view the theme on your device, you can view it through your computer by downloading the browser Safari (available for both PC and Mac).

• Once installed, click the settings icon in the top right corner. You can also press Ctrl and , or Apple and , (that’s a comma).
• Click the “advanced” tab in the dialog box that pops up.
• Check the “Show Develop menu in menu bar” option and close the dialog box.

Now click the menu icon in the top right corner that is next to the settings icon. You should see an option called Develop.

In that submenu, go to user-agents. From there, choose one of the iPhone or iPod options. Then visit your site in the same window by typing it into the address bar. You should see your mobile theme!

Note: This function is useful for checking browser compatibility.