PhoneGap WordPress Tutorial – Part 1

by

As per reader suggestion, I’m going to write an article for how to build mobile apps with WordPress using PhoneGap / Apache Cordova.

Requirements:

Step 1: Set up a WordPress Blog

  • Login to your WordPress blog
  • Add WordPress JSON API (Plugin) Plugin
  • Activate plugin
  • validate Plugin using yourwebsite.com/?json=get_recent_posts
  • It will return the latest post from your blog (10 recent posts) as JSON

Let’s Start

Create a New project using Cordova CLI

cordova create WordPress com.phonegappro.wordpress WordPress
cd WordPress

Add your platform

cordova platform add android
cordova platform add ios

Edit your index.html

<script type="text/javascript">
$(document).ready(function()
  {
    var url="http://yoursite.com/?json=get_recent_posts";
    $.getJSON(url,function(result){
    $.each(result.posts, function(i, field){
        var title=field.title;
        $("#listview").append("<li><h2>"+title+"<h2></li>");
    });
    });
  });
</script>
<ul id="listview"></ul>

It’ll append all title into div id #listview

Build Mobile Apps with WordPress using PhoneGap Tutorial Series