Rapid Prototyping: Ionic 4 and WordPress

Check out our new guide on web scraping!

The final code for this guide can be found here.


In this guide, we’re going to prototype a mobile application using Ionic 4. We’ll be showcasing a news app that reads content from a WordPress website.

To keep things simple, this application will mostly display the latest posts and categories (fetching the WP site live). If you are interested in a guide on any of these more advanced extensions, please drop me a comment:

  • Integrating redux with the Ngrx library.
  • Adding a login with an authorization wall (preventing users who are not logged in from accessing certain content)
  • Adding paid subscription plans with Stripe



Ionic is a framework for building cross-platform applications with a single codebase. It builds to iOS, Android, and web, using the familiar and robust HTML/ CSS/ JavaScript development environment. Ionic can be pretty opinionated about styles and theming; it ships with a plethora of components that require no extension, but maintain a consistent design. Since these components 1.) Include very efficient mobile / web UI widgets and 2.) Abide by best design practices this is ideal. The downside is that beyond color and size, controlling the presentation will require some extra work. So if you’re trying to produce an MVP, Ionic is perfect. If you’re trying to match your designers Photoshop / Illustrator renderings, it may be more difficult.

The Ionic Platform takes the Web Application you create, and ports it into ‘webviews’, containers that are configured to run on different platforms (i.e. handle the differences in operating systems for you). In short, the application that you write runs on another layer. Contrast that with various other cross-platform frameworks, that actually compile user code into native applications. These two approaches have their own pros and cons. The main tradeoffs you should keep in mind when deciding if Ionic is right for you:

Advantages of Ionic Approach

  • (Arguably) faster development
  • Builds a website in addition to native mobile apps
  • More consistent interface across different platforms
  • Comes with a robust toolset
    • The Ionic Dev App allows you to see your changes as you make them, directly to a mobile device.
    • You can also see live updates to the browser application, using the ‘ionic serve’ command

Disadvantages of Ionic Approach

  • Performance can be hindered due to the extra layer. This means you have to be careful with your UI, that your app renders efficiently. For example, using Infinite Scroll will prevent slowing down the device.
  • Native mobile device functionality does not entirely come out of the box; you will have to install a Cordova Plugin to use the device’s camera and the like.
    • The plugin ecosystem is fairly diverse, so for all standard device integrations this involves a simple command

In short, if your concern is time, the Webview is a great angle. That’s not to say you can’t build a very scalable Ionic Application, either. At K-Optional, we immediately consider Ionic for clients who are building mobile applications.

Ionic 4 (beta)

Ionic has always been nicely integrated with Angular (and previously Angular.js). With the newly released version 4, it seeks to be framework-agnostic (is not coupled to a specific framework).

The development team has announced they will soon release integrations with Vue.js and React, meaning you will be able to leverage the Ionic platform with anyone of the big three frameworks. Version 4 already has support for Angular, the framework this tutorial will use.

Getting Started

Creating an Ionic 4 Application

Note: we will try to be succinct with this guide, but will link out to the documentation / guides of frameworks used when appropriate.

Full Ionic “Getting Started” guide

Let’s create a new Ionic Project. I assume you have npm installed on your command-line; if not, head on over to the link above, where there is more information.

Go ahead and install Ionic. Make sure it’s Ionic 4 (run the update command below if not)

Then use the Ionic command-line tool to generate a new application and go into that directory.

Next start the Ionic server. This will open a browser window with your application. It will restart each time you update and save your code.

Finally, open up the project with your code editor of choice.

Getting setup with WordPress

We need a WordPress website to fetch data from for our app. For this guide, we will use https://boxingtldr.com. If you’d rather use your own WordPress site, just swap out references for that URL with your own. Setting up a self-hosted WordPress site is outside the scope of this guide, but there are plenty of great resources online.

Step 1: Getting to know the WordPress REST API

WordPress REST Handbook

WordPress websites expose an API by default. In our case, this means that you can access content from a WordPress site using an Ajax request. In short, you may load data without refreshing the page in a standardized and predictable manner.

Here’s what I mean: head on over to https://boxingtldr.com/wp-json/wp/v2/posts. This is a machine readable way to fetch the most recent posts from the website. Our application will request the data and render it into our app. We will fetch things like posts, categories and tags. All of these have their own endpoint (see REST guide above).

Step 2: Setting up the app’s pages

Eventually, this application is going to display and organize content from the WP site. It’s more efficient to focus on the views first, and then worry about shoehorning content into the appropriate places (see our Pipeline).

We are going to create three pages in total:

  1. A PostList Page (actually, the home page) for displaying the most recent posts
  2. A CategoryPage for displaying a list of categories to filter posts by
  3. A PostDetail Page for viewing all the content of a single page

Deleting the unused list page

When the Ionic command-line tool creates an application, it typically will start with a home page and list page. We’ll reuse the home page, and delete the list page.

Remove the folder in src/app called “list”. If your Ionic Server is running, it will crash at this moment. That’s because it imports the ListPage which no longer exists. We’ll fix this when we add the new pages.

Generating the other pages

As aforementioned, this application will consist of three different pages. The home page should already exist. If it does not, generate it in the same manner as we generate the categories page and post detail page below.

You will see some output indicating the pages have been generated in the src/app/post-detail & src/app/categories directories. Now update app-routing.module with the following:

This code defines the URL routes with the corresponding page. It should be pretty straightforward. You’ll notice that the home page is assigned two routes. When selecting a category, we want the home page to appear with only posts of that category. This will make more sense later on.

Step 3: Hooking up to the website’s API

To retrieve data from the website’s WP API, we’ll use an Angular Service. The Ionic CLI can generate services which any page may import. The app must be capable of fetching:

  • (recent) Posts
  • Categories
  • Posts by category
  • A specific post

You might consider creating multiple services in a more complex application. However, one service is plenty for four API methods. In this step, we’ll generate that service. It uses another Angular service plus an npm module, so we’ll add these first.

Add dependencies to app.module.ts

HttpClient is a service that ships with Angular for making HTTP requests. Using it requires one small update to our app.module.ts.

In line 1, we imported the module that contains HttpClient. Then in line 18, we added it to the imports array so that our service can use it. If you want more information on what the module file does, check out Angular’s docs.

Add Lodash to the project

Lodash is a wonderful library that provides all sorts of utilities, useful in countless situations. I include it in nearly every project. Simply install it using npm:

Now we’re ready to write the service.

Generate the posts service

You can generate the service using the command:

Now add the following to src/app/posts-service.ts:

Admittedly, this is a lot. This service:

  • Provides methods for making HTTP requests to the relevant WP endpoints
  • uses the map operator to process the HTTP response on the fly
  • Attaches the featured image url to the post if there is one.
    • The “_embed” query parameter signals to the API to include certain useful properties on the post.
    • The “setEmbeddedFeaturedImage” method adds the featured image to the top level  of the post. Otherwise it’s nested way down, and makes our templates complicated. It uses Lodash’s “get” method, which will not throw an error if one of the parent properties is undefined.

If you want to use a different WordPress site, replace the ‘baseURL’ property with your own URL.

Step 4: Displaying the data

Our app now retrieves WordPress data (see Step 3). It also contains pages where the data will be displayed (see Step 2). We just need to configure these pages to display the data. Let’s start with the PostDetail page:

PostDetail Page

  • The post$ property contains an Observable (it is convention to name observables with a trailing dollar sign)
    • It uses the switchMap operator to pipe the route id into a service request for that post
    • The built in Async Pipe allows the template to reference each change to the post$ property as it’s own variable. This powerful syntax saves a lot of code.
  • The innerHTML attribute (see docs) renders HTML directly into the template.
    • The WP REST API returns markup directly so this is the only way to display it.
    • This technique should not be used on content that you don’t have control over.

Next, let’s add the home page (the PostList Page)

Home Page

This page should appear similar to the post-detail page. The main differences are:

  • It uses the ngFor directive to loop through all posts.
  • The excerpt is rendered instead of the content.
  • Upon initialization, the page checks to see if there is a category ID in the route. It conditionally determines which service method to call based on that.
  • When a user clicks a post, we use the Angular Router to programmatically navigate to the /posts/:id route.

The Categories Page

(categories.page.scss or categories.page.css should be empty)

Last but not least, the categories page proves to be the simplest. One thing to note, we used the routerLink attribute in the template unlike the home page. Clicking a category loads the home page with a category id as a parameter.


We just created a news mobile application!   Obviously, it leaves a lot to be desired on the user-interface. But Ionic makes that part easy. You can check out the Ionic Component Documentation for ways you can spice up the look and feel.

Hopefully we’ve demonstrated a way to combine two time-tested and powerful frameworks. If anything didn’t make sense feel free to email developer@koptional.com or drop a comment. As a reminder, all the code can be found here.


26 thoughts on “Rapid Prototyping: Ionic 4 and WordPress”

    1. Hey Sam. I’m assuming you’re using Jetpack for your related posts, like here: https://jetpack.com/support/related-posts/

      If you are, that adds a field to your posts and post WP REST API response that looks like ‘jetpack-related-posts’. It’s an array of related posts. So upon loading a post page, you could use this response to link out to related posts accordingly.

      Let me know if this makes sense

  1. The Article Was Great and Useful …Looking forward for ionic 4 login Sign Up using Firebase authentication tutorial ….& ….Media streaming in ionic 4 tutorial it will be greatly use ful…Thank You once again

  2. Awesome and Useful! The only problem that I had:
    import get from ‘lodash/get’;

    I solved it:
    import { get } from ‘lodash’;


  3. A curious question.

    Is it possible to open the post url externally?

    By clicking on learn more the page open with inappbrowser?

    1. Hey Everson, yes I believe this is not difficult. Try adding target=”_blank” within an a tag and an Ionic Application should launch the device’s browser with the link

  4. excellent tutorial, unfortunately when I transform the project to application iOS or Android the contents are not visualized, since it is necessary to sanitize the url, in that I was stranded 🙁

    1. Hey Christian, I’m not sure exactly what you mean.

      Using raw HTML content can be tricky, but I’ve had success building several apps that rendered it. You might try adding a pipe that explicitly tells Angular that it doesn’t need to be sanitize. See here.

      You should always be careful when rendering Raw HTML since in some cases it can be exploited for XSS attacks- but in this case you trust the content since it is from your WP site so it should be safe

    1. Hey Edward, a prereq to being able to render your sites posts is having the WP REST API enabled on your WordPress site. Your website does not seem to be properly configured: visiting https://thebutlercollegian.com/wp-json/wp/v2/ returns your home page which is HTML content, not the expected JSON.

      It usually comes configured out of the box unless you’ve explicitly disabled

          1. I finally got it to work! Thanks so much but I have one problem. I can’t get the authors name to show up.

          2. Hey Edward, I took a look at your site and it looks like your REST API is running hence why its working. However, authors are not being pulled. Check out your user’s endpoint:

            Note the response, which indicates that that endpoint is disabled on your site. If you or your system admin turns on users, then the authors name will be fetchable

          3. Thanks for all the help! How would I go about adding a pull/refresh and infinite scroll. Multiple tutorials I found are for ionic 3 and confuse me.

    1. Hi Everson,

      You should get familiar with pagination on WP Rest (documentation here).

      Basically, these parameters you can add to your REST requests for posts:
      page, per_page

      So, what you’ll want to do is initialize per_page to some default value in your app, say 10. And also initialize page to 1. Pass these parameters to your service that fetches posts so the URL will look like this:

      fetchPosts(page = 1, per_page = 10) {
      return this.http
      map((posts: Array) => posts.map(this.setEmbeddedFeaturedImage))

      Finally, you’ll need a way to know if the user wants the next page. For this I recommend the Ionic Infinite Scroll component. When the user scrolls to the bottom, increment the page and fetch posts again. Of course, you’ll need to *append* new posts rather than replace them.

      1. How would I increment the page and fetch posts again with infinite scroll?

        I have in my homepage.html the infinite-scroll with the loadmore($event)
        I have the loadmore($event) in my posts.service.ts that is:


        this.wp.getPosts(this.page).subscribe(res => {
        this.posts = […this.posts, …res];

        if (this.page == this.wp.pages) {
        event.target.disabled = true;

  5. Hey Jack, great guide ! I would be very interested in you doing a guide for adding a login with an authorization wall.

    1. Nicky,
      Thanks for reading. We’re working on a paywall guide, and have more content coming out this next week. Make sure to subscribe so you get a notification when we post!

  6. This was a great tutorial. I’ve carried on working on it and implemented back buttons, ion-card style news index display, loading controller for while the feeds are downloading, figured out about the Encapsulation.None requirement to be able to style content set with [innerHTML], hidden the read more button as it points at the blog and replaced it with my own app url button.

    While building it I noticed that the authors feed data was blocked by Wordfence for security reasons. I did figure out how to enable it again but decided I didn’t need it. Instead, I installed ngx-momentum and formatted the post date.

    I would be interested to incorporate logins, comments, cache, offline support and your suggestions about the infinite scroll + jetpack related posts.

    Your paywall and paid subscription ideas would be a great addition to this tutorial, are you still planning to make them?

Leave a Reply

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