Basic WordPress Ionic 4 Framework Integration with REST API

This guide will create a simple IONIC 4 application that communicates with the WordPress site and shows the posts in the app.

Requirements

    • Node.js and npm are installed.
    • IONIC 4 framework are installed.

Below are the command how to install IONIC framework to your machine.

This command creates a working Ionic app. It installs dependencies for you and sets up your project.

Running ionic start without any arguments will prompt you for information about your new project.

The first argument is your app’s name. Don’t worry–you can always change this later. The --project-id is generated from name unless explicitly specified.

The second argument is the template from which to generate your app. You can list all templates with the --list option. You can also specify a git repository URL for template, in which case the existing project will be cloned.

Use the --type option to start projects using older versions of Ionic. For example, you can start an Ionic 3 project with --type=ionic-angular. Use --list to see all project types and templates.

Implementing Ionic WordPress Service

To implement wordpress service you need to inmport the library to your src/app.module.ts directory.

Add the HttpClientModule to the @NgModule Imports.

Then you need to install the RXJS, to know more about rxjs please refer to this link .

Now make a service to handle the API calls to the WordPress site which allows to return the data for the ionic app.

It has 2 new files generated as service wp-restapi & wp-resapi.service.spec.ts below the src/app/services/ directory. browse the wp-resapi.service.ts change with the following code below.

The function getPost() will retrive the latest posts from the WordPress site, just make it sure that you place the correct baseRestApiUrl.

Displaying the WordPress Posts

Now goto the src/app/home/home.page.ts file and type the code below.

ngOnInit() function will create a instance to display something is working and stop any interaction while the data loads at background.

next is you need to update the src/app/home/home.page.html file with the following code below.

WordPress Post Navigation

Before to start we need to generate another page like we did before on our api service. first thing first open a terminal and browse your project directory and type > ionic generate page singlepost

Now navigate your /src/app/app-routing.module.ts with the new route.

Router library should be imported at the top of your /home.page.ts file to navigate the post detail page.

Add the following method to src/app/home/home.page.ts to open the post page

Displaying the SinglePost Page. 

navigate to the src/app/post/singlepost.page.html then add the following code below.

Then update your  /src/app/singlepost.page.ts file with the following code below.

at the wp-restapi.service.ts file add the following method method to get the a single post from the wordpress.

 

Leave a Reply

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