build mobile apps with wordpress using phonegap
build mobile apps with WordPress using PhoneGap

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

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

Build Mobile Apps with WordPress using PhoneGap Tutorial Series

Sundaravel M

About the author: Hi! I'm Sundaravel (codesundar), Founder of codesundar.com. I have been a Web, Mobile App developer, Author, and Teacher since 2014. I also worked as a software consultant for fortune 500 companies. I created codesundar.com to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.