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

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!
Tweet This | Digg This | Stumble it | Add to Del.icio.us | | Print This

Alex Denning

Alex Denning blogs about all things WordPress, including WordPress theme development and web design, over at WordPress Shout.

There Are 8 Responses So Far »

  1. Wow! I have always wanted to get my site right to be loaded on a cell phone but most of my readers and followers use the PC/laptop so this is not a must.

    Maybe for other users it’s a must but not for me at this time. thanks for the info and the links.

  2. Dev says:

    wow.. its sounds really impressive. Thank you for sharing.

  3. Brian says:

    I’m not keen on catering to iPhone specifically – but wouldn’t mind a generic “mobile” version of my blog to be available.

    Is there anything in this theme that is iPhone specific? i.e. Would it render correctly in Skyfire, pocket IE, Opera, etc.?

  4. Alex Denning says:

    @Brian – everything is iPhone specific so it won’t render in any other mobile browser.

  5. Rob says:

    Cool. If you use Firefox’s Web Developer Toolbar they also have a small screen rendering which makes it easy to test out the layout.

  6. Wow, that’s pretty sweet! I’ve tried some of the plugins that are used to render a website in the iPhone, but none of them work as well as this does. Thanks a lot!

  7. qoman says:

    Haha that’s im find it thank you for the article i’m lve your blog

Trackbacks/Pingbacks »

Leave a Reply