> For the complete documentation index, see [llms.txt](https://enappd.gitbook.io/capacitor-full-app-ionic-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://enappd.gitbook.io/capacitor-full-app-ionic-angular/features/startup-features/wordpress.md). # Wordpress Integration of Wordpress JSON API in Ionic 4 Full App Ionic 4 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. ![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubIia7YR8O8k-lTLHq%2F-LubMHcXyNBAZkcI6_bH%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LakRPC1rpUsXlyBn4pU_-LakMtu7DLM4LOeqpKvF_Screen%20Shot%202019-03-24%20at%209.14.01%20PM.png?alt=media\&token=0c27a350-5398-45d1-b0dd-6eda7c5166e7) All the blogs are fetched in `getBlogs` function of `wordpress.services.ts` ``` getBlogs(): Observable { 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 ![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubIia7YR8O8k-lTLHq%2F-LubMHcqqiI7bO1u0gnf%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LakRPC1rpUsXlyBn4pU_-LakQtp2SPKOjqnGehaK_Screen%20Shot%202019-03-24%20at%209.26.47%20PM.png?alt=media\&token=6b50342d-af5d-4628-a8c1-9fe048f6e233) 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 ![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubIia7YR8O8k-lTLHq%2F-LubMHclKIa74Fr39TvZ%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LakRPC1rpUsXlyBn4pU_-LakQdJrKOgNkNftpYyw_Screen%20Shot%202019-03-24%20at%209.25.54%20PM.png?alt=media\&token=735dbf36-bf49-41e1-82fd-ba9cf535e189) ### Get Blog Detail On clicking a blog in the blogs list we fetch the detail of that blog (post) in `blogpage.page.ts` ![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubIia7YR8O8k-lTLHq%2F-LubMHchPcwbZRWDZPxw%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LakRPC1rpUsXlyBn4pU_-LakP3dU-LeXslGAlVKa_Screen%20Shot%202019-03-24%20at%209.23.24%20PM.png?alt=media\&token=b74c9e5d-56b3-4e9b-a26b-883c16470b22) 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. ![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubIia7YR8O8k-lTLHq%2F-LubMHcoQta3S0lRWxFG%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LakRPC1rpUsXlyBn4pU_-LakQPgTQa-ml4R_Jd4g_Screen%20Shot%202019-03-24%20at%209.26.04%20PM.png?alt=media\&token=c20ce165-bd58-470a-9c46-e5a613311202) ### 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 ![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubIia7YR8O8k-lTLHq%2F-LubMuN4_iDfSyOFBzAi%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LakRPC1rpUsXlyBn4pU_-LakQ1SpLIl8ocJjFhL6_Screen%20Shot%202019-03-24%20at%209.26.28%20PM.png?alt=media\&token=17d47982-1491-4d04-a937-05c2ced53c7e) ### 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 ![](https://3608702775-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LsQWILyBp_9nWmIJ7TG%2F-LubIia7YR8O8k-lTLHq%2F-LubMxv6GyVWX7rNhI57%2Fassets_-La-kqVz2Uq1Ka0VUWZT_-LakRPC1rpUsXlyBn4pU_-LakQHHeA_63og6M8Gcc_Screen%20Shot%202019-03-24%20at%209.26.38%20PM.png?alt=media\&token=9f828ba0-9b6c-4d63-add0-60afbf563fbe)