Wordpress How-to: customize the IWPhone plugin

IWPhone anatomy

Have you read the post I wrote on Hack Wordpress about IWPhone? If your interested in the IWPhone plugin, you should read it, especially if you’re looking for help to install the plugin.

IWPhone isn’t really a plugin. Well, it is not only a plugin. In fact, after you unzipped the zip archive, you’ll see a file named iwphone.php, which is the plugin, and the iwphone-bt-contentrobot which is a Wordpress theme, especially designed to fit iPhone and iPod Touch resolution.

You probably guessed it, we will have to edit some files from the theme.

How to…

…Replace a color by another
Even if blue is a pretty color, it may not fit your blog visual identity. If, in your “standard” theme, your links are red, you probably want to make the links from the iPhone-version theme red too.
Nothing hard here. Some days ago, I wrote a post telling you how to modify the color scheme of the OpenBook theme. Let’s use the same technique, which is quick and easy.

…Put an image as a header
In my opinion, an optimized image looking like your standard theme header is great. Why? Simply because you want your readers to feel at home, don’t you?

If you look throught the images folder, you’ll see an image named header.jpg. This exemple image have the perfect width and height for being displayed on the iPhone. Just scale your header image to theses dimensions (320*60px) and replace the old one by the one you just created.

For the second part, we just have to edit the style.css file. Open it with your favorite text editor and go to line 54. Uncomment the line (but don’t forget to comment the beginning of the following line), save the file, and you’re done.

There’s another little adjustment we can do: If you look to your blog with your iPhone now, you’ll see a glossy effect on your header image. Depending of which kind of header image is it, it can looks good, or not. If you’d like to remove this effect, simply navigate to the line 61 of the style.css file, and comment line 61 and 62.

…Modify the title and slogan
By default and just like the well-known Kubrick theme, IWPhone shows your blog name and blog slogan as a text header. Although this will be good for most blogs, you may want to display, as a slogan, “iPhone/iPod version” for exemple.

If you want to do that, it’s just too easy. Open header.php and go to line 42. Here’s the function to display your blog name. The function located on the following line will display your blog slogan. You guessed it, you simply have to replace the function by the text you want to display, either as blog name or slogan.

…Insert Adsense in posts
iPhones and iPods render Adsense ads very well. If you monetize your blog, there’s no reason to not add some Adsense in the iPhone friendly version of your theme.
For exemple, I opened the single.php file (which is the template for single posts) and pasted my Adsense code at line 12. Another place of choice for Adsense ads would be on the index.php file. But well, it’s up to you to choose the best location for your ads.

Anything not mentionned here you’d like to do? Just ask!