# Wordpress 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](/files/-LakMtu7DLM4LOeqpKvF)

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`&#x20;

```
  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`&#x20;

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

Fetching all media will return a response like following

![](/files/-LakQtp2SPKOjqnGehaK)

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

![](/files/-LakQdJrKOgNkNftpYyw)

### Get Blog Detail

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

![](/files/-LakP3dU-LeXslGAlVKa)

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.&#x20;

![Blog Detail API response](/files/-LakQPgTQa-ml4R_Jd4g)

### 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](/files/-LakQ1SpLIl8ocJjFhL6)

### 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](/files/-LakQHHeA_63og6M8Gcc)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enappd-apps.gitbook.io/apps/ionic-4-full-app/startup-features/wordpress/wordpress-in-ionic-4-full-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.