How To Make Your WordPress Site iPhone Friendly

In this arti­cle I’m going to show you how to make your web­site iPod touch or iPhone friendly. By default, your site may look pretty good already, but I think you will agree, this plu­gin makes your site much more acces­si­ble for the mobile crowd.

It also pro­vides (I think) a more iPhone friendly expe­ri­ence. The beauty with this approach is, you do NOT need to re-code a theme, or do any pro­gram­ming of any sort.  All you have to do is install the plu­gin, acti­vate it, and your gold.

Image by William Hook

If you do not have a iPhone or iPod touch, that’s ok, you can use  iPhoney to check it out (if you have a mac).  Or just trust that what I show you works, you can see my results, and how my site now looks by check­ing out the screen­shots below. I took screen shots my from my ipod for this exam­ple, as an emu­la­tor may not be the best way to truly test your site.

If you want to get the screen­shots you take on your iphone to your com­puter (using a mac) just take the screen shots (press the power but­ton and the home but­ton at the same time to take a screen­shot) then open up Image Cap­ture (it’s free and installed on your mac) to down­load the images. You can view my video tuto­r­ial at the bot­tom of this post.

 

How To Install WP Touch

Installing WP Touch couldn’t be eas­ier, if you do not yet know how to install plu­g­ins using WordPress’s new auto­matic fea­tures, check out my pre­vi­ous arti­cle and video located here -> How To Install Word­Press Plu­g­ins.

If you’re using an older ver­sion of Word­Press, or pre­fer to just down­load the plu­gin, and install it man­u­ally you can visit the offi­cial web­site at -> http://www.bravenewcode.com/wptouch/ If you checked out my arti­cle on how to install plu­g­ins, in your dash­board, under plu­g­ins, choose add new, then what we need to do is type in WPTouch (one word) and click search.

Click install and you will be shown the fol­low­ing screen (It may say it has not been tested with your cur­rent ver­sion of Word­Press, but in my case, it works). As I described in my pre­vi­ous arti­cle, type in your infor­ma­tion, click the but­ton, and you will be pre­sented with this screen say­ing “Suc­cess­fully installed the plu­gin”, now all you need to do is click “Acti­vate Plu­gin” and your done! Once you acti­vate the plu­gin, you can go back to your dash­board, and under set­tings choose WPtouch. Under your options page, you may want to turn on Enable Com­ments for Pages (if this is some­thing you want to do, I do not so I left it unchecked). If you visit my web­site on your iphone, you will see the jQuery effect live.  I’ll show this in the next section.

Before WPTouch

Here are some before and after pic­tures of my web­site prior to installing WPTouch.  Keep in mind, with an iPhone or iPod touch you can zoom into the web­site and see the text more clearly.  I think the site looks pretty good here, but I think it is much more opti­mized when you view it on an iPod once I installed WPTouch.  (You can click the images to see them in a larger size.)

After WPTouch

Here are some after shots, I have included a lot of images here, and will give you some com­men­tary on each one.

 

 

This is what the home­page now looks like, you will notice the date in an “iCal” for­mat, you can see the author, the tags, as well as the cat­e­gory.  Click­ing those does as you would imag­ine, and another cool fea­ture is the lit­tle arrow you see, when you touch it, it drops down and shows the first few words of your arti­cle. Next I’m going to show you how the end of your arti­cles will look (note not all of your plu­g­ins will work, my “related posts” plu­gin does not work.  Any plu­gin where you have to add “tem­plate tags” will likely not work here out of the box.

You can edit the plu­gin code your­self, and add back that func­tion­al­ity, just make sure your check­ing your changes on your real iPhone or iPod touch, and not rely­ing on an emu­la­tor (or just switch­ing your useragent).

If you paid atten­tion to the last image, you will note the “iPhone View | Nor­mal View” when you tap this, you can view your site the way it nor­mally shows up, and when you view the new page, you will see a sim­i­lar link near the bot­tom of your page (where your footer is). I’ll end these screen caps with 2 more pic­tures, one show­ing com­ments and the other a “wide” pre­sen­ta­tion of my con­tent.  As you can see the plu­gin works very well and is more than capa­ble of pre­sent­ing your data in an easy to read pre­sen­ta­tion. Note this does have Gra­vatar sup­port (this user is not cur­rently using one), and note that you can browse the next arti­cle or pre­vi­ous arti­cle when you fin­ish read­ing an article.

Video Tuto­r­ial — How To Install Word­Press Plugins

Con­clu­sion

I hope you have found this artilce use­ful, and I encour­age you go to out and try this right now.  It takes less than 2 min­utes, and can mean the world for your vis­i­tors.  But as always, you want to make sure your site is actu­ally bet­ter served by using this plu­gin.  So test, test, test!

Tagged as: iphone, Optimization, Plugin, WordPress