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.

Yay! 🎉 You made it to the end of the article!
Alex Denning
Share:

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