WordPress Mobile Admin UI for iPhone

Dan and I just wrapped up a project we’ve been working on recently. It’s a WordPress plugin that adjusts the admin interface for WordPress to make it more useable on mobile devices like phones.

You can check it out at its home on the WordPress Extend site: Mobile Admin.

It’s specifically targeted for the iPhone, in somewhat of a response to the recent release of a similarly iPhone-targeted admin UI for Moveable Type, but the eventual goal is to support a common, slimmed down view of the interface for any mobile device, and then just add custom styles and behaviors (via script) only for devices that are known to support them.

The approach we took was to use a plugin to either hide, alter, or remove elements that interfered with the standard display, and then add a few things back in to tie it all together on the smaller size screens. Here are some of the more technical details:

• CSS was the preferred method for changing things; the plugin will remove the normal CSS associated with the admin pages and replace it with one specific to the iPhone (and alternate stylesheets later, as more browsers are supported).
• In some cases where CSS rules could not be used to extract things from the page, or items needed to be reordered, etc., we used PHP’s regular expression search and replace support to alter the output of the page just before it gets rendered to the browser.
• Some items which were still necessary (a lot of the details on the post page, specifically) were left in but we added script to make the sections that contained the non-primary features collapsible, so as not to clutter the interface.
• In one case (the manage posts page) the interface was table based, and while it was an appropriate choice for normal size screens, we needed to extract it from that grid-based format to make it “flow” better on the narrow screen. Again, regular expressions to the rescue.

We broke up the work by concentrating on what our areas of strength; I did most of the PHP and javascript coding, while Dan did most of the CSS styling. I don’t have much of an eye for design, even though I’m very familiar with CSS on a technical level. We’ve taken a similar approach on previous efforts, but this will be the first publicly released one.

You can read more details here on Dan’s post.