WordPress How-to: customize the IWPhone plugin
I just wrote a post about the IWPhone plugin on Hack Wordpress. This very handy plugin creates an iPhone/iPod Touch friendly version of your blog, by removing unecessary elements, auto-scaling images and adapt content to iPhone/iPod resolution, allowing you to read the content without even having to zoom. Even if this plugin is great, you’ll have to customize it a bit in order to make it perfectly fits your blog design.
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!
[...] you’re interested about customizing the IWPhone theme, you should read what I just posted on my blog. Want automatic updates? Subscribe to our RSS feed or Get E-mail Updates Automatically! Digg [...]
[...] If you’re interested about customizing the IWPhone theme, you should read what I just posted on my blog. [...]
[...] If you’re interested about customizing the IWPhone theme, you should read what I just posted on my blog. [...]
[...] el plugin y el theme a las carpetas correspondientes. Si después de eso lo quieres customizar esta guÃa en CatsWhoCode te vendrá de [...]
[...] Het enige wat je dan nog hoeft te doen is het activeren van de plugin via je WordPress admin interface. Meer is het niet. Vanaf nu zal iemand die WordPress blog bezoekt met een iPhone automatisch een geoptimaliseerde versie van je blog zien. Mocht je overigens de look van IWPhone willen aanpassen dan kijk dan hier bij deze handleiding. [...]
Hi, I’d like for the index.php to show the pictures contained on post without having to go into the post.
Is it possible?
Thanks!
Hi gabriel, you should edit index.php, and remove the comments over the the_content() function, then delete the the_excerpt() function.
I have always had big problems with WordPress IWPhone plugin. It is not so easy to use it however it is the best.
I’ve been using iWPhone (in combination with WordPress Mobile Edition for other handsets) myself, but never really was satisfied with the mobile-compliance of it’s HTML-ouput. Recently I’ve switched to Mobilepress, a great plugin which not only combines iWPhone & Mobile Edition, but also produces much better HTML. I’ve compiled some advice on how to get even better optimized code from Mobilepress:
http://nonsmokingarea.com/blog/2008/11/22/wordpress-mobile-optimization/
I triyed but is not working on my iphone… its giving me always error 292, somebody knows what is that? some help?
I am having the same problem as ‘pene’. Can someone shed some light in this matter???
That’s really cool. I’ve come across some other plug-ins but this one is by far the best for the job. Thanks for the information. Cheers
[...] WordPress How to customize the IWPhone plugin Posted by root 23 hours ago (http://www.catswhocode.com) Jul 8 2008 uncomment the line but don 39 t forget to comment the beginning of the following line 6 link building services on apr 19 2009 5 14 am i am having the same problem as 39 pene 39 can someone shed some light in this matter articles rss comments rs Discuss | Bury | News | wordpress how to customize the iwphone plugin [...]
I’ve been looking for a way to do this with my blog. It looks like this post is a couple of years old now. Is this plugin compatible with the latest version of WordPress?