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”); ?>.