WPtouch iPhone Theme for ABCoder

Yesterday I logged into the wp admin panel of abcoder and on the dashboard I found link to WPtouch iPhone Theme plugin as the most popular plugin. I got interested and visited the plugin home page. At first look its simplicity attracted me. It seamlessly enables the mobile version of your wordpress blog without any hassle. Unlike other wp plugins’ homepage it has a very professional & clean look (FYI, it’s a free wordpress plugin) and illustration on installing and post installation configurations and FAQs & Documentation. Without any delay I installed it. Everything was fine, it’s time for testing now, but I don’t have an iPhone.

My cellphone is nokia n73, unfortunately this amazing plugin is only for iPhone by default. I browsed the site from my nokia phone and it’s still the same full version of the site, not the mobile(iPhone) version which sounds logical.
Hmmm… so it’s time to get dirty with some modifications in the source code ;)

One week ago I worked on a restaurant website ilpoggiolohinsdale.com, I used mdetect.js from hand-interactive for mobile phone detection and redirect the visitors to a mobile version of the site. WPtouch plugin detects the borwser/OS using php’s $_SERVER['HTTP_USER_AGENT']. The main file is wptouch.php under root folder of the plugin, on line 360 (may vary for upcoming versions) the browser (OS) detection part is done inside detectAppleMobile function definition.

function detectAppleMobile($query = '') {
	$container = $_SERVER['HTTP_USER_AGENT'];
	// The below prints out the user agent array. Uncomment to see it shown on the page.
	// print_r($container);
	// Add whatever user agents you want here to the array if you want to make this show on another device.
	// No guarantees it'll look pretty, though!
		$useragents = array(
		"iphone",  				 // Apple iPhone
		"ipod", 					 // Apple iPod touch
		"aspen", 				 // iPhone simulator
		"dream", 				 // Pre 1.5 Android
		"android", 			 // 1.5+ Android
		"cupcake", 			 // 1.5+ Android
		"blackberry9500",	 // Storm
		"blackberry9530",	 // Storm
		"opera mini", 		 // Experimental
		"webos",				 // Experimental
		"incognito", 			 // Other iPhone browser
		"webmate" 			 // Other iPhone browser
	);
	$devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
	$this->applemobile = false;
	foreach ( $useragents as $useragent ) {
		if ( eregi( $useragent, $container ) || file_exists($devfile) ) {
			$this->applemobile = true;
		}
	}
}

You see there is no “symbian” in the array. I modified the function and changed the $useragents array. My edited detectAppleMobile function looks like this:

function detectAppleMobile($query = '') {
	$container = $_SERVER['HTTP_USER_AGENT'];
	// The below prints out the user agent array. Uncomment to see it shown on the page.
	// print_r($container);
	// Add whatever user agents you want here to the array if you want to make this show on another device.
	// No guarantees it'll look pretty, though!
		$useragents = array(
		"iphone",  				// Apple iPhone
		"ipod", 				// Apple iPod touch
		"aspen", 				// iPhone simulator
		"dream", 				// Pre 1.5 Android
		"android", 			 	// 1.5+ Android
		"cupcake", 			 	// 1.5+ Android
		"blackberry9500",	 		// Storm
		"blackberry9530",	 		// Storm
		"opera mini", 		 	// Experimental
		"webos",				// Experimental
		"incognito", 			// Other iPhone browser
		"webmate", 			// Other iPhone browser
		"playstation",			// Play Station
		"samsung",				// Samsung Mobile
		"wap",				// deviceWap
		"windows ce",			// deviceWinMob
		"wm5 pie",				// enginePie
		"iemobile",				// deviceIeMob
		"symbian",				// deviceSymbian
		"series60",				// deviceS60
		"series70",				// deviceS70
		"series80",				// deviceS80
		"series90",				// deviceS90
		"blackberry",			// deviceBB
		"midp",				// deviceMidp
		"wml",				// deviceWml
		"brew",				// deviceBrew
		"palm",				// devicePalm
		"xiino",				// engineXiino
		"blazer", 				// Old Palm
		"pda",					// devicePda
		"nitro",				// deviceNintendoDs
		//"webkit",				// engineWebKit, DO NOT use this on Google Chrome
		"netfront",				// engineNetfront
		"sonyericsson",			// manuSonyEricsson
		"ericsson",				// ericsson
		"sec-sgh",				// manuSamsung1
		"docomo",				// svcDocomo
		"kddi",				// svcKddi
		"vodafone"				// svcVodafone
	);
	$devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
	$this->applemobile = false;
	foreach ( $useragents as $useragent ) {
		if ( eregi( $useragent, $container ) || file_exists($devfile) ) {
			$this->applemobile = true;
		}
	}
}

Note that I’ve commented out the “webkit”, cos from Google Chrome the output of $_SERVER['HTTP_USER_AGENT'] is

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.43 Safari/530.5

So you are supposed to see the mobile version from chrome browser!

Now everything is ALMOST perfect from nokia and I’m happy with that :). The home page is only about 30kb. Yeah! Brave New Code has really done a great brave new job. From my nokia n73 some javascript and ajax does not work, from Nokia 5800 it’s perfect, everything works nicely. Haven’t tested it from iPhone, but I’m sure it’s 100% okay from iPhone. I tried to use google adsense for mobile but no luck. May be it’s not supported for publishers from Bangladesh yet.

A recent survey shows that the volume of mobile internet users is increasing. Now it’s vital to provide a mobile version of your site whatever your site is about.

For wordpress WPtouch is really an ‘out of the box’ plugin to take the blogging platform to a new era. The ajax comment feature is appreciating and a must for mobile browsers to reduce data transfer. It has a different dashboard for configurations, you can play around there, the default setup is well but I check on the WPtouch in exclusive mode, it’ll turn off all other plugins & reduce the load and also check on to show the excerpts on home page. The most important part is your site loads super fast with WPtouch from mobile browsers, here is a comparison:

I think they should provide the option for enabling the theme for all mobile phones and not only limited to iPhone & android. The touch enabled browser of Nokia N97, 5800 is same powerful as iPhone touch browser. I hope they’ll think about it and enable the support for other mobile phones as well. Overall this is a very good work and keep it up.
If you have not installed the plugin yet, I’d like to recommend it. You may ask me for support if you need any.

Related posts:

1. WPtouch iPhone Theme (part 2)
2. iPorn for iPhone!
3. Symbian has switched to Open-source version of Software
4. Google unveils AT&T-compatible Nexus One
5. Flicka on Android Market is knocking at