WordPress Mobile

wordpressmobileYesterday, I spoke at WordCamp Orange County about WordPress Mobile. We discussed theory for a bit, then demonstrated a few live examples of how you can create your own mobile app using WordPress as the delivery platform. The three examples I demonstrated were AppMakr.com, Red Foundry and a custom iPhone app that the Zeek team built from scratch. All of the code shown was open sourced. Here is a quick summary:

For our demo, we created a basic WordPress application at http://photos.zeek.com/. This is a bare bones site that uses the twenty twelve theme. We only have posts with titles and some copy in the body of the post. Each post has a feature image attached to it.

There are several ways to get data in and out of a WordPress application. The most basic way to get data is through RSS. RSS feeds have been built into WordPress for a long time and all WordPress applications come with it built in. You just need to add “/feed/” to the end of any WordPress URL and you will see the RSS feed. ie http://photos.zeek.com/feed/.

By default, RSS does not display any image information. For our apps to work properly, we needed to add 2 item parameters to the standard rss feed. We accomplished this with a short custom plugin. It is available here: http://github.com/stevezehngut/rss-thumbnails. This plugin adds “post-thumbnail” which is the URL of the 150×150 icon for the featured image and “post-image,” the URL of the full size featured image.

Another way to access WordPress data is through XML-RPC, an API that lets you call functions directly to WordPress. All of the functions are detailed here: XML-RPC_WordPress_API. For example, wp.newPost allows your application to create a new post remotely. XML-RPC is secure and requires a login and password for each function call. There are 2 PHP sample scripts for getting a list of all posts and for creating a new post here: access-xmlrpc-with-php. Here is a sample of what wp.getPosts will return: get-posts.php

A third way to access WordPress data is by using JetPack. JetPack now includes the REST API which includes some similar calls to the XML-RPC and additional calls to community data, like followers, freshly pressed and post likes. All of the data returned using the REST API is in json format. The documentation for this API can be found here: developer.wordpress.com/docs/api/.

I then talked about how to make a native mobile app. The first is with sites like AppMakr. These sites convert your RSS feed into a native app for iPhone and Android. You are allowed a small amount of customization, but for the most part AppMakr decides the look and feel of your app.

The second platform shown was Red Foundry. We created an Instagram-like photo gallery that displays photo thumbnails and full size images. The code for this app is available here: http://github.com/stevezehngut/photo-gallery-redfoundry.

red-foundry-home red-foundry-slideshow

Last, we created a native iOS app that allows you to view the photos and create new posts. You can download the app to your iPhone and test it with your own WordPress install here: Compiled iPhone App. The xcode source is available here: http://github.com/stevezehngut/photo-gallery-ios.

ios-home ios-create

Please note that none of the apps went through any beta testing. We wrote these as quick demos and they are not polished. Enjoy and let us know if you have any questions in the comments.

Leave a Comment