Connect wordpress to ionic 2 using REST API

In this tutorial we are creating ionic 2 app that fetch wordpress post using REST API.

Configure WordPress

Go to your wordpress dashboard
Install the plugin “WordPress REST API (Version 2)”. This plugin provides an easy to use REST API. Here is Documentation.

Let’s Go

Before We start make sure your ionic is updated with ionic 2. If not then update ionic with following command

npm install -g ionic@latest

1	npm install -g ionic@latest

Let’s start with creating fresh new ionic 2 blank project called wordpressdemo

Ionic start wordpressdemo blank --v2

1	Ionic start wordpressdemo blank --v2

Got to project folder

cd wordpressdemo

1	cd wordpressdemo

Adding platform

ionic platform add ios
OR
ionic platform add android

ionic platform add ios

ionic platform add android

Note that if you have to make ios app then you required mac.

Let’s fire up our live preview:

ionic serve

1	ionic serve

If you have the live preview open in a browser window using ‘ionic serve’, any time you make a change to a file and save, the app will reload with your changes. Pretty cool!

In over project under wordpressdemo\src\pages there is home folder default. We are fetching list of wordpress post to her in home page.

We required another page for displaying information about single post of wordpress.

We can easily do this with Ionic’s cli command ionic g page. First, press cmd c to stop the ionic preview. Next, run:

ionic g page singlepost

1	ionic g page singlepost

This will create a new folder, .ts, .scss, and .html page called singlepost. (Note: If you run in to an error with the ionic g page creation, you can simply create the folder and files manually. Make sure to also import this page into the home page).

After creating the page. Next we have to import singlepost page to app.module.ts.

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SinglepostPage } from '../pages/singlepost/singlepost'

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SinglepostPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SinglepostPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

import { NgModule, ErrorHandler } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { SinglepostPage } from '../pages/singlepost/singlepost'

@NgModule({

declarations: [

MyApp,

HomePage,

SinglepostPage

imports: [

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

SinglepostPage

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]

})

export class AppModule {}

Home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Wordpress Posts
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <ion-list>
    <button ion-item *ngFor="let post of posts" (click)="itemTapped(post)">
    <h2 [innerHTML]="post.title.rendered"></h2>
    <p [innerHTML]="post.excerpt.rendered"></p>
    </button>
  </ion-list>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Wordpress Posts

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

</button>

</ion-list>

</ion-content>

Go to home.html and paste above code. This will display the title and excerpt of each and every post from wordpress.

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { SinglepostPage } from '../../pages/singlepost/singlepost';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  api_url='http://codemaker.esy.es/wp-json/wp/v2/';
  posts:any;

  constructor(public navCtrl: NavController,public http:Http) {
      this.http.get(this.api_url + 'posts').map(res => res.json()).subscribe(posts => {
        console.log( posts );
        this.posts=posts;
      }, (error)=> {
         console.log('error',error);       
      });
  }

  itemTapped(post){
      this.navCtrl.push(SinglepostPage, { post_data:post });
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import {Http} from '@angular/http';

import 'rxjs/add/operator/map';

import { SinglepostPage } from '../../pages/singlepost/singlepost';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

api_url='http://codemaker.esy.es/wp-json/wp/v2/';

posts:any;

constructor(public navCtrl: NavController,public http:Http) {

this.http.get(this.api_url + 'posts').map(res => res.json()).subscribe(posts => {

console.log( posts );

this.posts=posts;

}, (error)=> {

console.log('error',error);

});

}

itemTapped(post){

this.navCtrl.push(SinglepostPage, { post_data:post });

}

At the top of the file, we imported Http and rxjs, which are required for our http call to get the posts.we added in Http to our constructor so we can use it in our class as this.http.

Replace the http://codemaker.esy.es domain with your wordpress website domain name in api_url variable

All the stuff of fetching post list of wordpress are done in constructor() function.

After clicking on post itemTapped() function will open SinglepostPage using push() method.

singlepost.html

<ion-header>

  <ion-navbar>
    <ion-title>{{post.title.rendered}}</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
 <div *ngIf="post" class="selection">
    <h2 [innerHTML]="post.title.rendered"></h2>
    <div [innerHTML]="post.content.rendered"></div>
 </div>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>{{post.title.rendered}}</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</div>

</ion-content>

In post variable contain the information about post we want to display.

Next, go into singlepost.ts and paste in this code:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-singlepost',
  templateUrl: 'singlepost.html'
})
export class SinglepostPage {
  post:any
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.post= navParams.get('post_data');
    console.log(this.post);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SinglepostPage');
  }
}

import { Component } from '@angular/core';

import { NavController, NavParams } from 'ionic-angular';

@Component({

selector: 'page-singlepost',

templateUrl: 'singlepost.html'

})

export class SinglepostPage {

post:any

constructor(public navCtrl: NavController, public navParams: NavParams) {

this.post= navParams.get('post_data');

console.log(this.post);

}

ionViewDidLoad() {

console.log('ionViewDidLoad SinglepostPage');

}

In constructor() we are fetching ‘post_data’ which is in navParams passed from home page.

Screenshort

Jay
March 14, 2017 at 6:29 am

Very good tutorial, thanks you very much. Is wordpress can be a good backend for Ionic?

- Anand Parmar
  March 21, 2017 at 7:43 am
  
  yes wordpress is good backend for Ionic but for specific purpose like bloging and woocommerce.
  
Shing
March 21, 2017 at 3:46 am

I error with my content because image url not from my website , it from localhost, how to replace localhost with my website.
GET http://localhost:8100/wp-content/themes/bimber/dummy-data/original/images/single_content_mp4_poster_v01.jpg

yado
April 17, 2017 at 8:20 pm

If appear error “EXCEPTION: No provider for Http!”
need to import in app.module.ts the http provider

import { HttpModule } from ‘@angular/http’;
and into the imports
imports: [
HttpModule,
IonicModule.forRoot(MyApp)
],

regrads!

- calvin
  May 1, 2017 at 5:58 pm
  
  Thanks very much
  
Attila Vegh
May 5, 2017 at 6:56 am

Typescript Error
Module ‘”D:/App/wordpressdemo/src/pages/singlepost/singlepost”‘ has no exported member ‘Singlepost’.
D:/App/wordpressdemo/src/pages/singlepost/singlepost.module.ts
import { IonicPageModule } from ‘ionic-angular’;
import { Singlepost } from ‘./singlepost’;

onic Framework: 3.1.1
Ionic App Scripts: 1.3.6
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 6.10.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

mozambiquebg
October 20, 2017 at 3:43 pm

Loved your tutorial? Can you tell me how to signUp for a WordPress site directly from the app you developed? When i try, i always gone to an unsuccessful message.

- Anand Parmar
  November 1, 2017 at 7:13 am
  
  Hi mozambiquebg,
  
  You required some other plugin in wordpress for signup and signin like “JSON API User” Plugin

Anand Parmar

Php, Wordpress and Web Developer

Connect wordpress to ionic 2 using REST API

Let’s Go

8 Comments

Leave a Reply Cancel reply

Let’s Go

Share this:

8 Comments

Leave a Reply Cancel reply