Better iPhone WordPress Themes

iPhone optimised WordPress themes are nothing new, in fact, I expect many of you already have iPhone optimised themes using one of the many plugins available. Here’s the thing though: the iPhone is actually quite good at rendering web pages, so I often find myself switching back to “desktop” view when browsing on my iPhone.

Your iPhone optimised WordPress theme doesn’t have to be the single column look we often see; there’s no reason at all why you can’t just slightly simplify your theme and still give iPhone users a decent experience when visiting your site. That’s what we’ll be doing in today’s post, using just CSS.

IPhone stylesheets

The first thing we need to do is to set up our iPhone specific stylesheet. Put the line below after your normal stylesheet so we can just overwrite some styles using an iphone.css stylesheet uploaded to your theme’s directory (instead of starting from scratch).

<link media="only screen and (max-device-width: 480px)" href="<?php bloginfo('template_url'); ?>/iphone.css" type="text/css" rel="stylesheet" />

Potential drawbacks

Before we get styling, there are some downsides to this method. This isn’t the most efficient way of doing things as potentially some elements will have to be set to display:none;, meaning that they still load, just aren’t displayed. This may have some impact on performance but personally I think as long as your site loads quickly normally, it’ll be fine here.

Slim down, load up

So onto the styling. Portrait, the iPhone’s 320px wide, landscape 480px. Most iPhone specific themes will be 320px, just showing some content. Personally, I see no reason not to just shrink a site slightly, perhaps slimming the sidebar right down to 150px and getting rid of things iPhones can’t properly display (such as tabs).

Every site is going to differ, but something like this will probably do the job:

#wrapper, #header, #footer { width: 600px; }
#content { width: 480px; /*margins may need to be set, but we'll assume they're inherited from the desktop stylesheet */ }
#sidebar { width: 150px; }

You then might find that you need to hide some sections, which you can do with display:none;:

#tabs, #read-more { display: none; }

Once you’ve fiddled around with that a bit, you’ll soon have a delightful iPhone specific WordPress theme for your blog.

Custom icons

But we’re not stopping there though! There is something else that’s really easy to do (that’s worth doing too): make an icon so when someone bookmarks your site to their home screen, your custom icon will show up.

You just need to create a 57×57 PNG without any gloss and upload it to your template’s directory/images/ and then add the following to the <head/> section:

<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/images/iphone-icon.png" />

For better or worse

That’s all there is to it. It won’t be for everyone; some might prefer 320px wide layouts, but personally, I find them quite annoying so by making it as much like the desktop site as possible but making it easier to use on an iPhone, I think your readers will love you for it.