
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
1 |
npm install -g ionic@latest |
Let’s start with creating fresh new ionic 2 blank project called wordpressdemo
1 |
Ionic start wordpressdemo blank --v2 |
Got to project folder
1 |
cd wordpressdemo |
Adding platform
1 2 3 |
ionic platform add ios OR ionic platform add android |
Note that if you have to make ios app then you required mac.
Let’s fire up our live preview:
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:
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
Go to home.html and paste above code. This will display the title and excerpt of each and every post from wordpress.
Home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
In post variable contain the information about post we want to display.
Next, go into singlepost.ts and paste in this code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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
Very good tutorial, thanks you very much. Is wordpress can be a good backend for Ionic?
yes wordpress is good backend for Ionic but for specific purpose like bloging and woocommerce.
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
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!
Thanks very much
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
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.
Hi mozambiquebg,
You required some other plugin in wordpress for signup and signin like “JSON API User” Plugin