FreePress Blog

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.

At long last, and after numerous requests, I’ve packaged up the plugin I wrote to add those collapse and expand links to my sidebar widgets.

The basic idea is that (if javascript is enabled) a script will run after the page loads that will go through your sidebar and add collapse and expand links to their titles, which will serve to show and hide any particular item. It will also remember their collapsed and expanded states for you via cookies.

The reason for doing it this way (as opposed to a server-side modification to the sidebar plugins) is that the collapse and expand links should not be added in the first place if the browser doesn’t support scripting, since their functionality is completely script dependent. Because this method uses javascript to modify the document and add the links, it will only add them when they would be able to function.

I finally listened to Dan and installed Mint for site stats, and I was intrigued by the “pepper” (kind of like a plugin for the stat tracking system) called “Bird Feeder“, which shows you some stats about your feeds.

The only downside to this was that all the info I could find after a quick web search suggested modifying (or “hacking”) your core WordPress files to add the necessary include statements for the feed tracker to work.

This was no good, so I set out to develop a quick plugin to accomplish this task. Here is the result.

Thanks / props to Chris for providing a sample of the hard-coded solution (editing the wp feed files) which I used in creating the plugin to accomplish the same thing.