Consuming WordPress Rest API with Ionic 2

In this tutorial ,we are going to see how to build a cross platform mobile app and WordPress client for Android ,iOS and Windows Universal Platform using Ionic 2 or ,if you prefer ,Ionic 3 .

So if you have a WordPress website or blog and want to create a mobile version of it ,just follow with me . I’m going to cover all the required steps to build a mobile client which connects to and consumes the WordPress API .

Tutorial requirements

This tutorial has a few requirements ,you need to have the Ionic CLI installed .You also need to have a WordPress website installed either locally or remotely .

Prior to WordPress 4.7 ,you need to install the WordPress API plugin ,WP-API .For WordPress 4.7+ WP-API is integrated in the core so you don’t have to do anything .

Generating a new Ionic 2 / Ionic 3 project

Lets get started by generating a new Ionic 2 / Ionic 3 project .Open your command prompt on Windows or your terminal on Linux/MAC and enter this :

ionic start wp-ionic blank --v2

Wait until the command finishes and then enter into your project folder and serve it to make sure everything is OK .

Integrating WordPress with Ionic 2

We are going to use a WordPress API client for JavaScript which is designed specifically to work with WordPress 4.7+ .If you are using WordPress 4.6 or a prior version with the old WP Rest API plugin some commands will not work .

First of all,get the client from this link .

Unzip the content of wpapi.zip into app/assets

Next open index.html of your Ionic 2 project and include the library before Ionic scripts .

<script src="assets/wpapi.js"></script>

That is all we need to do ,to be able to use the WordPress Rest API client within our Ionic 2 project .

Generating a provider

Now lets generate an Ionic 2 provider to encapsulate the WordPress Rest API client logic .Make sure you are under project directory then enter :

ionic g service WPService

Open the generated provider from src/providers/wp-service.ts

To be able to access the client JavaScript API from TypeScript add

Next lets connect to our WordPress API endpoint

@Injectable() export class WPService { wp : any ; constructor(public http: Http) { console.log('Hello WPService Provider'); this.wp = new WPAPI({ endpoint: 'http://localhost/wp-json' }); console.log(wp); } //....

I’m using a local WordPress installation .If that is not your case you need to change the endpoint to point to your WordPress website domain name .

Make sure to add this provider to the list of providers at src/app/app.module.ts

import { WPService } from '../providers/wp-service'; @NgModule({ /* .... */ providers: [ StatusBar, SplashScreen, WPService, {provide: ErrorHandler, useClass: IonicErrorHandler } ] }) export class AppModule {}

Now lets generate a Posts page

Again include the page in src/app/app.module.ts

import { PostsPage } from '../pages/posts/posts'; @NgModule({ declarations: [ MyApp, PostsPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, PostsPage ], providers: [ StatusBar, SplashScreen, WPService, {provide: ErrorHandler, useClass: IonicErrorHandler } ] }) export class AppModule {}

Lets also add a menu to our app so we can access our page(s)

Open or add an app.html file in/from src/app and paste this code to create a menu which has links to all pages in our project

<ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> </button> </ion-list> </ion-content> </ion-menu> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

You need to have the code at src/app.component.ts similar to this :

import { Component, ViewChild } from [email protected]/core'; import { Nav, Platform } from 'ionic-angular'; import { StatusBar } from [email protected]/status-bar'; import { SplashScreen } from [email protected]/splash-screen'; import { PostsPage } from '../pages/posts/posts'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = PostsPage; pages: Array<{title: string, component: any}>; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { this.initializeApp(); // used for an example of ngFor and navigation this.pages = [ { title: 'Posts', component: PostsPage }, ]; } initializeApp() { this.platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. this.statusBar.styleDefault(); this.splashScreen.hide(); }); } openPage(page) { // Reset the content nav to have just this page // we wouldn't want the back button to show in this scenario this.nav.setRoot(page.component); } }

Don’t forget to add a button to toggle the menu on and off in your pages

<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Posts</ion-title> </ion-navbar> </ion-header>

If you have generated your project based on the menu template ,you will have a menu already setup for you and you don’t have to do all these steps .

The next step now is to inject the WPService provider via PostsPage provider :

Open src/pages/posts/posts.ts then add

/* ... */ import { WPService } from '../../providers/wp-service'; @Component({ selector: 'page-posts', templateUrl: 'posts.html' }) export class PostsPage { constructor(public navCtrl: NavController, public navParams: NavParams ,private wpService : WPService) {} ionViewDidLoad() { console.log('ionViewDidLoad PostsPage'); } }

Go ahead and serve your project .

You should see a console log printing the WPAPI object ,if everything goes right.

Displaying WordPress posts

After we have successfully integrated the WordPress Rest API client within our Ionic 2 app ,lets now fetch and display WordPress posts in our mobile app .

So go ahead and open app/providers/wp-service.ts and lets add a method to fetch posts using the Rest client API .

@Injectable() export class WPService { wp : any ; constructor(public http: Http) { console.log('Hello WPService Provider'); this.wp = new WPAPI({ endpoint: 'http://localhost/wp-json' }); console.log(this.wp); } public posts(){ return this.wp.posts().then(function( data ) { // do something with the returned posts //console.log(data); var paging = data._paging; var results = []; for(var i = 0; i < paging.total ; i++) { results.push(data[i]); } return results; }).catch(function( err ) { // handle error console.log(err); return err; }); } }

Next open the PostsPage page and add this

@Component({ selector: 'page-posts', templateUrl: 'posts.html' }) export class PostsPage { public posts ; constructor(public navCtrl: NavController, public navParams: NavParams ,private wpService : WPService) {} ionViewDidLoad() { console.log('ionViewDidLoad PostsPage'); var that = this; this.wpService.posts().then(function(r){ that.posts = r; console.log(that.posts); }) } }

After fetching the posts ,we need to display them ,so open src/pages/posts/posts.html and add

<ion-content padding> <ion-list> <button ion-item *ngFor="let post of posts" (click)="itemTapped($event, post)"> <ion-icon name="list" item-left></ion-icon> { { post.title.rendered } } </button> </ion-list> </ion-content>

You should see a list of posts ,depending on the posts you have on your WordPress website .

Conclusion

That is the end of this tutorial ,It is just a basic demo showing how to use the WordPress Rest API in Ionic 2/3 apps but you can develop your app to include more advanced things such as fetching and displaying categories , add posts pagination and many other features .

Share on Twitter Share on Facebook Share on Google+

Originally published at www.techiediaries.com.