This is a guest post by Rich Gubby, Senior Developer at Wapple.net.

Here are the step-by-step instructions for installing and configuring the Wapple Architect Mobile Plugin for WordPress. It works on a range of handsets from WML phones with no styling, to top of the range iPhones with as much functionality as a modern web browser.

In order to help you along with mobilizing your own WordPress blog, I have documented every step I took – and the great news is that from start to finish it only took around 30 minutes!

Step 1. Install the plugin

There are a couple of ways to do this – probably the easiest is to log into your control panel and search for “wapple” in the Add New plugin screen. Install “Wapple Architect Mobile Plugin for WordPress”.

Step 2. Grab a free dev key

The Wapple mobile plugin uses web services in order to provide such a great service, but in order to do this, you’ll need a dev key to authenticate who you are. It’s free, so head over tohttp://wapple.net/register/plugins-signup.htm, fill out the form and a dev key should land in your inbox within 5 minutes!

Step 3. Enter your dev key in WordPress

If you’ve been a bit eager and already activated the plugin, you would have seen an error message telling you that you need to enter your dev key. In the basic settings page of the Architect settings area, the top option is for your dev key – just copy and paste it into this option.

Step 4. Setup a mobile logo

If you want to upload your blog header logo to your mobile version, select the “Basic settings” page and then set “Use mobile header image” to “Yes”. Then browse for your logo in the “Mobile Site Header Image” option and save it. One thing to note here though is that the logo gets dynamically resized on the fly to fit any handset, no matter what the resolution, so it’ll fit an iPhone just as well as an old Nokia 6230. The bigger the better here as well – 1000×200 pixels is pretty good as you want to retain clarity when the image is resized.

Step 5. Set some options to match the mobile to web

There are some options available in the Wapple Architect that are set to be on or off by default. But obviously not every blog is the same so you’ll need to turn a few things on and a few things off so the options match. For example – by default post dates are shown on the home page – it’s an option in the “Home Page” settings and it’s easy to turn it off. Another option I turned on for this site was “Show excerpt on homepage” as excerpts are shown on the web version.

Step 6. Make a few styling changes

The Wapple Architect plugin carries a number of styles from web to mobile and in this case, most colours were carried through, however, there were a few little changes that needed to be made. I increased the post title font size a little bit and I added a border to the bottom of the home page excerpt – just like the web version. If you take a look at the “Mobile Theme” settings page, there are a number of placeholder styles waiting for you to change and have comments to help you out.

The Result

And with that it’s job well done and from the screenshot at the top of this article, you can see how great the mobile version of HowToMakeMyBlog.com looks.

All of the points of good Mobile design have been adhered to – screen size isn’t an issue anymore and the plugin scores highly on both the w3c mobile test and the readymobi test so you can be sure that your site is valid and conforms to standards.

Another major point that this plugin addresses is that of brand identity and being able to retain it over platforms and devices. By allowing you to upload your logo, change settings and style your site manually you have no worries about your mobile blog looking like thousand others. Looking at the screenshot above, you can see how brand identity has been totally retained from web to mobile.

In addition to all of these benefits, you can be safe in the knowledge that not only will your blog look great and work perfectly on a top of the range Android or iPhone, but because the plugin constructs your site in a device independent mobile markup language, it’ll also work on a WML phone. Obviously if your phone doesn’t support CSS it won’t look as good (the CSS declarations won’t be delivered anyway), but your blog will still work and you’ll still have your logo at the top – as long as your phone at least supports some sort of graphic!