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

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://phonegappro.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://phonegappro.com/wp-content/uploads/2016/10/wordpress.zip” text=”DOWNLOAD SOURCE CODE”]

Output

Build Mobile Apps with WordPress using PhoneGap Tutorial Series

  • Rebman Sunzu

    what could be the issue it give out this on browser and not working at all on mobile
    {“status”:”ok”,”count”:3,”count_total”:3,”pages”:1,”posts”:[{“id”:8,”type”:”post”,”slug”:”2r35r43545″,”url”:”http://sunzboy.ml/2017/01/12/2r35r43545/”,”status”:”publish”,”title”:”2r35r43545″,”title_plain”:”2r35r43545″,”content”:”45454545454tyytuyttjyyjniour6yr5e6uyrjruyuyuyuyuyuyuyruyuyun”,”excerpt”:”45454545454tyytuyttjyyj iour6yr5e6uyrjruyuyuyuyuyuyuyruyuyun”,”date”:”2017-01-12 13:45:16″,”modified”:”2017-01-12 13:45:58″,”categories”:[],”tags”:[],”author”:{“id”:1,”slug”:”admin”,”name”:”admin”,”first_name”:””,”last_name”:””,”nickname”:”admin”,”url”:””,”description”:””},”comments”:[],”attachments”:[],”comment_count”:0,”comment_status”:”open”,”custom_fields”:{}},{“id”:5,”type”:”post”,”slug”:”mambooo”,”url”:”http://sunzboy.ml/2017/01/12/mambooo/”,”status”:”publish”,”title”:”rtyteryery”,”title_plain”:”rtyteryery”,”content”:”eyreytytyeyereryewn”,”excerpt”:”eyreytytyeyereryewn”,”date”:”2017-01-12 13:44:22″,”modified”:”2017-01-12 13:44:51″,”categories”:[],”tags”:[],”author”:{“id”:1,”slug”:”admin”,”name”:”admin”,”first_name”:””,”last_name”:””,”nickname”:”admin”,”url”:””,”description”:””},”comments”:[],”attachments”:[],”comment_count”:0,”comment_status”:”open”,”custom_fields”:{}},{“id”:1,”type”:”post”,”slug”:”hello-world”,”url”:”http://sunzboy.ml/2017/01/12/hello-world/”,”status”:”publish”,”title”:”Hello world!”,”title_plain”:”Hello world!”,”content”:”Welcome to WordPress. This is your first post. Edit or delete it, then start writing!n”,”excerpt”:”Welcome to WordPress. This is your first post. Edit or delete it, then start writing!n”,”date”:”2017-01-12 08:54:06″,”modified”:”2017-01-12 08:54:06″,”categories”:[],”tags”:[],”author”:{“id”:1,”slug”:”admin”,”name”:”admin”,”first_name”:””,”last_name”:””,”nickname”:”admin”,”url”:””,”description”:””},”comments”:[{“id”:1,”name”:”A WordPress Commenter”,”url”:”https://wordpress.org/”,”date”:”2017-01-12 08:54:06″,”content”:”Hi, this is a comment.nTo get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.nCommenter avatars come from Gravatar.n”,”parent”:0}],”attachments”:[],”comment_count”:1,”comment_status”:”open”,”custom_fields”:{}}]}

    • Paste your code on somewhere & share link

      • Rebman Sunzu

        when i run this link sunzboy.ml/?json=get_recent_posts on browser, the post from wordpress does not show up. and when run on android mobile nothing display

      • Rebman Sunzu

        could you advice on this?

      • Rebman Sunzu

        The code is the same like the tutorial above what i did is just changing the
        var url=”http://yoursite.com/?json=get_recent_posts”; to var url=”https://sunzboy.ml/?json=get_recent_posts”;

  • ashishtalreja10

    I got this error when trying to get the posts
    No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
    Can you share the solution?