Ionic and Wordpress Integration using Wordpress REST API

Summary

This is Part-1 of two post series. In this post, you will learn how to implement Wordpress Integration using Wordpress REST in Ionic 4 app. Part 2 of the series discusses how to build a WooCommerce REST API Mobile App in Ionic 4.🔥

Complete code of this blog post can be found at this github repo — ionic-worpress-integration

What is Wordpress REST API?

The WordPress REST API provides API endpoints for WordPress data types that allow developers to interact with sites remotely by sending and receiving JSON. This enables developers to create, read and update WordPress content from client-side JavaScript or from external applications.

If you are new to WP REST API, I would suggest you go through the Key Concepts.

What is Ionic 4?

You probably already know about Ionic, but put this section in every blog just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.

In this ionic tutorial, we will walk you through the process of creating an Ionic 4 app that pulls in WordPress posts and other content using the WP REST API.

Without further ado, this is what you are going to build!

Structure

We’ll follow a stepped approach to create a Music player app in Ionic 4. We’ll use an IONIC native plugin for music playback. Following are the steps

• Step 1 — Create a basic Ionic 4 app
• Step 2 —Set up your app for Wordpress post
• Step 3 — Get Your WordPress Posts
• Step 4 — Showing The WordPress Post Details

So let’s dive right in!

Step 1 — Create a basic Ionic 4 app

I have covered this topic in detail in this blog.

In short, the steps you need to take here are

• Make sure you have node installed in the system (V10.15.3 at the time of this blog post)
• Install ionic cli using npm (my Ionic version is 4.1.0 currently)
• Create an Ionic app using ionic start

You can create a sidemenu starter for the sake of this tutorial. On running ionic start ionic-4-local-notifications sidemenu , node modules will be installed. Once the installation is done, run your app on browser using

$ ionic serve

The app will launch on the browser. You can go to Inspect → Device Mode to see the code in a mobile layout. You can create a basic layout for triggering Wordpress post.

Next, we’ll add the Wordpress posts our app

Step 2 — Set up your app for Wordpress post

For getting WordPress post in the Ionic app we will use Wordpress API without any plugin.

Before we go into creating our views we set up the logic to retrieve all data. In our post, we will simply make a call to get a list of posts, but you can get basically all data from the WordPress API like categories, tags, pages…

We will also limit our calls to only retrieve 5 posts at a time and also use the page parameter so we can later add some cool loading to our list.

In the very first step, we need to include the module to make Http calls to the API so we will import HttpClientModule from @angular/common/http which comes by default installed with IONIC package.

so change your app/app.module.ts to:

Now we will create pages for our app. We will have a list of WordPress posts and also a details page for one post. so we will generate this page by command ionic g page — - . when we generate a page from this command we will not need to add routes in our app/app-routing.module.ts . This command generates it automatically.

so after adding routes your app/app-routing.module.ts  something looks like this.

Step 3 — Get Your WordPress Posts

For getting posts from Wordpress we will use this function

async loadPost(url: string, page, showLoading) {

const loading = await this.loadingController.create({

message: 'Loading Your posts'

});
if (showLoading) {
await loading.present();
}
const route = this.url + 'wp-json/wp/v2/posts'
if (!page) {
page = '1';
}
return new Promise((resolve, reject) => {
var concat;
if (url.indexOf('?') > 0) {
concat = '&';
} else {
concat = '?';
}
this.http.get(route + concat + 'page=' + page)
.subscribe(data => {
if (showLoading) {
loading.dismiss();
}
this.items = data;
resolve(this.items);
},
error => {
if (showLoading) {
loading.dismiss();
}
reject(error);
this.presentToast(error.error.message)
})
});
}

Here we are using two params URL and another one page no.

URL is basically your word press URL where you have posted all of your blogs

for me it is :

https://swift-footed-config.000webhostapp.com/

you can change it with your one.

and pageNo we have added for cool navigation with infinite scroll.

The reason is that we implement infinite scrolling inside our view which will automatically load new posts once we reach (or approach) the end of the list! That looks

The reason is that we implement infinite scrolling inside our view which will automatically load new posts once we reach (or approach) the end of the list! That looks

The reason is that we have also implemented ion-refresher inside our view which will allow the user to refresh post list when he wants to refresh.

So after adding all the code your homepage.ts something looks like this.

Some of those fields contain HTML characters, that’s why we sometimes use the innerHTML of elements and directly use the value which will then be displayed correctly.

To build our simple view, go ahead and insert this code in yout homepage.html 

So after adding this all this code your post page something look like this

Step 4 — Showing The WordPress Post Details

So when user clicks on post link we will redirect him to Post details with ID of the post.

We could actually also pass the whole object to the next page using the state, but I still think using the ID approach is better as we don’t keep the information in the state and we actually got a URL to the post page that will work all the time, even with a refresh!

For us, this means we need to get the ID from the route snapshot and then retrieve the information for a single post using our service!

so for getting post information, we will add this code in our post details file

getPostDetails(id) {

const route = this.url + 'wp-json/wp/v2/' + `posts/${id}?_embed`

return this.http.get(route).pipe(

map(post => {

post['media_url'] = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
console.log(post);
return post;
})
)}

so after adding this code your post details file something look like this

Regarding the view of the details page we’ll also keep it simple and just use the image (like we did before, remember the media_url is a field we created in the service!) and the actual post content.

Again, to display the HTML correctly we need to use innerHTML which will render the tags correctly.

There’s really not a lot more to the page, so finish your simple Ionic WordPress app by changing your pages/post/post.page.html to:

so after adding this code, your post details screen something look like this.

Conclusion

In this post, we learned how to use Wordpress post in Ionic 4 apps. And we have also learned how to get post details from specific post id and showing it to our page with the help of innerHTML 

Complete code of this blog post can be found at this github repo —ionic-worpress-integration