Question Defense uses the WPtouch iPhone Theme WordPress plugin for displaying the site in a user friendly format for mobile devices. This plugin is by far the best mobile theme I have used to date. Not only is it actively developed and constantly improving but it has an amazing admin page for customizing the mobile theme in many ways. I highly suggest this plugin for anyone with WordPress installed.

One thing that I completely forgot to verify once I installed the plugin was the iPhone or iPod Touch home screen icon. This is the icon that will display on an iDevice’s home screen if adding the link directly to your desktop. On any web site or the default WordPress installation this can be accomplished by simply adding an image named apple-touch-icon.png to the root web directory. The image is picked up by default and will be used by Mobile Safari as the home screen icon on your iPhone. Awhile after installing the plugin I was testing something and noticed when adding the site to the home screen of my iPhone that the icon I had uploaded was no longer working. After looking over the WPtouch iPhone Theme plugin WordPress admin page I saw that this had to specifically be set now because of the theme. You can add the home screen icon by following the directions below.

Configure iPhone Home Screen Icon With The WPtouch iPhone Theme Plugin:

  1. Open WPtouch iPhone Theme Admin: Login to your WordPress installation admin site typically located at your-domain.com/wp-admin. Once logged in expand Settings in the left navigation menu and click on WPtouch to display the WPtouch iPhone  Theme administration page as shown below.

    WPtouch iPhone Theme Admin Page

  2. Upload New Icon:You will now need to upload the iPhone Home Screen icon you previously created. If you have not created the icon already it should be 60×60 pixels in size. There is a link to an online icon generator located on the left side of the WPtouch iPhone Theme admin page in the Default & Custom Icon Pool section if you needed help in creating the icon. Anyway once it is created scroll down on the admin page until you come to the Default & Custom Icon Pool section as shown below.

    WPtouch iPhone Theme: Default & Custom Icon Pool

    Click the Upload Icon image or text located at the bottom of the instructions on the left hand side of the Default & Custom Icon Pool section. This will open a file browser so you can locate the logo image you have created on your computer. After uploading the image a message will display below the Upload Icon image letting you know the file was uploaded successfully and providing a link to refresh the page to see the new icon as shown below.

    WPtouch iPhone Theme: File Has Been Saved

  3. Set Logo & Home Screen Icon: Scroll down below the Default & Custom Pool Icon section to the “Logo Icon // Menu Items & Page Icons” section. The home screen icon is set in the very first option called “Logo / Home Screen Icon & Default Menu Items”. Simply click the drop down and scroll to the bottom which is where the icon you have just uploaded should be located. Once selected scroll to the bottom of the WPtouch admin page and click the Save Options button to save the changes.
  4. Verify Home Screen Icon: Now visit your WordPress site from your iPhone or iPod touch. Once on your site click the + symbol located in the bottom Mobile Safari menu which will display a menu as shown below.

    Mobile Safari: Add To Home Screen

    Click the “Add to Home Screen” button to add an icon to the desktop of your iPhone and verify it is the new icon you uploaded via the WPtouch iPhone Theme admin. An example of what your icon might look like is shown below with the Question Defense logo located in the bottom right corner after adding it via Mobile Safari.

    iPhone Question Defense Home Screen Icon Logo

You can also upload other icons to use for various other things with the WPtouch iPhone Theme. If you happen upon this page and you do not use the WPtouch plugin but still want to add a home screen icon all you need to do is create a 60×60 pixel image and upload it to the root of your web directory. Make sure it is named apple-touch-icon.png and Mobile Safari will use it by default.

iPhone Hacks: Pushing the iPhone and iPod touch Beyond Their Limits (Paperback)

By (author): David Jurick, Adam Stolarz, Damien Stolarz


List Price: $34.99 USD
New From: $9.71 USD In Stock
Used from: $0.01 USD In Stock

DeliciousStumbleUponDiggTwitterFacebookRedditLinkedInEmail
Tags: , , , , , , , , , , , , , ,
7 Responses to “Set Home Screen Icon With The WPtouch iPhone Theme WordPress Plugin”
  1. Tony says:

    Thanks for sharing! My website is now compatible with the mobile phone!

    [Reply]

    alex Reply:

    Hello Tony,

    No problem. The WPTouch theme is awesome. Thanks for leaving feedback.

    Thanks.
    alex

    [Reply]

  2. Yoli says:

    Alex,

    Alex,

    Good article to help us troubleshoot issues like that. There is so much to learn and discover with mobile and creating mobile websites. I’m in awe and trying to fight off information overload! Uggghhhh!!!!!

    I am new to WPTouch and would like to know if the iPhone icons will automatically show up on the Home page of a newly developed mobile site. I’m building my mobile site using this plugin but when I test it using an emulator, I do not see any icons, only text. In the WPTouch settings, see a list of icons but nothing that would be most appropriate for designating the pages found on the Home Page, i.e., icons or Contact Us, About Us, Services, Call Us, Products, Hours of Operation, etc.

    Can you refer me to any good links where I can download FREE icons to use on my mobile website that would cover these Pages? I would like to use icons most commonly seen on an iPhone.

    Thanks!

    [Reply]

    alex Reply:

    Hello Yoli,

    Thanks for the feedback and compliments.

    I don’t know of a site specifically for these types of icons though I am sure they exist. I would suggest using the advanced image search on Google and set the size of image you are looking for to 60×60. You can access Google image search at image.google.com.

    Hope that helps.

    Thanks.
    alex

    [Reply]

  3. Svetlana Trenholme says:

    I have attached screenshot in our blog for this application. Please read once again, if you have any problem then please let us know.

    [Reply]

    alex Reply:

    Hello Svetlana,

    Not sure what screenshot you are talking about but thanks for taking the time to leave feedback.

    Thanks.
    alex

    [Reply]

  4.  
Leave a Reply

*Type the letter/number combination in the abvoe field before clicking submit.

*