When we built WordPress Mobile Admin, we knew that there would be bloggers from all over the world wanting to use it. And because WordPress is multi-lingual, our plugin had to be as well. It made little sense to hard code all the labels and values in English, when someone might want to edit their blog in French, Italian, or Japanese!

These are flags of a few languages that we’ve already seen WordPress Mobile Admin operational in and more are popping up every day. It’s not just available in a couple of languages either, it’s available in every language WordPress is available in. There are 67 official ones so far, but the full list can be found here.

To get WordPress Mobile Admin (and WordPress in general) working with different languages, check out http://codex.wordpress.org/Installing_WordPress_in_Your_Language, it’ll really help you along.

And of course, if you are using WordPress Mobile Admin in something other than English, get in touch and let us know!

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!

After a number of releases of the mobile plugin for WordPress, you’d think I’d want to put my feet up for a bit and have a well deserved rest and a cup of tea. But not a bit of it! I’ve been burning the midnight oil to get version 1.4 ready for release so that you have even more control and even more ways to mobilize your blog.

I’ve had plenty of positive feedback from users of the plugin as well as some great suggestions for new features and functionality and have done my best to try to incorporate all of them. A few have inevitably fallen by the way side for this version, but rest assured, any ideas you provide have or will be logged, categorized, filed in an important folder and put on the roadmap for future releases.

So without further ado, here are the features that have made it into version 1.4

Major Improvements

• Removed dependency for SOAP. The Plugin now falls back to REST services to those without SOAP installed.
• Compatibility with WordPress 2.8.4
• Speed improvements. I’ve analyzed the core code and squeezed a little  so your mobile pages load faster.
• Fix for foreign characters. WordPress handles posts just fine, but it doesn’t play that nicely with pages and titles. There are now measures in place to handle all character maps on mobile.
• Added the option to switch to the mobile version of the site if you’re using the website. You could already switch from mobile to web, but now you can go both ways.

Minor Improvements

• Captions – they are a pain as they aren’t a standard HTML tag, but no matter, they should be handled for mobile a bit better in this version. Oh, and there is a class applied to the caption too so it’s styleable.
• Fixed strange bold tags appearing. The text editor in WP sometimes adds an extra strong tag – a bit of cleanup takes place now to handle this.
• Added option: Show tags on a post page.
• Added support for characters in your footer so you can have a copyright symbol for example – read more about that at wapl.info.
• Added options: Transparency colour on images. You now have ability to specify which colour you want as the background for an image wherever it appears on your site.
• Support for smiley images. Tiny smiley images (and tiny logos) shouldn’t be scaled up to fit the screen – in version 1.4 they don’t.
• Added option: Different post page header image. Once you’re in your site and looking at posts, you might want a slightly different, maybe smaller image at the top of your page, you’ve got the option to upload one in the control panel.
• Better support for bold, italic and underline text. It’s a WP editor issue again that hopefully has been resolved.
• Added classes so you can style homepage excerpts – a must if you want some sort of divider between posts.

What’s next?

Version 1.5 is being planned even as I write this post. In fact, version 2.0 has already had a bit of thought put into it. But keep those ideas coming as the community at large is becoming the driving force behind new functionality and it’s great to see! Get in touch and let us know what you think!

You’ve installed my Wapple Architect Mobile Plugin for WordPress and entered your Dev Key only to find that although your mobile blog looks great, it doesn’t look as awesome as some of the other blogs that are using the plugin.

So what can you do about it? Luckily for you I’ve compiled a list of some of the top tips to make your blog look awesome on mobile, just follow it and by the end of it you’ll have a great looking mobile site.

Step by Step Guide

1. 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.
2. Don’t forget that once you’ve selected an image, change the “Use Mobile header Image” option to be “Yes”!
3. Turn on commenting on posts. In the “Posts Settings” area, change the “Allow comments on posts” to “Yes”.
4. 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.
5. 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.
6. Check for any wide elements. Sometimes your web theme may have specified the exact width of elements to be quite wide and as the style is carried across from web to mobile, it may cause horizontal scroll. Have a look at what elements may be wide and reset them in your mobile stylesheet.
7. If you want a bit more control over the various areas of your mobile site, try switch the layout mode from “table” to “div”. If you go to the “Advanced” settings, it’s an option in there.
8. Get styling! There’s 2 mobile stylesheets for you to tinker with and they’re both in the “Mobile Theme Settings” – the first one is a more generic stylesheet that clears a few things down ready for mobile, the second is there for you to make your changes in. You might have installed a completely customized web theme for your blog so you’ll have a little bit of work to do to make it look amazing on mobile!

Here’s a few screenshots of some of the best mobile blogs out there that have followed the guide above: (click on the image to get a bigger version)

WordPress Showcase - Mobile Web Junkie

WordPress Showcase - Red Yellow

WordPress Showcase - The Notebook World

WordPress Showcase - Ben90

WordPress Showcase - The MDA

WordPress Showcase - David Harrell

Hopefully you’ve now got a mobile site to be proud of – if so, let me know! Send over a URL and I’ll feature your blog in the gallery above.

Finally, a few people have asked if they can see the mobile CSS used to style one of the sites in the showcase – as this site was one of them, here is the custom mobile stylesheet used to style Mobile Web Junkie – just drop something similar into your custom stylesheet and tweak it to suit:

body{padding:0;margin:0;}
.main{background:#ffffff;padding:0;}
a, .navigation a{color:#BF362A; margin-bottom:5px; text-align:center;}
a:hover, .navigation a:hover{color:#ffffff;background:#bf362a;}
.homeCategoryHeader, .homeCategories, .author, .search_row, #header, #switchToDesktop, .entry_row, .entry_row_row td, .entry_row_row div,.post-date_row, .post-date, .postTitle, .navigation, .postmetadata, .postmetadata.alt, .spacemaker, .commentTitle_row td, .commentTitle_row div, .nav, .description{background:#f2f2f4;padding-left:2px;}
.entry_row.h2 a{color:#2C343F;font-weight:bold;font-size:1.2em;background:#f2f2f4;border:none; text-decoration:underline; padding-left:5px;}
.entry_row.h2 a:hover{text-decoration:underline;}
.nav{text-align:center; padding:9px 0px 14px 0px; font-size:115%;}
.author{padding-bottom:12px; padding-left:5px;}

So I was really pleased that developer stevena0 has written one for the Django framework.

If you’re using Django and want a mobile version of your application you’ve now got a great tool to do it – to find out more and also how to use the plugin, take a look at Steve’s Mobilize your Django site post on the snippets site.