(226) 377-3114
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.
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?
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-header>
<ion-toolbar>
<ion-title>wordpress api example
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label position="stacked">Post Title</ion-label>
<ion-input [(ngModel)]="postTitle"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Post Content</ion-label>
<ion-textarea [(ngModel)]="postContent"></ion-textarea>
</ion-item>
<ion-button (click)="createPost()">Create Post</ion-button>
</ion-list>
</ion-content>
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';
@Component({
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.
