Learn how to get WordPress content into mobile app using the WP-API and the Ionic Framework.

It works great with WordPress as a back-end for your mobile app data, in this article we’ll build a mobile app with Ionic that uses WordPress data. This tutorial is for developers, if you are not comfortable with code, you may not get much out of it.

Ionic

Ionic allows you to add elements to your app such as menus, page transitions, modal windows, and handle your data with pre-built “drop-in” components. It is built on AngularJS, although it abstracts much of the complexity of Angular away, and makes it easier to use. Over 600,000 apps have been built with Ionic, and they just released version 1.0 a few days ago.

Mobile apps built with Ionic can be published on iOS and Android, and more platforms are coming soon. Ionic apps are super fast, beautifully designed, and a pleasure to use.

Hybrid apps have admittedly been terrible in the past, but Ionic, along with advancements in device technology, are changing that quickly. Using a well-built Ionic app on a modern device is almost indistinguishable from a native app in many cases.

Where does WordPress come in?

WordPress is the most popular content publishing system on the web, it comprises 24% of the entire internet. Mobile apps need somewhere to store data, and WordPress is where 24% of website data lies. Using Ionic with WordPress is an important integration for any developer.

A new development in WordPress is the WP-API, which allows you to output your site content into a standardized JSON API. Since mobile apps normally use an API to get remote data, using the WP-API is a great way to get your WordPress data into a mobile app.

Let’s look at how to use the WP-API in an Ionic mobile app.

The App

What will the app look like? What can it do?

The possibilities are endless, you can add WordPress content like posts and pages, custom non-WordPress content, and app features like geolocation and push notifications. You can combine all of the great Ionic components, along with content from WordPress. Since the WP-API is a REST API, we can also create WordPress content from the app, login, and more.

We’ll focus on getting some simple WordPress content into the app, and then look at integrating some custom plugins and other data.

Project files

All of the code below is from this project file. Unzip the file, navigate to the reactorApp/www folder. There you can find the files we will edit in this tutorial.

Quirks

Many people who are familiar with WordPress, but not familiar with the way APIs work may be surprised by what they can and cannot do.

WordPress Plugins

Most plugins do not work out of the box. The API is just text data, it does not handle server side processing, or functionality.

Take a contact form plugin for example. It uses HTML markup, server side processing, CSS, and Javascript to work. The only thing we get through the API is the markup. To get the form to work, we would have to completely rebuild the form in the app, and make it communicate with our server via Javascript.

There are some workarounds, such as embedding an iframe with the form inside of it. This allows everything to work properly in the app.

Another example would be a podcasting plugin. We cannot use the podcast player that is on the website, but we can pull in the url of the .mp3 file from WordPress, and make our own audio player in the app.

Plugins just add content can work through the API, but many times we have to add their meta data to the API. Eventually plugin authors may add support for the API so we don’t have to do as much ourselves, but as of right now there are very few.

WordPress themes

Themes have almost nothing to do with the API, and will not be used at all in your app.

If your theme has added plugin-like functionality such as shortcodes, they will appear in your app. If it has extra features like a slider, job listings, etc, those will not work in the app. Any custom styling for layouts or colors will not translate to the app.

The WP-API gives you WordPress content, not display or functionality.

Enabling the WP-API on your site

The first thing you need is a WordPress site with the WP-API active. At the time of this writing, the WP-API is in plugin form, but it will eventually be merged into WordPress core.

Install the WP API plugin on your WordPress site. This exposes your site data, you can see it under http://mysite.com/wp-json. There are also various routes for WordPress content, such as wp-json/posts, wp-json/posts/ID or wp-json/media.

Your WordPress site data is now in a structured JSON format, it looks like this.

This is the wp-json/posts endpoint. You’ll see that it gives us the post content, author, date, excerpt, and basically everything that can be displayed on the site. What it doesn’t give us is post meta, because that requires authentication. Other endpoints, such as wp-json/users also require authentication. We’ll dig into that further down the page.

Querying the WP-API

To get data from the WP-API into your app, you’ll send an ajax GET request to one of the endpoints.

Next we need to add a state in app.js for our new page. This tells our application that this page exists, and tells it what to display. Open reactorApp/js/app.js, and copy the playlists state, then paste it directly below. Change all instances of “playlist” to “post” again. Here’s what that looks like:

You’ll notice we added this line: controller: ‘PostsCtrl’. The controller ‘controls’ what happens on that page, it’s where you’ll put your javascript functions and variables. In Angular, a controller is limited in scope to just that page, so any functions you write will only execute when that page is loaded.

In our case, the PostsCtrl is where we’ll pull in our WordPress posts.

Let’s make that controller now.

Posts Controller

Go to reactorApp/js/controllers.js, and create a new controller. Copy the PlaylistsCtrl directly underneath and call it PostsCtrl, and delete the $scope.playlists information. It should look like this:

Pay attention to the semi-colon placement, it should only be at the very end of the file.

Next, let’s add a request to our API in the PostsCtrl. First, we define our API url, along with a jsonp callback. Next, we call our API using the Angular $http.jsonp() function, which is similar to our jQuery ajax call above. We are loading our post objects into $scope.posts, which we will use in our posts.html template to display the posts.

[javascript]
.controller(‘PostsCtrl’, function($scope, $http) {

// You can change this url to experiment with other endpoints
var postsApi = ‘http://url.com/wp-json/posts?_jsonp=JSON_CALLBACK’;

At this point you can load the app in your browser, visit the Posts page by clicking the menu link, and you should see your post titles. We still can’t click through to the single post page, let’s do that next.

Single Post Pages

To add a single post page, we need to go through all of the steps we did above (minus the menu item), but make everything “post” instead of “posts.”

First, duplicate www/templates/playlist.html into a new file called post.html. Change the markup to look like this:

Both {{post.title}} and ng-bind-html=”content” will pull in our WordPress data. We are using ng-bind-html because we need to display raw html content. If we don’t use this, we’ll lose some data through Angular’s built in sanitization.

Next, we need to create a route and a controller for our single post page.

There’s a few things going on here. First, we are querying the WordPress API the same way we did on the posts page, but we are getting a single post instead of all the posts. We get the post ID and add that to our url, so it looks like this:

Next, we use $sce.trustAsHtml which is an Angular service that allows us to output raw html. If we didn’t do this, we would lose some of our content.

Some of this code is redundant so it would be easier to understand. In a production app, you’d want to create a service for querying the API that is reusable, but that’s for another tutorial.

The working app

At this point you should have a fully working posts list and single post page. Clicking a post title on the Posts page will bring you to the single post view.

There is still a lot more we can do with this app, such as pull to refresh, infinite scroll, adding support for custom plugins, login authentication, etc. In future articles we will look at adding more custom functionality to your app.

One question… I would assume pulling in WP Page content could be done using the Single Post Pages example here, but it’s not working for me. Any advice on how to pull in content from specific WP pages?

Hi i downloaded the project and added an android platform to it.
After i run build, the app works on android device but the posts don’t show..it comes up blank.
Ive had similar problems with my own app..
runs perfectly in browser but when deployed to device the posts dont show up..
Almost as though the controller directive isn’t running

hi,
thanks for useful guide. I tried to run this application on real device but it was not shows the posts content on post menu opening. I tried in several devices with several version of androids. but the same result, however it works fine with “ionic serve” command.

Learn more about Reactor

About Reactor

Reactor is a new way to make mobile apps with WordPress, brought to you by AppPresser. It is based on a year of hard work, research, development, and customer feedback. It is everything our customers have been asking for and more, we hope you like it.