Build Mobile Apps with WordPress using PhoneGap / Cordova - Part 1

build-mobile-app-with-wordpress

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

Requirements:

[download src="https://codesundar.com/wp-content/uploads/2016/10/wordpress.zip" text="DOWNLOAD SOURCE CODE"]

Step 1: Setup 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

Step 2: Creating Cordova Project & Edit code

  • Create New project using Cordova CLI

    cordova create WordPress com.phonegappro.wordpress WordPress

  • Change your working directory

    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