WordPress Default Theme Optimized for the iPhone

I decided to take a few hours last night and using CSS alone, create an iPhone/iPod Touch friendly version of the default WordPress theme based on the famous Kubrick. Michael Heilemann put this simplistic theme together many years ago and since it is the most popular theme used to-date, I thought it a fun experiment.

If you are using the famous Kubrick default theme on WordPress, you just have to add one line of PHP and like magic you will now be rocking a site that is optimized for the iPhone/iPod Touch.


<?php echo ((strpos($_SERVER['HTTP_USER_AGENT'], "iPhone") || strpos($_SERVER['HTTP_USER_AGENT'], "iPod"))) ? '<link rel="stylesheet" href="/wp-content/themes/default/iphone.css" type="text/css" media="screen" />' : ''; ?>


Okay, well, not a lot of magic actually. All I did is have that one line of PHP detect if the user is using an iPhone or iPod Touch and if so, just displaying a new CSS file. It is just 28 lines of CSS that help better optimize the theme for a more elegant mobile reading experience. My objective was not to redesign the aesthetics of the default theme or adjust the HTML mark-up in anyway – my objective was to use minimal CSS to alter the layout and presentation in a clean and functional way.

To have your WordPress default theme be iPhone/iPod ready, you just have to follow these steps:

1. Copy and paste the above line of PHP code into your header.php file within your theme folder. I suggest placing it right before the closing </head> tag.
2. Add the ipod.css file within your theme folder. You can download it or copy and paste from below.


body {font-size:120%; background-color: #fff; background-image:none; margin:0; padding:0;}
#page {border:none; background-image:none; margin:0; padding:0; width:100%;}
#header {background-image:none; height:auto; width:100%; margin:0; padding:1.0em 0;}
#header #headerimg {margin:0; height:auto; width:100%; text-align:center; margin:0; padding:0;}
#header #headerimg h1 {margin-top:0; padding-top:0;}
#header #headerimg .description {font-size:1.0em;}
#content {float:none; width:90%; margin:0 auto; padding:0;}
#content .navigation {clear:both;}
#content .navigation div {margin-bottom:1.6em; font-size:1.4em;}
#content .post h2 {clear:both; font-size:2.2em;}
#content .post h3 {clear:both; font-size:1.8em;}
#content .post .entry {font-size:1.4em;}
#content #commentform input#submit {width:300px; text-align:center; margin-bottom:1.0em; font-size:1.2em;}
#sidebar {float:none; width:100%; margin:0 auto; padding:0; position:relative; padding-bottom:4.2em;}
#sidebar ul {border-bottom:1px solid #ccc;}
#sidebar ul li {font-size:2.0em; padding-bottom:1.0em; padding-left:0.5em;}
#sidebar ul li h2 {font-size:0.8em;}
#sidebar ul li p {font-size:0.6em;}
#sidebar ul li ul {margin-top:0.4em;}
#sidebar ul li ul li {display:block; font-size:0.8em; padding:1.0em; padding-bottom:0; margin-bottom:1.0em; border-top:1px solid #ccc; position:relative;}
#sidebar ul li ul li a {display:block; background:#fff; padding:1.0em 0; float:left; width:100%; border-bottom:1px solid #ccc; position:absolute; top:0.0em; left:0;}
#sidebar ul li ul li a:hover {text-decoration:none; background-color:#e2e2e2;}
#sidebar #linkcat-2, #linkcat-2 + li {display:none;}
#sidebar #searchform {background-color:#e2e2e2; padding:0; position:absolute; bottom:0; left:0; width:100%;}
#sidebar #searchform div {padding:0.8em;}
#sidebar #searchform div input#searchsubmit {font-size:1.0em;}
#sidebar #searchform div input#s {width:400px; font-size:1.2em;}
#footer {background-image:none; width:100%; margin:0; padding-left:0; padding-right:0;}


This was just intended to be a fun little experiment to see what could be done with minimal CSS and without altering the HTML mark-up. The ideal solution within WordPress is to upon detection of an iPhone/iPod to change the theme entirely — allowing you to have greater control over the HTML structure. Because the reality is that the theme as it is, isn’t a great experience for such a mobile device; fundamentally how the theme is structured and functions, more than simply aesthetics and presentation.

While at lunch the other day I had a client ask me if I design for the iPhone. I instinctively said ‘yes’ without hesitation. The question was followed by another, ‘what can you show me that you’ve done’? I thought this was such an odd question as my response was based on theory over experience. The reality is that I have never designed anything specifically for the iPhone before, but I theoretically could. When you are speaking of design and front-end development, it is just a little HTML and CSS magic and understanding the device and rendering engine of that device. Most of the work in creating great mobile experiences comes from the back-end and the information architecture that dictates functionality and a proper user-experience.

If you are using the default Kubrick theme and want to easily jump on the iPhone craziness, here is a quick, simple and effortless way to do so; enjoy.

If you are one of those, “I have to see it to believe it” sort of people, I can hook you up. Go to http://wordpress.marylandmedia.com on your web browser and then on your iPhone or iPod touch and check it out for yourself.