Last week WordPress founding developer Matt Mullenweg was interviewed by John Battelle at SXSW where he was startlingly candid about the shortcomings of WordPress’s iPhone app
“Twitter inspired us to start taking mobile seriously,” he added. “You open it [Twitter’s app] at any time and instantly start reading your friends’ tweets. If you open our app you get a blank screen.”
Mullenweg was startlingly candid about the shortcomings of WordPress’s iPhone app, which he described as “not good yet.” His engineers are working to improve it, he added.
Not Good Yet
I’m a big WordPress fan, having used it for years on my personal blog and more recently here on iDevRecipes. I tried the WordPress iPhone app a while back and I’d wholeheartedly agree with Matt that it’s “not good yet.”
Now just as Matt said, the WordPress Mobile team is working on it. Just yesterday, they released version 2.7 of the app with over 100 bug fixes and UI improvements like pull to refresh.
Making it Great
But Matt’s comments got me thinking on how to make the WordPress app really great. Most iPhone apps initially focus on content consumption with a splash of account management. The thinking is that users are much more likely to consume on these devices.
The WordPress app is actually open sourced and you can see that it uses the WordPress XML-RPC API which predated the iPhone to let you manage your blog.
I think this XML-RPC API nudged the WordPress iPhone app towards a full blown account management app. But where is the content consumption? (reading the comments on your posts doesn’t count!)
Reimagined Around Content Consumption
So my first thought was to reimagine the app around content consumption. WordPress.com has a bunch of great curated content. They highlight posts in their Freshly Pressed section and they categorize blogs based on tags.
A little sketching, thinking and poking around WordPress.com and here is what I came up with:
- First convert the app to a tab based app
- Fill the first tab with the Freshly Pressed content
- Fill the second tab with Tags, letting you explore the tags and then see blogs associated with each tag
- In the third tab put Posts I like. You’d be able to add to this list either on WordPress.com or by liking posts from within the app
- In the fourth tab put Subscriptions, letting you see the newest posts from the blogs that you subscribe to (Subscriptions are like RSS feeds for non-techies)
- Take the existing app and put it under a My Blogs tab at the end of the tab bar
Prototype Implementation
Of course this is an iOS development blog, and we can’t have a post without code! So I implemented the first two items in the list. Using our previous Twitter custom tab bar recipe I converted the main view of the app to be tab bar based app. Next I added the Freshly Pressed content to the first tab.
Freshly Pressed
Normally when displaying existing content in an iPhone app, you can’t go wrong with RSS feeds. Freshly Pressed has an RSS feed, but it just displays the first page of content. Also, the image for each featured post is offset using a background-position CSS property that the RSS feed doesn’t expose.
Scraping
So I did what seemed reasonable at the time: I wrote a ruby script that scraped the Freshly Pressed pages and put some JSON up on S3. Now keep in mind that we’re just experimenting here and we can easily swap this scraping out for a real Freshly Pressed API.
Some interesting things about the ruby script: The images uses either a WordPress image server to resize the original images or an imgpress WordPress service to convert the blog home page to an image, and in both cases I change the width from the 223 pixels the web site uses to 320 pixels so the images look nice on the iPhone. After increasing the size from 223 to 320, I also have to increase the pixel offset for each image. For example, if the offset was -30 pixels for the original image, then the offset for the new image is -30 * (320/223).
Without a real design, my first cut iteration of the table view cells is to mirror the look of the web site, including the colors, fonts and general layout
Tapping on each cell loads the blog post in a UIWebView
What do you think?
If you were to imagine a really great WordPress iPhone app, what would you come up with?
Are there things about this design/implementation you like/don’t like?
Let me know in the comments!
Full Source code: https://github.com/boctor/idev-recipes/tree/master/WordPressReimagined
iDev Recipes 
Isn’t the WordPress app primarily to create content? I don’t have an iPhone (but I do use WordPress.com) so I haven’t paid much attention to it but it seems to me it should default to opening in New Post. That’s what I’d want to do with it immediately.
Very cool!
Thanks Matt!
Thanks Peter for for these useful sources, one question : which plugin do I need to install on the wordpress blog in order to display correctly articles in the UIWebView, because the standard pages are not well designed for IOs screens
Thanks
Just compiled and ran the app, looks great. Inspirational.
I always though the WordPress app was missing something and content was obviously the answer! I compiled and ran your app and it is MUCH better. If wordpress even just added the freshly pressed bit I would be in the app all the time.
WordPress app was missing something and content was obviously the answer!
Really great concept Peter!
Great idea!
One question, how could this be modified to display and integrate content from a .php file online?
I use the WordPress app on my iPhone to manage my blog. What do I do most on my own blog? Post. I’d like to echo what mikecane said: I’d really prefer the opening screen to be a new post. Quick to open, quick to write, and quick to post, even with no network connectivity (automatically post it later when the network is available).
I use Google Reader to consume content, from many varied sources, on all my computers. I had not considered using the WordPress iPhone app for anything other than my own WordPress blog. Why would I want a reader that was tied to one device and platform?