How to integrate Ionic Framework & WordPress REST API Tutorial

Learn how to integrate Ionic Framework & WordPress in this tutorial

WordPress officially merged in the REST API into core in 2017. Up until that point it had been a feature plugin. This was the culmination of a multi-year endeavour and opened up WordPress to becoming a generic backend content provider for a wide range of applications.

Ionic Framework makes integrating with WordPress a quick and easy process. Integration involves connecting to the correct resources via Angular’s HTTP provider. The WordPress API team has used REST principles in the development of the API which makes the API predictable and a cinch to work with.

You can learn more about the WordPress REST API and how to access its different resources by visiting the documentation.

After we complete this tutorial you will be able to integrate Ionic with WordPress.

This tutorial will focus primarily on teaching the fundamentals of interacting with WordPress via the API. To do that we will access a few different endpoints to retrieve and display data.

We will be loading all the post categories on a WordPress site, showing a selected categories posts and then viewing a single post.

Subscribe to receive my latest Ionic Framework content, courses and tutorials. You will also gain access to exclusive newsletter only bonus content on the site.

Getting Started

Let’s start by setting up your Ionic installation. Navigate to where you would like to install this project using your terminal and enter the following:

Shell

1

ionic start wordpress blank

Enter an appropriate project name, for example, wordpress as I’ve done, and select N to not add the Cordova native platforms to this project when the question is presented as it will not be needed.

Navigate to the folder using:

Shell

1

cdwordpress

Create a provider to interface with your WordPress API

Let’s start by creating a provider that will handle the heavy lifting of connecting to the API and returning the data as an Observable back to us. Our pages and components will be able to receive the response and update the view appropriately.

Run the following command to generate the provider:

Shell

1

ionicgprovider Wordpress

Now add the provider to your app.module.ts to make it available to your application. Also, note that we add Angular’s HttpModule to make Http available within the application. You will need this to connect to remote resources.

app.module.ts

JavaScript

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{HttpModule}from'@angular/http';

import{WordpressProvider}from'../providers/wordpress/wordpress';

...

@NgModule({

declarations:[

...

],

imports:[

...

HttpModule

...

],

bootstrap:[IonicApp],

entryComponents:[

...

],

providers:[

...

WordpressProvider

]

})

exportclassAppModule{}

Make the following changes your wordpress.ts file:

wordpress.ts

JavaScript

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{Injectable}from'@angular/core';

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

import'rxjs/add/operator/map';

@Injectable()

exportclassWordpressProvider{

baseUrl:string="http://demo.wp-api.org/wp-json/wp/v2/"

constructor(public http:Http){

}

retrieveCategories(){

returnthis.http.get(this.baseUrl+'categories')

.map(res=>res.json());

}

retrievePostsInCategory(categoryId:number){

returnthis.http.get(this.baseUrl+'posts?categories='+categoryId)

.map(res=>res.json());

}

}

Now let’s talk through what is taking place in the provider.

We are importing Http into the provider to allow us to connect to the REST API. We also include Http in the constructor of the provider to create it.

Then we add the map operator so that we can map the Observable response that is returned. This allows you to transform the data and return it.

wordpress.ts

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

...

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

import'rxjs/add/operator/map';

@Injectable()

exportclassWordpressProvider{

...

constructor(public http:Http){

}

A variable, baseUrl, is created to store the base URL of the endpoint you will be using. This is just to make it easier to work with and change. In a larger application, this would live in a constants or settings file.

I’ve opted to use the demo url provided by the WordPress REST API handbook to make this easier for you to follow the tutorial. This should be replaced by a URL pointing to your own site.

wordpress.ts

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

...

@Injectable()

exportclassWordpressProvider{

baseUrl:string="http://demo.wp-api.org/wp-json/wp/v2/"

constructor(public http:Http){

}

...

Now we create a function that retrieves all the categories available on the WordPress site. This will return an observable stream of data.

wordpress.ts

JavaScript

1

2

3

4

retrieveCategories(){

returnthis.http.get(this.baseUrl+'categories')

.map(res=>res.json());

}

Finally, we add a function that retrieves all the posts for a selected category on the remote site. This function takes a category id.

wordpress.ts

JavaScript

1

2

3

4

retrievePostsInCategory(categoryId:number){

returnthis.http.get(this.baseUrl+'posts?categories='+categoryId)

.map(res=>res.json());

}

Create pages that your app will navigate to

Now we can create the pages we need to interact with the API and display the posts. We have the HomePage available that will host our first view. We will add two more pages that you will be able to navigate to.

Run the following commands in your terminal:

Shell

1

2

ionicgpage CategoryList--no-module

ionicgpage Post--no-module

Add the pages to your app.module.ts to make them available to the application.

When the view loads we make a request to the WordPress site to retrieve all the post categories that are available and then store the result in a variable named categories. We use ionViewDidLoad() to make sure that the request only fires off once the view has loaded.

Now we create a function, openPost(), that will send the full post object returned from the API to the PostPage for displaying. This is triggered via a click event on the selected post in the view which we will discuss in the next section.

We take a similar approach to the home.html where we have a ion-list that will contains a few ion-item‘s. One difference is that we use *ngIf to make sure that the ion-list is only created when there are posts returned for this category.

Then we use a *ngFor to iterate over all the posts while displaying their respective titles with the safe navigation operator.

Note that the title of the WordPress post is within the rendered property of the object.

A click handler has been included that will send the full post object when selected.

Display the WordPress post’s full content on the Ionic page

Change post.ts to reflect the below:

post.ts

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

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

@Component({

selector:'page-post',

templateUrl:'post.html',

})

exportclassPostPage{

post:any;

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

this.post=this.navParams.get("post");

}

}

Once again, we are importing the providers we will need. We only include NavParams to retrieve the post object. No other additional providers are necessary as this is largely a presentational view.

post.ts

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

...

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

@Component({

selector:'page-post',

templateUrl:'post.html',

})

exportclassPostPage{

...

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

}

}

Then we retrieve the post from NavParams and set it to a local variable, post.

post.ts

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

...

@Component({

selector:'page-post',

templateUrl:'post.html',

})

exportclassPostPage{

post:any;

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

this.post=this.navParams.get("post");

}

}

With that out of the way, we can display the post on post.html.

Amend post.html to reflect the following:

code.html

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

<ion-header>

<ion-navbar>

<ion-title>Post</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h1>{{ post.title.rendered }}</h1>

<p [innerHTML]="post.content.rendered"></p>

</ion-content>

We display the post title first and beneath that the post content. Notice that we bind the post content using [innerHTML].

The post’s body content includes HTML markup that will display if you use the usual interpolation, {{ post.content.rendered }} instead of the [innerHTML] binding.

That concludes the final step.

You should now be able to load the categories from your WordPress website via the API and then select specific posts within the category for viewing.

Conclusion: Ionic Framework & WordPress REST API

We’ve learnt how to integrate WordPress into an Ionic project. The process is similar for retrieving and posting to other endpoints. Refer to the API documentation to try the other endpoints and to begin making more complex integrations.

Hi, I'm Baadier Sydow. I author this blog and work as a developer in Cape Town, South Africa. I spend most of my time developing hybrid mobile applications and working with Ionic, Angular, WordPress and Laravel. I'm excited to see what Progressive Web Apps can do for the future of the web.