(226) 377-3114

Ionic + Angular + WordPress

This post will describe how to connect your ionic app to a wordpress site with WP's REST API and send a POST request to WordPress.

NOTE: If your app is designed to scale to hundreds of thousands of users you should proably not be using wordpress as a backend.

Step #1: Wordpress Setup

The first thing you want to do is create a Wordpress application password. To do this, go to a user that has posting privileges. 

Scroll half way down and keep note of the username - you will need this later.

Next, scroll to the bottom and create a new application password, you will have to give the application a name before you will be able to create the credentials.

NOTE: if you can't see this field, add the following to your functions.php

add_filter( 'wp_is_application_passwords_available', '__return_true' );

After creating the password, copy it to a safe location. You will not be able to view it again.

Congrats! You're done with the wordpress setup portion. That was easy, wasn't it?

Step #2: Ionic Setup

I'm going to show you how to get the basic functionality working in your app. Likely you will want to create a separate service for this but that's beyond the scope of this tutorial.

I assume you already have a basic ionic app set up. The first thing we want to do is to create a place to put our code. 

Type the following into your terminal:

$ ionic g page wp

In your template file, create a basic template to grab the post title and content. I'm using angular so if your app uses react or vue you'll have to modify it.

      <ion-title>wordpress api example
        <ion-label position="stacked">Post Title</ion-label>
        <ion-input [(ngModel)]="postTitle"></ion-input>
        <ion-label position="stacked">Post Content</ion-label>
        <ion-textarea [(ngModel)]="postContent"></ion-textarea>
      <ion-button (click)="createPost()">Create Post</ion-button>

make your typescript file the following. The important part is the createPost function. If you are using react or vue you may need to modify slightly.

import { Component, OnInit } from '@angular/core';

  selector: 'app-wp',
  templateUrl: './wp.page.html',
  styleUrls: ['./wp.page.scss'],
export class WpPage implements OnInit {

  postTitle: string;
  postContent: string;
  constructor() { }

  ngOnInit() {

  async createPost(){
    const siteURL = 'http://localhost/wp/wp-json/wp/v2/posts'; //Your API endpoint
    const username = 'admin'; //the username associated with the application password
    const appPass = 'n7TT ZORD o89t 2rkQ hdMm JIP7'; //the application password

    const token = btoa(username + ':'+ appPass); //a base64 encoded string of the username + app password

    const data = { //The data you want to send with the post request
      title: this.postTitle,
      content: this.postContent,
      status:'publish' //needed or the post sits in 'draft' status

    fetch(siteURL, { //the javascript fetch API used to handle the http requests
      method: 'POST',
      body: JSON.stringify(data),
      headers: { //the request will fail without both of these headers
        "Content-type": "application/json; charset=UTF-8",
        'Authorization': 'Basic '+token
    .then(response => console.log('Handle Response'))
    .catch(err => console.log('Handle Error'));


That's it! You should see the following result.

Let's work together.

Get in Touch
Copyright © ConvertLion.
Lets Connect!