Skip to content

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).

It’s that easy: you can just tweak a couple of styles and have a lovely iPhone version of your site, looking just like the “proper” version.
<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.

Alex Denning

15 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Huw Rowlands
September 24, 2010 1:48 pm

Hi, Great article.
I am learning how to do this at the moment. But am struggling to find out how to test without having an iPhone.
I have a Android phone but it seems to use the website CSS file instead of the mobile one?

Keep up the good work!

Wordpress Iphone Themes? Make your Wordpress site mobile ready! « Wordpress Experts Developers – Wp1stop
June 8, 2010 9:40 pm

[…] Check out a great article on WPShout.com – Better Iphone WordPress Themes […]

Kevin Muldoon
June 6, 2010 3:02 pm

Fantastic article Alex.

As Diti points out, there are lots of different touch screen phones on the market. Do you know what the standard native resolution is for most touch screen phones?

Diti
June 6, 2010 12:44 am

Just so you know, the iPhone is not the only mobile device to profit from this. Any HTC device will do, for example.

Amor
June 5, 2010 5:03 pm

I like this art directed post, something I’d like to try too. You changed it a bit? It has slightly different style when I visited last night, but this looks better. Now, I’m looking for more art directed posts. πŸ™‚

Theo
June 5, 2010 10:03 am

Nice and simple. Thanks !

Tony
June 4, 2010 5:25 pm

I really like the custom post layout here!

Tyler Dawson
June 4, 2010 2:04 pm

Excellent, thanks! Something I’ve always wondered about but sounded daunting before now.
The site is a great resource too – I came here once after you wordpressified my theme and keep finding myself drawn back by helpful content!

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25 Best Free WordPress Themes (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...