{"id":1549,"date":"2016-12-09T15:59:10","date_gmt":"2016-12-09T15:59:10","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1549"},"modified":"2023-04-24T14:14:26","modified_gmt":"2023-04-24T18:14:26","slug":"the-dynamic-duo-wordpress-and-ionic-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/the-dynamic-duo-wordpress-and-ionic-2","title":{"rendered":"The Dynamic Duo: WordPress & Ionic 2"},"content":{"rendered":"

Scott Bolinger, the co-founder of AppPresser<\/a>, has been working with mobile WordPress design and development for years. He is passionate about using WordPress in new, exciting ways and about transforming WordPress into a mobile app development platform.<\/em><\/p>\n

Ionic and WordPress have always gone well together. Ionic’s CEO, Max Lynch, has even called Ionic “WordPress for mobile<\/a>“.<\/p>\n

WordPress makes it easy to build all kinds of websites, and Ionic makes it easy to build all kinds of mobile apps. Over 27% of the entire web is now WordPress sites, making WordPress the most popular website software by far. Ionic powers thousands of apps and is the gold standard of hybrid app development. Bringing these two technologies together is a match made in heaven.<\/p>\n

With the final release of Ionic 2, as well as the REST API being included in WordPress core, it\u2019s getting even easier to integrate WordPress into mobile apps.<\/p>\n

At AppPresser<\/a>, we\u2019ve been building mobile apps with WordPress since Ionic 1 was in Alpha and the WP-API didn\u2019t even exist. We built lots of apps with Ionic and WordPress, and we recently completely rebuilt our platform to utilize Ionic 2<\/a>. We\u2019ve learned a ton along the way, and I\u2019m excited to share some of it with you.<\/p>\n

How to Integrate WordPress and Ionic 2<\/h3>\n

There are a couple of different ways to get WordPress into your app, using the WP-API and iframes. Let\u2019s look at each of these a little closer.
\n<\/p>\n

WP-API<\/h3>\n

As of WordPress 4.7, the REST API is a part of WordPress core. All sites updated to 4.7+ will have their content available in JSON format by default. (Sites prior to 4.7 can use the WP-API plugin<\/a>.)<\/p>\n

The WordPress REST API allows you to fetch content, as well as post data. To get this content into an Ionic 2 app, you just need to do an http request and display the content in your template. We have an example of this on our blog<\/a>:<\/p>\n

import { Component } from '@angular\/core';\nimport {Http} from '@angular\/http';\nimport 'rxjs\/add\/operator\/map';\n\n@Component({\n  template: `<ion-header>\n  <ion-navbar>\n    <ion-title>Home<\/ion-title>\n  <\/ion-navbar>\n<\/ion-header>\n\n<ion-content class="home">\n  <ion-list>\n    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">\n    <h2 [innerHTML]="item.title.rendered"><\/h2>\n    <p [innerHTML]="item.excerpt.rendered"><\/p>\n    <\/button>\n  <\/ion-list>\n<\/ion-content>`;\n})\nexport class HomePage {\n    url: string = 'http:\/\/www.mysite.com\/wp-json\/wp\/v2\/posts';\n    items: any;\n\n    constructor( private http: Http ) {}\n\n    ionViewDidEnter() {\n        this.http.get( this.url )\n        .map(res => res.json())\n        .subscribe(data => {\n          this.items = data;\n        });\n    }\n}\n\n<\/code><\/pre>\n
Pretty straightforward, right? That code will display a list, and you just need to hook up the detail template like so:<\/p>\n
import {NavController, NavParams} from 'ionic-angular';\nimport {Component} from '@angular\/core';\n\n@Component({\n  template: `<ion-header>\n\n  <ion-navbar>\n    <ion-title>{{selectedItem.title.rendered}}<\/ion-title>\n  <\/ion-navbar>\n\n<\/ion-header>\n\n<ion-content padding>\n <div *ngIf="selectedItem" class="selection">\n    <h2 [innerHTML]="selectedItem.title.rendered"><\/h2>\n    <div [innerHTML]="selectedItem.content.rendered"><\/div>\n <\/div>\n<\/ion-content>\n`;\n})\nexport class PostDetail {\n  selectedItem: any;\n\n  constructor(private nav: NavController, navParams: NavParams) {\n    \/\/ If we navigated to this page, we will have an item available as a nav param\n    this.selectedItem = navParams.get('item');\n  }\n\n}\n<\/code><\/pre>\n
Now, you have a list of WordPress posts in your app.<\/p>\n
You can change the api url to get a different type of content, like pages, media, or users (requires authentication):<\/p>\n