First up, there was an update to the way that videos are handled on mobile pages. It turns out that in one of the WordPress updates (somewhere between the 2.8 and 2.9.2 versions), the way that videos were output to the browser changed slightly. This meant that the video parser in our mobile plugin didn’t pick up the correct source and didn’t show the video.

All fixed now though.

Bug Fixes

Next up there were a couple of bug fixes:

• A quick one to fix a couple of foreign char issues – there was a string that wasn’t being escaped – it is now.
• Even quicker one to parse links before lists – that means that if you have a link inside a list, it’ll now work ok and not throw an error.

Mobile Themes

And last, but certainly not least, were a couple of awesome new mobile themes – designed by Ryan DC. He did the last set (Wooden/Scrap Book/Obsidian), but he’s outdone himself with the latest 2 – iPhone Light and iPhone Dark – here they are in action:

Thanks for the designs Ryan, very much looking forward to the next set!

So there you have it – a couple of theme improvements, a minor bug fix here and a tweak there. Have you used any of the new themes yet, or maybe you’re using one of the older mobile themes but have tweaked them yourselves? I’d love to see a comment if you have!

I’ve written a much more in-depth article over there about how we did it, but here’s a bite-sized version that you can cut out and put in your wallet:

1. Install the Wapple Architect Mobile Plugin
2. Grab a free dev key from http://wapple.net/register/plugins-signup.htm
3. Activate the plugin and enter your dev key in the Basic settings area
4. Upload a mobile logo
5. Tailor settings so that the mobile version matches the web
6. Style the mobile version so that you retain your brand identity

If you want to read the full article, you can check it out here.

And finally, here is a screenshot of the mobile and web site that shows you how good your mobile blog can look!

We’ve listened to all of your feedback, ideas and suggestions – and as we’ve now got a fancy issue tracking system, we’ve been able to prioritise all of them and create a development roadmap. However, saying that, it became pretty obvious what the focus of this release was going to be – mobile themes.

Mobile themes

We’d had reports of users not being able to style up their site to make it look snazzy, so rather than leave you with boring themes that won’t inspire anyone, we’ve created some mobile themes for you.  What this means is that to make your mobile blog look cool, all you have to do is choose from one of our new themes in a drop down – how easy is that! Our team of graphic designers have had their crayons out and have hopefully created a theme that you’d like to implement on your blog. Our favourite at the moment is the “Wooden” theme, but there should be something to suit you – check out the screenshots below to see what they all look like.

Wooden

Sky

Coal and Fire

Obsidian

Brushed Metal

Scrap Book

Plugin Compatibility

Another area we’ve had plenty of requests to look at was with compatibility with other WordPress plugins.

Whilst looking at how to create a solution for the PowerPress podcast plugin, I stumbled across a function that turned any shortcode functionality into actual markup, and seeing as the Wapple Architect mobile plugin already turned HTML markup into WAPL, it meant that any plugin using shortcodes is instantly mobilized! Some very popular plugins that have had millions of downloads can now be used on your mobile site – Contact Form 7 is just one example but there are hundreds, if not thousands of other ones that will now work on your mobile phone.

A full list of everything we’ve included in version 2.0 is below – keep reading for the full story.

Major Improvements

• Added pre-designed themes
• Added compatibility for any other plugin that uses shortcodes
• Added full WPMU compatibility – prior to this release, all CSS and images were stored in one location so I’ve now moved this location if you’re using WordPress MU so that multiple blogs will work.

Minor Improvments

• Added switch layout option – if you prefer your site to be displayed with DIVs instead of tables, use this option.
• Added more classes for styling – more customization options for styling
• Compatible with WordPress 2.9

Although this plugin addresses the big issue of mobile themes and we have a feature list as long as your arm, we’re always on the lookout for new ideas and suggestions so please keep them coming!

Finally – have you tried out any of our mobile themes yet? And if so, which one is your favourite? Please let us know!

Last month we published a new mobile plugin to the wordpress.org plugin repository called WordPress Mobile Admin. It won’t surprise you to hear that it does exactly what it says on the tin and mobilizes your WordPress control panel.

Prior to creating the plugin, we canvased a number of power mobile bloggers and asked their opinions on what features would be useful in a mobile plugin. We didn’t want to completely re-create the WP dashboard on mobile, but rather create a dashboard with features that would only be appropriate whilst you’re using your handset.

Top Features

It became pretty obvious that creating posts, being able to upload photos and moderate comments were the most popular requests, so they were installed as the top priorities and implemented pretty much straight away. Another top priority was to make the mobile dashboard look and feel like the web dashboard as much as possible as we wanted to keep the user experience as consistent as possible. The theory being that if you’ve used the WordPress control panel on web, you should know where everything is on mobile without having to look around too much.

And with those tasks done, the plugin was released. Job done – well, almost..

Upgrades and downgrades

As with any software, there are plenty of bug reports, feature requests and performance upgrades that all require implementing – so after collating them all, they were entered into Trac, were prioritised and worked on.

One of the most interesting feature requests that came in was for the mobile plugin to work on PHP4. We’ve always made it a requirement in our plugins (not just wordpress) that you had to have SimpleXML and as this came as standard with PHP5 – you needed this too. But we found an awesome class on phpclasses.org called SimpleXML for PHP4 by Taha Paksu, that with a little tweaking, did the same job as the native SimpleXML functions.

By wrapping the class creation in a function called “simplexml_load_string” (and wrapping that inside a if !function_exists(‘simplexml_load_string’)), we’d got SimpleXML functionality with PHP4 – result!

In addition to this, we’ve added features so you can manage your tags and categories on mobile as well as create tags inside posts – all in the same way you’d do on web. We’ve also replicated the admin colour scheme switcher so if you prefer the Blue theme to Gray, you can display that on your phone!

Cutting to the chase – here is the list of features and new functionality that have been bundled into version 2.0.

New Feature list

• Removed dependancy on simpleXML – now works with PHP4
• Footer now present on Login page – frames page nicely
• Added edit post tags page
• Added delete/add post tags
• Added edit categories page
• Added delete/add categories
• Added customized colour schemes
• Added ability to edit tags when adding/editing a post
• Bug fix: Show correct number of posts on edit posts page
• Bug fix: Fixed pingbacks on comments page

No more dependancies

What this means is that we’ve been able to completely remove the “Things you must have..” section in the readme file for WordPress Mobile Admin. All dependancies have been removed and another barrier to mobile has been removed! We’re going to be rolling out the same PHP4 upgrades across all of our other plugins – keep an eye out for those if you’ve been waiting for that feature!

If you want to check out the new version of WordPress Mobile Admin for yourself, head over to http://wordpress.org/extend/plugins/wordpress-mobile-admin/ and download it. Alternatively, if you search for “wordpress mobile admin wapple” in the Add New Plugin section on your own WordPress control panel, you can install it automatically.

If there are any other features you’d like to see in the next version, leave a comment and let us know!

WordPress Mobile Admin is a fully featured WordPress control panel for your mobile. It works on every device – no matter what it’s capabilities, so it doesn’t matter if you don’t have an iPhone or BlackBerry, you can still manage and update your blog whilst you’re on the go.

It uses Wapple’s advanced web services to produce perfect markup whilst at the same time maintaining the familiar look and feel of WordPress. You can write and edit posts, moderate and reply to comments as well as updating and managing tags, categories and pages.

WordPress Mobile Admin

Requires at least:2.6
Tested up to: 2.9.2
Stable tag: 2.5

Features

• Add new posts from mobile
• Post pictures from your mobile phone and dictate where they appear on the post
• Post, Page, Tag and Category Management
• Comment Moderation – including replying to comments
• User Profile page – including colour schemes
• Support for gravatars

This plugin uses the same technology as the Wapple Architect Mobile Plugin and if you like this plugin, you’ll love that one. Check out the home page here: Wapple Architect Mobile Plugin for WordPress

Installation

1. To install through WordPress Control Panel:
   • Click “Plugins”, then “Add New”
   • Enter “WordPress mobile admin” as search term and click “Search Plugins”
   • Click the “Install” link on the right hand side against “WordPress Mobile Admin”
   • Click the red “Install Now” button
   • Click the “Activate Plugin” link
   • Enter your Wapple Architect dev key into the settings page. You can get one from here Wapple Dev Key Registration
2. To download and install manually:
   • Download latest version from http://wordpress.org/extend/plugins/wordpress-mobile-admin/
   • Upload the entire `wordpress-mobile-admin` folder to the `/wp-content/plugins/` directory.
   • Activate the plugin through the `Plugins` menu in WordPress.
   • Enter your Wapple Architect dev key into the settings page. You can get one from here Wapple Dev Key Registration

Download Plugin .zip

The control panel of WordPress Mobile Admin is in `Settings` > `Mobile Admin`.

If you want to use the WordPress Mobile Plugin with WordPress MU as a site-wide plugin, install the “wordpress-mobile-plugin” folder in the plugins directory and activate on a site-by-site basis.

Frequenty Asked Questions

How do I get a dev key?

Head over to Wapple and fill out the simple form, you should be able to get your dev key within a couple of minutes!

Why doesn’t the plugin work? I see the web version on my mobile!

Have you entered your dev key into the Wapple Architect settings?
If not, head over to Settings > Wapple Architect (or Options > Wapple Architect if you’re on version 2.3.3 and under) and enter it into the “Dev Key” input box.

Do I need SOAP and SimpleXML running for this plugin to work?

In older versions of the plugin, you needed SOAP and SimpleXML, but not any more! From version 2.0, the dependancy on SimpleXML has been totally removed! You also do not need SOAP and can communicate with Wapple’s web services via REST.

File Uploads seem to be breaking my site

On some handsets on certain networks, file uploading doesn’t work. Even though the mobile phone supports it, it doesn’t like it. If you find you’re having problems with posting, head to “Dashboard”, then “Profile” and turn it off for your user.

Screenshots

Changelog

• Version 2.5
  • Added option to choose what size of mobile uploaded image you want to use in your posts
• Version 2.4.1
  • Fixed bug with foreign chars on comment titles
• Version 2.4
  • Fixed bug with guest users getting wrong message when trying to view categories
  • Fixed issue with adding posts in a different timezone to the where the server is
• Version 2.3
  • Fixed bug with some sites logging on, removed filter for login and authenticate
• Version 2.2
  • Added switch to mobile/desktop option in footer
• Version 2.1
  • Fixed warning message when no result back from web service call
  • Added compatibility for WordPress 2.9
• Version 2.0
  • Removed dependancy on simpleXML
  • Works with PHP4
  • Footer now present on Login page – frames page nicely
  • Added edit post tags page
  • Added delete/add post tags
  • Added edit categories page
  • Added delete/add categories
  • Added customized colour schemes
  • Added ability to edit tags when adding/editing a post
  • Bug fix: Show correct number of posts on edit posts page
  • Bug fix: Fixed pingbacks on comments page
• Version 1.2.1
  • Fixed bug when web theme has dynamic style sheet and loads up various functions
• Version 1.2
  • Added bulk actions to comment moderation
  • Added post date to add and edit posts
• Version 1.1.1
  • Fixed bug when there is an admin path that isn’t in the top level
• Version 1.1
  • Added filter posts by type on posts page
  • Fix for really long comments
  • Added option to enter a post excerpt
  • Fixed image post size issue
  • Added compatibility with older WordPress versions
  • Added compatibility with WordPress 2.8.6
• Version 1.0.4
  • Fixed foreign chars bug
• Version 1.0.3
  • Added compatibility with WordPress 2.8.5
• Version 1.0.2
  • Fixed compatibility issue when you don’t have PHP5
• Version 1.0.1
  • Fixed admin bug
• Version 1.0
  • Post images from mobile
  • Comment moderation
  • Post editing
  • Gravatar support

Since its launch in June, the Wapple Architect Mobile Plugin for WordPress has seen a huge amount of usage. So much so that it now deserves a showcase article discussing success stories so far about blogs that have installed the plugin.

Hopefully your site is one of those featured, but if not, don’t despair because I’m going to include a few tips and tricks at the end of this article that will mean that in the next showcase, I can’t fail to include yours!
But before showing you a few screenshots of great looking blogs, here’s an overview of why the plugin is so different to other ones and a list of some of the features available.

Why it’s different to other plugins

• Other mobile plugins for WordPress use a default mobile style which results in an inconsistent experience for your users, Wapple Architect Mobile plugin for WordPress retains the styling of your site from web to mobile.
• There’s no redirection to a mobile version of the blog – URLs are exactly the same on web and mobile giving you the ability to promote and use one single domain!
• No transcoding happens here – the mobile version is written in WAPL (an advanced mobile markup language) that results in a completely tailored solution perfect for your mobile visitors.
• Other plugins try to replicate every single feature and plugin you’ve installed onto the mobile version. We know what mobile users want and have written this plugin with that in mind – the result is a far better user experience.

Features

• Every single mobile device is detected and all aspects of your blog are tailored to the visiting handset. Sites aren’t dumbed down to the lowest common denominator but instead use the features and functionality that advanced phones offer.
• Devices are detected by using Wapple’s advanced web services instead of relying on inferior 3rd party tools. If you view your blog with a brand new, never before seen handset, it’ll still work perfectly!
• Any theme you’ve installed and have styled for web will be carried across to mobile giving you a consistent look and feel for each and every one of your visitors.
• Dynamic resizing of images
• Retain SEO, preserve your URL structure and promote one single domain
• Support for multi-lingual characters – even funny characters that make their way onto your blog (from a copy and paste from Word for example) are handled.
• Comment from mobile! Turn on the feature and your visitors can leave comments from their handset.
• Upload mobile specific header/footer images – resized on the fly to fit a visitors handset perfectly
• Place mobile friendly navigation links around your site to help users browse around your blog
• Advanced pagination – split up long posts into manageable chunks that make reading a post on mobile easier
• Complete freedom over how you want to style your mobile site. We’ve done our best to make the mobile stylesheet as comprehensive as possible but no doubt there will be a few things you want to change – you can by editing a few settings.
• Control over almost every element on your mobile page:- change the size and quality of images on posts and pages, show tags and categories in different sections, you can even change the wording of certain elements on your site!
• Plus much much more! For a full feature list, visit the plugin homepage here.

Gallery

So without further ado, here are some screenshots of great looking mobile blogs that are using the Wapple Architect Mobile Plugin for WordPress (click the thumbnail for a bigger view).

WordPress Showcase - Mobile Web Junkie

WordPress Showcase - Red Yellow

WordPress Showcase - Blackberry Boards News

WordPress Showcase - Ben90

WordPress Showcase - The MDA

WordPress Showcase - Evo Hosting

Each one of these sites has been adapted from the standard install of the mobile plugin. Changing it to your particular need is easy work even for a style novice – so far the largest amount of customization has been 10 lines on The MDA Blog. There are classes and IDs available on all elements so you can really get creative but if you need some help and guidance, get in touch.

Tips for making your mobile site look better

With so many options to configure with this plugin, creating a mobile friendly blog is easy. But if you want a bit more help, here are a few great tips that we’ve used to create some amazing looking mobile blogs.

• Upload a header image into the “Basic Settings” section of the Wapple Architect settings page. The best logos that work on mobile are ones that have solid colours in the background and are as big as possible – the image will be dynamically resized on the fly to fit a visitors mobile phone so anything over 500 pixels in width is good.
• Don’t forget that once you’ve selected an image, change the “Use Mobile header Image” option to be “Yes”
• Turn on commenting on posts. In the “Posts Settings” area, change the “Allow comments on posts” to “Yes”.
• If you have lots of really long posts, turn on “Do Pagination” under “Posts Settings” – it’ll dynamically chop up your posts into mobile friendly pages. If you want even more control over pagination, change the “Post length” setting to something suitable – around 2000 is what we’ve found to be the magic number.
• Turn on the “Show home link” and “Show next/previous links” in “Posts Settings”. This will put some handy navigation links at the top and bottom of the page back to the homepage and to the next and previous posts – remember, it’s harder for mobile users to navigate so they need all the help you can give them.

Finally, the biggest tip we can give you is to get styling!

Whilst we’ve made every effort to ensure that the mobile version of your blog looks as much like the website as possible, there’s always room for improvement. So delve right into the 2 mobile stylesheets – they’re both in the “Mobile Theme Settings” area. You can change anything in there but the 2nd one is where you really want to place your custom styles.

With just a few minutes work customizing your mobile blog, it’s easy to create something that looks far better than if you’d have used a standard mobile template or even worse, have it transcoded!

Let me know how you get on and if you do create a blog you think is worthy of being showcased, let me know the URL so I can include it next time!

Mobile Web Junkie

As I mentioned in my article regarding the release of my mobile WordPress plugin, the results of my plugin on a standard install of WordPress are awesome and blogs look amazing on mobile web (as you can see from the screenshot).

But because of the open source nature of WordPress, there are a whole load of other plugins that could be mobilized in order to work in tandem with mine. Content plugins that generate really simple HTML will already be catered for because of checks I perform on the content, but more specific code that outputs JavaScript or something a little bit out of the ordinary will need a little bit more attention to work perfectly.

To help developers along, I’ve added some functionality into my mobile plugin that allows you to create a WAPL version of your plugin that will work perfectly on mobile.

Plugins with special tags

If your plugin allows blog writers the ability to place special tags in their code so they get rendered into something else then you’re in luck! By creating a function inside a class and following my naming convention, your WAPL plugin extension automatically gets picked up and executed.

Here’s a quick example with a fictional WAPL plugin extension called “Hello World”, that allows you to place “[hello]” in your post and when viewed, will output “Hello World” – pretty basic but it should give you an idea of how it works.

<?php
class wapl_hello_world
{
	function format($content, $class)
	{
		$content = str_replace('[hello]', $this->start($class).'<wordsChunk><quick_text>Hello World</quick_text></wordsChunk>'.$this->end($class), $content);
		return $content;
	}
	function start($class)
	{
		return '</quick_text></wordsChunk>';
	}
	function end($class)
	{
		return '<wordsChunk class="'.$class.'"><quick_text>';
	}
}
?>

You can see from the code that wherever “[hello]” is in the content string, it gets replaced with a WAPL string to output “Hello World” inside a wordsChunk element. This in turns gets rendered in whichever mobile markup language is required by a handset at run-time via a SOAP call.

Done that – what next?

Once you’ve got a WAPL extension working, let me know and I’ll add it to my repository so it’s available automatically to anyone who might be using your plugin. You’ll also have to let people know to use my plugin to make it mobile friendly!

Making your plugin work for all devices has now become so easy that the question is now not “how do i do it?” but “why haven’t you done it yet!”

If you need any help with making your plugin work for mobile, contact me and I’ll do my best to help and if you want to find out how everything comes together, have a read of my article about How I Mobilized WordPress.

Alternatively, if you want to just get on with mobilizing your plugin, check out http://wapl.info – it should help you to create some WAPL.

If you want to get it for yourself, head over to http://wordpress.org/extend/plugins/wapple-architect/, have a read of the documentation and activate it on your own blog!

If you’re not interested in delving too deep into the manual (or you want to skip it like most people do), here’s a quick overview of the features and how to install it.

Features

• Compatible with WordPress 2.0 and higher
• Works perfectly on every mobile device
• Retain one single domain and SEO friendly URLs
• Total customization of the mobile blog experience

How to Install

• Download the architect.zip file from wordpress.org
• Upload the entire contents to the /wp-content/plugins directory
• Activate the plugin through the Plugins menu in the WordPress control panel
• Enter your Wapple Architect dev key in Settings > Wapple Architect

If you haven’t already got a Wapple Architect dev key, you can get one from the Developer Program Sign up page. If you make sure you enter your blog URL into the activation form you’ll get your dev key sent straight to your inbox.

Whilst you can use your newly acquired dev key in your WordPress blog, the developer program allows you to generate more dev keys for other mobile projects!

This is only the beginning of this plugin, it’s version 1.0 and there will be many more to come. Advanced features, improved handling of other plugins, admin options so you can write your posts from your phone are just a few of the ideas I’ve got to extend this plugin further.

If you’re using my plugin on your blog, please get in touch with some feedback or send me a link so I can check it out on my phone!

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

It’s one of the biggest and best around, with over 5,000,000 people publishing hosted blogs on wordpress.com and millions more using software they’ve downloaded from wordpress.org.

I’ve done a lot of research to discover that very few of these sites actually render well on mobile, here are a couple of screenshots of what a popular WordPress site looks on my Nokia N73:

http://ma.tt

As you can see it doesn’t look that great and is totally unreadable and usable on mobile. It also took 2-3 minutes to load and cost me a small fortune in data charges.

To start with, I’m not going to wait around for that site to load and I’m certainly not going to bother clicking on any other links to go through the whole process again.

Yet with 5% of web traffic now being generated by mobile devices, it’s imperative for any WordPress blogger to make their website mobile friendly. One where content fits perfectly on the screen, where pages take a few seconds to download yet retain the same structure and quality of graphics as the website no matter what mobile phone browser is being used to access it.

A plugin that Mobilizes WordPress Blogs in under 5 minutes

Being a mobile web dev expert, I decided to create a simple solution to the problem using Wapple Architect and WAPL. I’ve created a WordPress plugin and theme that’s completely free to use for the non-commercial blogger and will present content perfectly to every single device in the world. Here’s how this site looks on both web and mobile:

Mobile Web Junkie

My blog is now perfectly usable on web and mobile and can be read on thousands of devices from old WML browsers to swanky new ones such as the Google G1 and the iPhone. It also retains the same SEO as the web version and can be accessed via the same URL: http://mobilewebjunkie.com

If you want to find out exactly how I did it, have a read of “How I Mobilized WordPress – the Technical Howto for Devs, Coders, Web Geeks and Wizards“.

If you’re not that interested how it all works but want to mobilize your WordPress blog anyway, you can get the plugin now by heading over to the plugin homepage on wordpress.org and clicking the download button. Alternatively, if you search for “Wapple Architect” in the wordpress control panel, you can install it directly from there!