PhoneGap WordPress Tutorial – Part 1

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<span class="hljs-selector-class">.phonegappro</span><span class="hljs-selector-class">.wordpress</span> WordPress
<span class="hljs-built_in">cd</span> WordPress

Add your platform

cordova platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>cordova platform <span class="hljs-keyword">add</span><span class="bash"> ios</span>

Edit your index.html

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

It’ll append all title into div id #listview

Build Mobile Apps with WordPress using PhoneGap Tutorial Series