HOW TO: WordPress Blog to Ionic 3 App

In the tutorial we are going to create an Ionic app from a WordPress blog. It will take about 1 hour. First step is to find a suitable blog. I have used blog.mozilla.org. If you want to create an app for your own blog, it must be self hosted and not hosted on WordPress.com.

To find out if a blog is suitable for this tutorial visit the homepage and add “/wp-json” to the end of the url. There will usually be one of two responses:

Let’s start.

Terminal

$ sudo npm install -g ionic cordova
$ ionic start blog-app sidemenu
$ cd blog-app
  • Create the pages for you app.
$ ionic generate page category
$ ionic generate page post
  • Run the app to see progress.
$ ionic serve --lab

app.module

  • Import the HTTP module.
  • Add the HTTP module to imports.
  • Import the category and post pages
  • Add the pages to declarations and entryComponents.
import { HttpModule } from '@angular/http';
import { CategoryPage } from '../pages/category/category';
import { PostPage } from '../pages/post/post';

declarations: [
  CategoryPage,
  PostPage,
  … ],
imports: [
  HttpModule,
  … ],
entryComponents: [
  CategoryPage,
  PostPage,
  … ],

app.component

  • Import the Http library and add it to the constructor.
import { Http } from '@angular/http';
constructor(http: Http, … ) { … }
  • Create a property with the link to your blog.
url: string = 'https://blog.mozilla.org/';
  • Inside the constructor.
    • Delete the code that initialises the pages list.
    • Call the WordPress categories api of your blog.
    • By default, up to 10 categories will returned. To increase this, add ‘?per_page=100’ end of the api url.
http.get( this.url + 'wp-json/wp/v2/categories?per_page=100')
  .subscribe(data => {
    this.pages = data.json();
  });
  • In the html file, replace {{p.title}} with {{p.name}}.
  • At this point, you will be able to see the categories in the side menu.
  • Import the category page.
import { CategoryPage } from '../pages/category/category';
  • Change the openPage(page) function to open the category page and pass the selected page as a parameter. Note: page parameter is an object containing details of the selected category.
this.nav.setRoot(CategoryPage, { category: page });

Category Page

  • Import the Http library and add it to the constructor. Same as for the app.component.
  • Import the post page.
import { PostPage } from '../post/post';
  • Create 3 properties for the category, the api url to get the posts for this category and the posts.
private category: any;
private url: string;
private posts: any[];
  • Inside the constructor :
    • Get the category from the navigation parameters, passed when the page was opened.
    • Get the api url from the category details.
    • Call the api to get the posts for this category, up to 10 by default.
constructor( … ) {
  this.category = navParams.get('category');
  this.url = this.category._links['wp:post_type'][0].href;
  this.http.get( this.url )
    .subscribe(data => {
      this.posts = data.json();
    });
 }
  • Add a function to open the post page, passing the post as a parameter.
openPost(post) {
  this.navCtrl.push(PostPage, {
    post: post
  });
}
  • In the page header:
    • Add button to the toggle the side menu
    • Change the title to be the category name.
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>     
    <ion-title>{{ category.name }}</ion-title>
  </ion-navbar> 
</ion-header>
  • For the page content:
    • Add a list of the posts.
    • Add the post title to the list item.
    • Add the post excerpt as the item body.
    • Add a click event on the list item to open the full post.
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let post of posts" (click)="openPost(post)">
      <h2 [innerHTML]="post.title.rendered"></h2>
      <p [innerHTML]="post.excerpt.rendered"></p>
    </button>
  </ion-list>
</ion-content>
  • At this point, you will be able to see the categories page with a list of posts.

Post Page

  • Create a property of the post.
  • Get the post from the navigation parameters.
private post: any;
constructor( … ) {
  this.post = navParams.get('post');
}
  • Change the header title to the title of the post
<ion-header>
  <ion-navbar>
    <ion-title>{{ post.title.rendered }}</ion-title>
  </ion-navbar>
</ion-header>
  • Add a heading to show the full title of the post.
  • Add div to contain the post.
<ion-content padding>
  <h2 [innerHTML]="post.title.rendered"></h2>
  <div [innerHTML]="post.content.rendered"></div>
</ion-content>
  • At this point, you will be able to see the post in your app.

What’s Next?

Well done! You turned a WordPress blog into an app. You’ve seen what it looks like on your web browser. The next thing is to view it on your phone or tablet and see what it would as a native app. Ionic DevApp is the quickest and easiest way to do this if you have and iPhone or Android.

The app is a good start, but there are still many ways to improve it. Here are some ideas:

  • Add styling to the app and take advantage of the variables.scss file.
  • Filter the categories list to only show the categories you want to display.
  • Add a refresher so that the user can pull down to get the latest posts in a category.
  • Detect when the users scrolls to the bottom of the category list and load older posts.
  • Add search functionality, so that the user can search for blog posts. The WordPress REST API Documentation will help with this.

My source code: https://github.com/bensearle/blog-ionic-wp

Related: HOW TO: Blogger Blog to Ionic App

1 thought on “HOW TO: WordPress Blog to Ionic 3 App”

Leave a Comment

Your email address will not be published. Required fields are marked *