Update 9/15: wpIonic has been modified to work with the WP-API version 2. I’ve also added new features such as post caching and bookmarks. Follow the project on Github for the most recent updates.

Update 12/15: I wrote a new article on the Ionic blog about creating an app with Ionic 2 and the WP-API 2. Check that out here.

The Ionic Framework is a modern hybrid mobile app framework built on AngularJS.

It has changed the way people look at hybrid application development, bringing native performance to the hybrid world. We use the Ionic Framework as the base for all apps built with Reactor. Reactor integrates lots of awesome WordPress functionality like posts, pages, WooCommerce products, Gravity Forms, push notifications, member login, and lots more.

I created a separate project on Github that is a simple integration of WordPress with Ionic, in a standalone project.

View on Github

This project is mostly for fun, and so other developers can get excited about Ionic. The app includes a posts page with pull to refresh and infinite scroll, a login with custom authentication (requires a plugin), static pages, side menu, a settings page, and app intro. I will be adding more to this project in the coming weeks.

You can use this project as a starting point to create a mobile app of your own.

Click here to see a demo of the project.

Let’s look at how to use and customize this project.

WordPress integration

This app uses the WP-API to integrate with WordPress. Your site must be running the WP-API v2 plugin, which is still under development.

To use the login feature, you’ll need to setup custom authentication plugin, like the one described here. (Login has been removed)

How to use

  1. Install and activate the WP-API v2 plugin on your WordPress website
  2. Go to www/controllers.js and change $rootScope.url to your website
  3. Load index.html in Safari, or compile app with Phonegap

How to customize

I’m going to show you how to add a simple page to this app.

First, we need a page to display, so copy templates/custom.html to a new file, call it custom2.html. Add whatever HTML you want to that page, just be sure to leave the ion-view and ion-content tags in place.

Next, go to js/app.js. Copy these lines of code, and paste it right underneath.

.state('app.custom', {
    url: "/custom",
    views: {
      'menuContent': {
        templateUrl: "templates/custom.html"
      }
    }
  })

Change all instances of “custom” to “custom2” like this:

.state('app.custom2’, {
    url: "/custom2”,
    views: {
      'menuContent': {
        templateUrl: "templates/custom2.html"
      }
    }
  })

Now you should have a state for custom, and custom2 in app.js.

Next, go to templates/menu.html, so we can add a menu link for our new page. Duplicate the code for the Custom Page menu item, and change it to Custom2, like this:

<ion-item nav-clear menu-close href="#/app/custom2">
Custom2 Page
</ion-item>

That’s it! You’ve added your page. Refresh to see it.

If you want to take this one step further, you can add a custom controller for your page (that’s how you do all the cool stuff). To do that, go back to app.js and add a controller to your state:

.state('app.custom2', {
    url: "/custom2",
    views: {
      'menuContent': {
        templateUrl: "templates/custom2.html",
        controller: 'Custom2Ctrl'
      }
    }
  })

Next, in controllers.js, add the Custom2Ctrl:

.controller(‘Custom2Ctrl', function( $scope, $rootScope ) {
	// put cool functionality here
})

One really cool thing about Angular is using templating. Try this, in custom2.html put:

<p>{{helloWorld}}</p>

Next, in your Custom2Ctrl put:

.controller(‘Custom2Ctrl', function( $scope ) {
	$scope.helloWorld = ‘Hello World!’;
})

When you load up the app, you should see “Hello World!” on your custom page. That’s a simple example, but of course it can get much cooler when we start using dynamic data.

That’s just a taste of Ionic + AngularJS, to learn more visit Ionicframework.com, or angularjs.org.

Common issues

If you are having trouble connecting to your site, try the following.

  • Make sure the Reactor Core plugin is active, and no other API plugins are active (such as the Jetpack API module)
  • Do not use default permalinks, try resaving
  • Clear any caches

Have fun, and send me some pull requests!

44 thoughts on “Build a mobile app with Ionic + WordPress

  1. This is seriously great.
    I already have a custom version of WP API running that is being used by a different app so I can’t get rid of it. How would you go about using your version with regular WP API (without Reactor)?
    I could really use the most basic version without reactor in order to be able to tweak it and get it to work with my current setup.
    Thanks!

  2. Hi Scott

    Great Tut.

    I have followed everything and it all works until I add a custom controller to the new custom page. When I add the controller to teh state in app.js it causes the App as a whole to display blank. When I coment it out ot works again.

    I have created other Apps using Ionic and cant see where I am going wrong. Is there an a known issue or more likely I have done something wrong.

    Thanks in advance

    • Hi Mark, it’s most likely a syntax error, maybe an extra semi colon or something. Take a look at how the other states/controllers are laid out, and make sure yours is the same. You can use the browser console to debug.

      • Hi Scott

        Thanks very much for your reply.

        I have followed the way the other states and controllers are laid out, unfortunately with the same issue. I have never seen this isue with my other Apps. This is my state:

        .state(‘app.custom2’, {
        url: “/custom2”,
        views: {
        ‘menuContent’: {
        templateUrl: “templates/custom2.html”
        controller: ‘Custom2Ctrl’
        }
        }
        })

        I am getting the following error:

        Error: [$injector:modulerr] Failed to instantiate module wpIonic due to:
        [$injector:nomod] Module ‘wpIonic’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

        Would you by any chance know what the issue may be?

        Many thanks

        Mark

      • Hi Scott

        Apologies it was the apostrophes from copying and pasting from the web.

        My bad and very frustrating.

        Thanks

        Mark

  3. Hi Scott

    Would I be right in saying that you can only have one $rootScope.callback value if you want to pull custom posts.

    I have added a new $rootScope.callback to a new controller but it seems to get confused pulling one callback value and then the other depending on where and when I refresh my page within my App.

    Thanks

    • Hi Mark, yes if you use $rootScope it’s basically a global. You’d want to use $scope.myVar instead of $rootScope.myVar if you just need it defined in your controller.

  4. Hi Scott,

    thanks a lot for this great work.
    I see the posts from my WordPress Site, but i cannot login.
    My console in my “ionic serve” view shows: “Error: targetFrame.postMessage is not a function”
    I dont understand how the login should work. Do have to compile the Project with Phonegap and not with ionic. are there any difference?
    Could you help my with an example?
    How could this (https://apppresser.com/custom-wp-api-authentication/) custom Auth Plugin help me to make targetFrame.postMessage a function?
    Do i need this Plugin (https://github.com/WP-API/OAuth1)?

    sorry for my english and maybe a stupid question 😉

    • Hi, the login is just an example, it does not actually work. Authentication is complex, so I probably won’t be adding that to wpIonic. You can use Reactor to build an app with a login.

  5. Please help me to fix this issue
    I have build ionwordpress android apk but when i viewed it on my emulator, it shows me the workpress homepage ( recent post page ) with no posts displayed and the page was overlayed with “Loading posts…”. and never loads any posts
    Intially i have removed the login and register for controller as per documentation since i don’t require it for my wordpress site.

    Please help me to fix this issue

    • @venis, did you look at the browser’s console logs? If you can paste them into a follow-up, that might be helpful. Even better, if you can provide a URL for the app you’ve created, then viewers of this page can look at your actual code and possibly help you resolve your issues.

  6. Hi Scott.

    Thanks for the great tut.

    I see a line of code that was commented out:

    I uncommented the line, but I am still not seeing any featured images showing up.

    Could you please give us a pointer as to how you display featured images?

    Thanks.

      • Hi Scott.

        Ahhh that seems like a massive oversight :O

        Many thanks I followed that link, but the code doesn’t really have any context for me… Where would I put that (what looks like PHP) code?

        I’m a total WordPress and this WP-API noob (I’m an Ionic user which is how I got here).

        Any help would be massively appreciated.

        Thanks Scott.
        Ed

  7. Hi scott, thanks for that great tut,

    i am facing one issue is when any post is clicked it loads the content, but the loading icon always stays there and make the whole screen unclickable. could you please assist.

  8. I love the tuturoial. I am really digging ionic a lot.

    One question, I have the feed for post all set up but when I compile and send it to the ipad, it loads fine, but when I acutally click into a post I get a endless loop. The spinner comes up (with the box around it) and everything becomes unresponsive. Is it something my wordpress install is doing or is the code not functional out of box?

    • No, but you could customize it to work with that. Not sure why you would use that plugin instead of the rest api that’s going into WordPress core?

  9. Hi scott, thanks for this tutorial. I have the exact same issue as these last few guys.

    When certain posts is clicked it loads the content, but the loading icon always stays there and make the whole screen unclickable.

    Do you have any idea how to prevent this?

    Best would be to just see it for yourself if you are on android just search “ForeverHuman” it’s the app, it has a picture of a cat, since the wordpress blog is about cats.

    I love cats

    Anyhow, if you could possibly assist with this situation I will be forever great full.

  10. Hi scott, thanks for this great tutorial . I have installed plugin on my wordress and change $rootScope.url to my website, but on /app/posts posts doesn’t show, when i check on firebug the request api is going well but not on javascript DOM->JAVASCRIPT like using your website url.

    Thanks a lot.

  11. I followed the instructions, but am not seeing any posts. I can browse to /wp-json/wp/v2/ on my site and see the json data. I’m not getting any errors in my console or server errror logs. The site is running locally on my PC. Could that be an issue?

    • See Scott’s reply to my question about the same thing. He is working on it. I see in the git repository that he made some new commits on December 3rd, but I haven’t done a pull and tested yet.

  12. Hi Scott, it’s really one of the clearest posts i read and the app works great but only on my pc. I installed it on an android phone and no post are loading. I’m really not understanding why. Is there someting about authentication ?
    Thanks in advance

Comments are closed.