Image Image Image Image Image

© Copyright 2012 ABCoder | Email | RSS

Scroll to Top

To Top

nokia

06

Jan
2010

In plugins
wordpress

By abcoder

WPtouch iPhone Theme (part 2)

On 06, Jan 2010 | In plugins, wordpress | By abcoder

This a continuation from my previous post on WPtouch. In that post I explained how to add additional user agent support by modifying the wptouch.php. Also I mentioned the pain associated with this method – each time you update the plugin you have to edit the $useragents array. I suggested to give an option in the admin panel to add extra user agents. I’m not sure – may be after seeing my post WPtouch decided to give an option for that in the admin panel ;)

Here is the good news – yes now you can add “Custom User-Agents” to WPtouch! Below is a screen-shot from ABCoder’s WPtouch settings:

WPtouch iPhone Theme - new settings for adding extra user agents

I’ve added these user-agents:

playstation, samsung, wap, windows ce, wm5 pie, iemobile, symbian, series60, series70, series80, series90, blackberry, midp, wml, brew, brew, xiino, blazer, pda, nitro, netfront, sonyericsson, ericsson, sec-sgh, docomo, kddi, vodafone

A really handy way to check whether it is working or not – add webkit at the end (certainly with a comma before it) and visit your site from Google Chrome. If you see the iPhone version everything is perfect! Don’t forget to remove “webkit” before you go live.

Tags | , , , , , , , ,

19

Sep
2009

In plugins

By abcoder

WPtouch iPhone Theme for ABCoder

On 19, Sep 2009 | In plugins | By abcoder

WPtouch iPhone Theme pluginYesterday 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.

african people mobile phone

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.

Mobile Internet users on the upswing

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:

compare loading time with and without WPtouch iPhone theme

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.

Join testking CISM web development course to learn about PHP and WP plugins and become master using testking 642-975 tutorials and testking HP0-J33 live demos.

Tags | , , , , , , , , , , , , , , , , , , ,