How to Create a Mobile Version of Your WordPress Website

How to Create a Mobile Version of Your WordPress Website

Google Analytics has a user agent report that you can use to find out what devices people use to visit your website. Have you ever checked this report to determine how many of your users come in on mobile phones? I checked this report several months ago, and found out that I was getting 7% of my traffic from mobile devices. Today, that figure has grown to 10%. Although mobile phones are not likely to replace computers for Web browsing any time soon, the writing is on the wall — more and more people are buying high-end mobile phones, and are doing an increasing amount of their browsing on the go. Your website should be prepared to handle that traffic.


WordPress Mobile Website Plugin iPhone

The Affluent Blogger viewed on an iPhone

I use the WPtouch plugin for my WordPress mobile websites. While this isn’t the only way of optimizing WordPress for mobile phones, I find it easy to use and have had success with it. Once installed, WPtouch automatically detects when someone views your website from a smart device such as an iPhone or BlackBerry, and renders the website in a way that looks like a native mobile phone app. This means that no instructions are necessary for those who visit your website — anyone who has used a mobile phone app will already know how to use your site. WPtouch also has built-in support for AdSense, which is a major benefit.

  1. Open the “Plugins” section of your WordPress dashboard, and click “Add New.”
  2. Type “WPtouch” in the search box, and press “Enter.”
  3. Click “Install Now” under “WPtouch” on the result page, and then click “OK” and “Activate Plugin.”
  4. Open the “Settings” section of the dashboard, and click “WPtouch.” I won’t be discussing all of the settings available in WPtouch — these are the changes that I recommend making.
  5. Click the drop-down menu next to “Post Listings Options,” and select “Post Thumbnails/Featured Images.”
  6. Remove the check from “Enable Truncated Titles” under “Post Listings Options.”
  7. Remove the check from “Hide Excerpts” in the same section.
  8. Remove the check from “Enable Tags tab in the header” under “Advanced Options.”
  9. Retrieve the publisher number from the source code for your mobile AdSense unit. The code should look like “ca-mb-pub-” followed by a string of numbers. Paste this code into the “Google AdSense ID” field, but remove the “ca-mb-” as WPtouch adds this automatically.
  10. Type the number of the custom AdSense channel that you created for your mobile WordPress website in the “Google AdSense Channel” field. You can find the number by clicking “My Ads” at the top of the AdSense website, “Mobile Content” and “Custom Channels.” The channel number is displayed in the “ID” column of this page.
  11. Paste your Google Analytics code in the “Stats & Custom Code” field.
  12. Scroll to the bottom of the page, and click the “Save Options” button.

If you happen not to own a smart mobile device, you will certainly be interested in a way to view the mobile version of your website and see what your visitors see. I have found that Apple’s Safari Web browser has a trick that you can use for this. Download and install Safari. After opening the browser, click the button immediately to the left of the gear-shaped button in the upper-right corner of the window. Click “Develop,” “User Agent” and “Safari iOS 4.1 — iPhone.” Type the URL of your website, and you will see the mobile version as it appears to iPhone users.

Comments are closed.