WordPress and Phonegap (part 1)

WordPress is an excellent CMS and provides a lot of flexibility for developers, users, authors, and everyone who manages websites.

I wrote a blog post phonegap few months ago and few people were interested to learn more how to use WordPress as a backend for a mobile app. Phonegap is just one of the tools you can build a mobile app. WordPress is, in this case, API server, it manages database and all the content stored in there.

There are multiple formats you can display data returned from database, some of them are HTML, XML, JSON (what we need), and XML-RPC (default WordPress format for remote publishing).

wp-phonegap

If you are writing Phonegap app – you are writing it in JavaScript (probably using jQuery to make life easier). Today’s standard for communicating with APIs is JSON (XML used to be very popular). So our goal, after WordPress structure is done and some data is stored in database, is to convert posts, pages, comments, and other data to JSON format.

It’s not that hard if you are good with PHP. All you have to do is “echo json_encode” your data, but it requires some work. And because WordPress is awesome – there are tons of plugins to do just that. One of my favorite is JSON-API. Although it hasn’t updated for couple years – it works pretty well still.

It gives you access to all the data on your site, just visit URL provided in the plugin dashboard page, URL for recent posts would “example.com/api/get_recent_posts”, need to access woocommerceproducts in json format? – No problem. Url would be “example.com/api/get_recent_products” – you get the idea… Also there is a way to authorize users and publish posts via POST request, just turn it on in plugin’s settings.

And if are developing in Chrome (like I am) – you can use great API tool like Postman to see your data nicely organized, simple, awesome.
json-wordpress

This was very quick introduction how to get started developing WordPress and Phonegap. First thing – build WordPress site and add some content, just enough so you can see JSON structure later on. Second add JSON API plugin, configure it and make a list of all endpoints you need (recent pages, recent posts, recent custom post types, etc).

Next, I will write how to prepare phonegap for Android or iPhone (leave comments what you prefer) nad what we need next to connect Phonegap and WordPress together.

Live example of my blog in JSON format http://alexbachuk.com/api/get_recent_posts/?dev=1

Please, leave comments what you want to learn more about WordPress and JSON.

Part 2
Part 3

22 thoughts on “WordPress and Phonegap (part 1)

  1. Very interesting… Have you see this book:
    WordPress Mobile Applications with PhoneGap http://www.packtpub.com/wordpress-mobile-applications-with-phonegap/book Any thoughts on if it would be a helpful purchase to get wordpress to play nice with phonegap? I need to build some basic apps for mobile that do nothing I couldn’t get done easier with a wordpress website. Since I’m a wp developer first, I’m looking for the quickest, easiest route to get a mobile app built and this sounds promising with a minimal learning curve. Your thoughts so far are appreciated!

    • I think it’s worth looking at. The more ways you know how to do something the better decisions you can make, imo.

  2. Absolutely great.
    Was looking for a way to publish my blog(s) with an app without Android/iOS knowledge.
    So i found jQuery mobile and PhoneGap and this leads me to your usefull post regarding WordPress an PhoneGap.
    Many thanks!

  3. Pingback: Getting data from JSON using javascript - PhoneGap and WordPress | BlogoSfera

  4. Pingback: WordPress and Phonegap | Coding Logbook

  5. Hello, i am unable to get the “thumbnail_images”. Which is actually “featured image”.

    I am trying to do it like this data.posts.thumbnail_images.full.url

    What will be the solution to get the featured image?

  6. Hi Alex, I noticed that using the latest version of phonegap/cordova with the jquery mobile latest demo version, I can’t seem to go about loading the blog posts (using your code) on the index page. I tried using app.blog(); but it doesn’t seem to work. Is app.initialize(); needed?

    I’m stumped.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>