Connect wordpress to ionic 2 using REST API

In this tutorial we are creating ionic 2 app that fetch wordpress post using REST API.

Configure WordPress

  • Go to your wordpress dashboard
  • Install the plugin “WordPress REST API (Version 2)”. This plugin provides an easy to use REST API. Here is Documentation.

Let’s Go

Before We start make sure your ionic is updated with ionic 2. If not then update ionic with following command

Let’s start with creating fresh new ionic 2 blank project called wordpressdemo

Got to project folder

Adding platform

Note that if you have to make ios app then you required mac.

Let’s fire up our live preview:

If you have the live preview open in a browser window using ‘ionic serve’, any time you make a change to a file and save, the app will reload with your changes. Pretty cool!

In over project under wordpressdemo\src\pages  there is home folder default. We are fetching list of wordpress post to her in home page.

We required another page for displaying information about single post of wordpress.

We can easily do this with Ionic’s cli command ionic g page. First, press cmd c to stop the ionic preview. Next, run:

This will create a new folder, .ts, .scss, and .html page called singlepost. (Note: If you run in to an error with the ionic g page creation, you can simply create the folder and files manually. Make sure to also import this page into the home page).

After creating the page. Next we have to import singlepost page to app.module.ts.

app.module.ts

Home.html

Go to home.html and paste above code. This will display the title and excerpt of each and every post from wordpress.

Home.ts

At the top of the file, we imported Http and rxjs, which are required for our http call to get the posts.we added in Http to our constructor so we can use it in our class as this.http.

Replace the http://codemaker.esy.es domain with your wordpress website domain name in api_url variable

All the stuff of fetching post list of wordpress are done in constructor() function.

After clicking on post itemTapped() function will open SinglepostPage using push() method.

singlepost.html

In post variable contain the information about post we want to display.

Next, go into singlepost.ts and paste in this code:

In constructor() we are fetching ‘post_data’   which is in navParams passed from home page.

Screenshort

                                

8 Comments

  1. If appear error “EXCEPTION: No provider for Http!”
    need to import in app.module.ts the http provider

    import { HttpModule } from ‘@angular/http’;
    and into the imports
    imports: [
    HttpModule,
    IonicModule.forRoot(MyApp)
    ],

    regrads!

  2. Typescript Error
    Module ‘”D:/App/wordpressdemo/src/pages/singlepost/singlepost”‘ has no exported member ‘Singlepost’.
    D:/App/wordpressdemo/src/pages/singlepost/singlepost.module.ts
    import { IonicPageModule } from ‘ionic-angular’;
    import { Singlepost } from ‘./singlepost’;

    onic Framework: 3.1.1
    Ionic App Scripts: 1.3.6
    Angular Core: 4.0.2
    Angular Compiler CLI: 4.0.2
    Node: 6.10.3
    OS Platform: Windows 10
    Navigator Platform: Win32
    User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Leave a Reply