Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Use a WordPress site to create a mobile app

Use your WordPress site as a data source for a cross-platform mobile app using the PhoneGap framework

One of the big challenges of native mobile application development is the requirement to learn multiple languages for each platform. iOS uses Objective C, Android apps are written in Java and Windows Phone needs .NET experience. Thankfully, there are a few ways in which you can simplify the process. One of the easiest is to use the PhoneGap framework. PhoneGap allows you to create native apps using web technologies such as HTML, JavaScript, jQuery, CSS and many more.

How does this work? Well, PhoneGap at its core uses Cordova, which is run by Apache. Cordova sits between the HTML and JavaScript you write and translates those into native API calls. The app is essentially an embedded website, made to act like a native app. It’s then trivial to convert your app to work on any platform, and Cordova/PhoneGap handles the discrepancies between each operating system’s API. This guide will teach you how to produce an Android app that pulls in posts from a WordPress blog.

Install JSON plug-in

First off you’ll need to install a plug-in into WordPress that gives you a JSON endpoint to access from within the app. On the New Plugin page search for ‘JSON API’ by Dan Phiffer, although there are others available. Install it, and once finished, activate the plug-in.

Make an API call

Now we can make RESTful calls on to our WordPress site and get a JSON response with data from our blog. Performing the call is a simple case of entering the URL of your site, then appending the ?json query string. You can then make a variety of different calls to your site.


Download PhoneGap

Next we need to download the latest version of PhoneGap and get our development environment setup. Go to and grab the current release which will be in a zip file. Extract the zip into a new directory.

Set up Android SDK

We also need the relevant SDK for the platform we are targeting. In this case we are going to be developing an Android app, so head on over to and download the ADT bundle. This contains all the things required to develop for Android including the Eclipse IDE, the main Android SDK and platform tools.

Windows PATH variables

So you don’t need to keep typing in the full path for all the commands, we can set up PATH variables – this isn’t necessary but it does make things easier. In Windows, right-click on My Computer and then Properties. Choose ‘Advanced System Settings’ and then Environment Variables. Select the PATH option in System variables and edit with the following:

001 Windows:
 003 ;C:Developmentandroid-sdk-windowsplatform-tools;C:    Developmentandroid-sdk-windowstools 

PATH Variables OSX

In OSX, open up a new Terminal, edit your bash profile and add in the path using the steps below. Make sure that you edit the location of your Android SDK to the location that you installed it earlier.

001 touch ~/.bash_profile; open ~/.bash_profile 

add the following

002 export PATH=${PATH}:/Development/android-sdk-macosx/    platform-tools:/Development/android-sdk-macosx/tools 

and then finally

003 source ~/.bash_profile