Wordpress in Ionic 5 Full App

Integration of Wordpress JSON API in Ionic 5 Full App

Ionic 5 Full App has Wordpress JSON API integration in STARTUP and PRO version. Currently the API fetches following in the app

• Posts

• Single Post detail

• User details

• All media

• Media details

• Tag details

This data is arranged in format of a list of blogs, and a detailed blog .

As a demo, base url used for data fetching is

url = 'https://swift-footed-config.000webhostapp.com/wp-json'

You can replace this url with your own website URL to fetch data from your website.

Blog List

The blog list is integrated in src/app/pages/wordpress/blogs . All the API calls happen in src/app/services/wordpress . This was the API calls can be made in any of the pages or components.

Fetched blogs from Wordpress

All the blogs are fetched in getBlogs function of wordpress.services.ts

 getBlogs(): Observable<any> {
    return this.http.get(`${this.url}/wp/v2/posts`).pipe(
      map(results => results)
    );;
  }

The response from the API is used in blogs.page.ts

  getBlogData() {
    // Call our service function which returns an Observable
    this.wp_service.getBlogs().subscribe(result => {
      this.blogPosts = result;
      this.getImages();
    });
  }

Fetching Media

Each post detail in the API response contains only the media IDs of images related to the post. To fetch the details of media, we fetch media detail using another API in getMedia function of wordpress.services.ts

 getMedia() {
    return this.http.get(`${this.url}/wp/v2/media`);
  }

Fetching all media will return a response like following

Details of a media can be fetched using

  getImage(id) {
    console.log('id', id)
    return this.http.get(`${this.url}/wp/v2/media/${id}`);
  }

Response will be similar to following

Get Blog Detail

On clicking a blog in the blogs list we fetch the detail of that blog (post) in blogpage.page.ts

This is fetched using the blog's ID

getBlogDetail(id) {
    return this.http.get(`${this.url}/wp/v2/posts/${id}`);
}

The blog's detail API response returns the full blog content, author, tags, media etc.

Blog Detail API response

Get Tags

In the blogs detail API response, tags are returned as an array of IDs. To fetch the details of tags, we use

getTags() {
    return this.http.get(`${this.url}/wp/v2/tags`);
}

The response is similar to this

Response from tag API

Get User

In the blogs detail API response, author is returned as an ID. To fetch the details of author (User), we use

getUser(id) {
    return this.http.get(`${this.url}/wp/v2/users/${id}`);
}

The response is similar to this

Response from User API