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 :

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 .

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 :

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

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

Now lets generate a Posts page

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

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

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

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

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

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 .

Next open the PostsPage page and add this

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

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.

Developer and technical author. Read more articles at Techiediaries