cross-screen marketing solutions

How I Mobilized WordPress – the Technical Howto for Devs, Coders, Web Geeks and Wizards

So you’ve got your WordPress site running, you’ve installed a load of plugins to do fancy things and there’s a large subscriber base following your every post. However, without realising it, you’re giving a poor user experience to anyone reading your blog on their mobile phone. Have a read of “Why Millions of WordPress Bloggers Need to get Mobile Friendly” to see why this is such a big problem.

To help the community at large, I’ve created a WordPress mobile plugin and theme that provides a perfect WordPress experience to mobile web users and here’s how and why I did it.

Plugins … but not one that truly understands mobile web

If you want to do anything slightly out of the ordinary with WordPress you have to use a plugin. If you want to edit your content in a weird and wonderful way then there’s a plugin to do it. Want better search capabilities? Someone’s already written something to do it. Simply put, plugins are little chunks of code that you install on your site to add extra functionality to the basic set.

Yet I searched high and low for a plugin that would properly mobilize an existing WordPress site, and my definition of properly is:

  • Being able to use the same one single domain for web and mobile
  • Maintain URLs across platforms
  • Retain SEO for mobile search
  • Carry through the same look and feel of the website on every single mobile device and browser

I did find one that renders your site for iPhone only, but that’s no good if you’re one of the 90% of mobile users who don’t actually have one. There’s another for PDA’s and a third that renders XHTML only, there were also other plugins that forwarded you round to an alternative mobile URL.

Themes … even fewer mobile options

The other extendable aspect of WordPress are themes, allowing designers to create great looking sites by modifying a relatively small number of files containing chunks of PHP code and HTML. Whilst this is great for web, it’s bad news for mobile because phones that require anything other than XHTML will never be given it.

At the time of writing, there’s only one single, solitary mobile WordPress theme available out of a total of 797 so the cupboard looks a little bit bare when looking for something to mobilize your blog.

So as I couldn’t find a plugin or a theme to fulfill my criteria, I set myself the challenge of writing one that caters for every mobile device and creates an enjoyable user experience for every visitor. As Mobile Web Junkie is one of the many millions of sites using WordPress, it made sense to make it the guinea pig.

How I did it

At a very high level, the plugin works by dynamically switching themes dependant on what platform the user is visiting on. By using the add_action function in WordPress to trigger my own functions at certain points, I made sure that device detection took place early on in the script in order to control what happened, here’s a snippet of code from my plugin.

function deviceDetection()
{
	if(__testForMobile())
	{
		// Load the correct file depending on the URL (copied from template-loader.php)
		$template = __templateLoader();
		$file = WP_PLUGIN_DIR.'/architect/theme/'.$template;
		if(file_exists($file))
		{
			include($file);
			exit(0);
		}
	}
}
...
add_action('template_redirect', 'deviceDetection');

Template_redirect is an action that is triggered immediately before loading a theme – the posts have been created but nothing has been echoed out to the browser. By hooking the ‘deviceDetection’ function into it, I dynamically switched to my Architect theme depending on whether the visitor was on a mobile device or not. There’s a couple of functions missing in the above example, one to get the correct template file (from the ‘__templateLoader’ function) and one to actually do the test for mobile (__testForMobile()). If you get the code for yourself, you can take a look at what they do.

If at this point the visitor was detected as being on a desktop browser, none of the code to switch themes was executed and the code carried on as if nothing had happened.

However, if a mobile was detected, the plugin loaded in the correct template file – if the home page was being viewed, it’d be index.php but if it was an actual post, single.php was the file it tried to load. Here’s a few chunks of my index.php to see what it does:

include_once('functions.php');
$waplString = get_wapl_header();
$wapl = new WordPressWapl;
if(have_posts())
{
	while(have_posts())
	{
		the_post();

		$waplString .= $wapl->link(array('rowClass' => 'entry_row', 'display_as' => 'h2', 'label' => get_the_title(), 'url' => apply_filters('the_permalink', get_permalink())));
		$waplString .= $wapl->chunk('words', array('class' => 'post-date', 'quick_text' => apply_filters('the_time', get_the_time('F jS, Y'), 'F jS, Y')));

		if(get_option('architect_home_showexcerpt'))
		{
			...
			$content = $wapl->format_text(get_the_content(), $homepagescale, $homepagequality, 'entry_row');
			$waplString .= $wapl->chunk('words', array('class' => 'entry_row', 'quick_text' => $content));
			...
		}
	}
} else
{
	$waplString .= $wapl->chunk('words', array('display_as' => 'h2', 'quick_text' => 'Not Found'));
	$waplString .= $wapl->chunk('words', array('quick_text' => 'Sorry, but you are looking for something that isn\'t here.'));
}
...
$waplString .= get_wapl_footer();
process_wapl($waplString);
?>

Instead of having a get_header() function (which is the norm for most WordPress themes), I created a get_wapl_header() function that returned markup from header.php file instead of echoing the contents to screen. I then looped through the posts in the same way as other themes and built up a WAPL string along the way.
At the end of the example, the WAPL string is sent through the ‘process_wapl’ function, here’s what that function looks like in its simplest form:

function process_wapl($waplString)
{
	global $waplHeaders;
	global $waplSoapClient;

	$params = array('devKey' => get_option('architect_devkey'), 'wapl' => utf8_encode($waplString), 'deviceHeaders' => $waplHeaders);

	// Send markup to API and parse through simplexml
	$xml = simplexml_load_string($waplSoapClient->getMarkupFromWapl($params));

	foreach($xml->header->item as $val)
	{
	    header($val);
	}
	echo trim($xml->markup);
}
?>

This function is very similar to some I’ve used in other projects, it takes the WAPL string and sends it through the getMarkupFromWapl SOAP service. You can see how it’s used in my Intro to Architect Mobile Web Development and mobilize your cake app in minutes article on the Cake Bakery. Infact, the whole process of doing device detection in one area and the building of WAPL in another is a pattern that could be applied to any other CMS or framework – I’ve already started work on a Joomla plugin and you could also use the same logic for Drupal.

There are a whole load of builder classes and functions included in my theme that will turn WordPress markup (mostly HTML with other bits thrown in) into plain text and Wapple Text Formatting. The WordPressWapl class also allows you to build WAPL markup that will always be valid and conform to the schema.

Get the plugin

Now I’ve created a plugin and theme that not only makes sure that my blog works for every single device, but will do the same for anyone else with a WordPress blog who wants to mobilize it.

If you want to take a look at my plugin, head over to http://wordpress.org/extend/plugins/wapple-architect/ and check it out for yourself! There are extensive instructions on there with regards to installing as well as a few screenshots so you can see what you could accomplish.

Plugin Features

  • Create mobile specific page header and page footer images
  • Customize your blog for mobile by configuring options in the control panel
  • Make sure long posts get split up into manageable pages
  • Dynamically resize your uploaded images
  • Pull through the look and feel of the website theme
  • Fully customizable mobile CSS
  • Extendable for other WordPress plugins
  • Works for every single device
  • Correct markup is delivered to the right handset
  • Retain one single domain
  • Maintain SEO friendly URLs

How to Install

The installation process is simple. Upload the contents of the architect.zip file into the /wp-content/plugins directory, activate the Wapple Architect plugin and enter a valid dev key. From start to finish, you should be able to mobilize your blog in under 2 minutes!

The Result

Here’s a screenshot of what my plugin has done for this blog, but if you want to see the results for yourself, visit Mobile Web Junkie on your mobile phone.

Mobile Web Junkie

Mobile Web Junkie

10 Responses

  1. mimo says:

    I’ve installed the plugin into my wordpress blog…
    Where can I see what comes out of the site?
    Thank you!

  2. mobilewebjunkie says:

    Hi!

    Full instructions on how to get your blog mobilized are now available at http://wordpress.org/extend/plugins/wapple-architect/ – hope this helps!

    If you can let me know the URL of your blog it’d be good to check it out on my phone!

  3. Steve says:

    Great tutorial Rich. I’ve checked out your site on a few different phones and it’s looking awesome on all of them.

    I’m tempted to move my blog over to wordpress now, just for the mobilization aspect!

  4. Ryandc says:

    Awesome guide + plugin Junkie! Tried it out on my test site and it worked a treat.

    I LOVE how it gives you the otpions to customize CSS and header/footer graphics, as other plugins dictate what the mobilesite’s style will be, which just isn’t a viable option.

    Keep it up!

  5. LnddMiles says:

    Great post! I’ll subscribe right now wth my feedreader software!

  6. Shovan says:

    Awesome post checking via iphone. Sure will try the plugin.

  7. Dimitris says:

    i install the plugin but it comes out with this error on the statue page:

    Fatal error: Call to undefined function curl_init() in C:\AppServ\www\wordpress2\wp-content\plugins\wapple-architect\admin\options-status.php on line 69

    what went wrong???

  8. Rich Gubby says:

    To use the plugin you’ll need to use either curl, or SOAP – and you’ll need to install it on your server.. check with your ISP, they should be able to help you out with this..

  9. wordpr says:

    i tried this plug-in and does not work in my blog, some ideas why?

  10. Anne Thomas says:

    Hi there, drop over to our community and and you’ll find the support you need there. You may need to provide a few more details about your website, theme, what you tried to do and the errors to enable them to help you. http://dashboard.wapple.net/users/login Best of luck