WPTouch: Creating a WordPress Mobile Theme

Thanks to the huge success of the iPhone/iPod Touch, Android, and other mobile devices, Apps have become all the rage.  The problem for many webmasters and WordPress users is that most smaller WordPress websites/blogs can’t afford to have a custom app developed for their WordPress site.  

Of course, thanks to beauty of the open source nature of WordPress, WordPress users have access to all sorts of great WordPress plugins.  I recently found myself debating whether or not to develop an app for WordPress Hacks and decided that first I would look into what free WordPress plugins were available.  My goal was simply to find one which would display a WordPress blog to mobile browsers in a mobile friendly format.  

Based upon roughly 2 million downloads plus great reviews, far and away the best plugin I’ve found to accomplish this is one called WP TouchFor those that haven’t heard of WP Touch, this WordPress plugin automatically transforms your WordPress blog into an iPhone application-style theme, complete with ajax loading articles and effects, and will display this theme when your WordPress blog is viewed from an iPhone/iPod Touch, Android, Palm Pre, Samsung  and BlackBerry Storm/Torch mobile device!

The admin panel allows you to customize many aspects of its appearance and deliver a fast, user-friendly and stylish version of your WordPress website to mobile visitors, all without modifying a single bit of code or making any changes to your standard WordPress theme.  The mobile theme also includes the ability for visitors to switch between WP Touch view and your site’s regular theme if that is what they prefer.

If you are looking for a more feature-rich product, I discovered that users can also purchase a Pro version of WP Touch which includes a slew of new features like more style, color and branding customizations, themes, 10 languages, more advertising options, web-app mode, and even iPad support.

How To: Create a Slick iPhone Interface for WordPress

This was a guest post by Alex Denning, who is a WordPress power user, web design freelancer and currently maintains two sites – Nometet.com and GreenGrassGames.com. You can follow him on Twitter here. If you have WordPress knowledge and are interested in writing a post for WordPress Hacks, please contact us.

The iPhone has really taken off recently, so a good idea for your blog would be to make an iPhone version. Whilst the iPhone Safari does a very good job of rendering pages, you might find that your site dosen’t quite display properly. Thankfully, it is very easy to create a very slick iPhone interface similar to the one in the menus of the iPhone itself. The images on the bottom is what my site looks like on an iPhone, and you can see what it looks like normally here.

To make our iPhone version of our site, first thing is to download the iWPhone plugin from http://iwphone.contentrobot.com/. Only upload the iwphone.php file to your /wp-content/plugins/ though – don’t upload the theme as well. Activate the plugin. What this will do is send iPhone users to the iPhone version of your site and everyone else goes to the normal version of the site.

For the next part, we’re going to be using some code made by Adam Oliver. Hop over to his site and download the source files and unzip them. All that is left to do is replace the iWPhone plugin theme with the iPhone interface we’ve just downloaded. Open up the iWPhone theme folder and delete all of the files. Now copy and paste Adam Oliver’s interface files into the iWPhone theme folder. You’ll want to edit some of the images so that they have your site’s name and also change the index.php file so that your site’s name is in the title.

All that is left to do is upload the iWPhone theme folder to /wp-content/themes/ and you’re done! The only problem I came across was the first line of the was <?php require_once(“../blog/wp-blog-header.php”); ?>, which was causing an error. Deleting made everything work. You may need to change the path so its <?php require_once(“/wp-blog-header.php”); ?>.