Build a mobile app with Ionic + WordPress

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!


Get more content like this

Get valuable insight on business and money in your inbox once per week.

Posted by Scott

  1. how to use the custom post type to this

      1. tks, how to give a leaving words function? and the search function

  2. 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!

    1. …and with regular json instead of jsonp/callback

      1. This app is setup to use jsonp, you could probably get it to work with json but you may run into some CORS problems.

        1. Thanks. I was able to get it to work with just json by setting CORS header on server.

  3. 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

    1. 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.

      1. 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

      2. Hi Scott

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

        My bad and very frustrating.

        Thanks

        Mark

  4. 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

    1. 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.

  5. 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 😉

    1. 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.

  6. 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

    1. @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.

  7. Thanks a ton. I was searching for a IONIC WP tutorial. Thanks for the awesome tutorial.

  8. Have you ever try to build a mobile app with woocommerce integration?

    1. Yes, both Reactor and AppPresser have WooCommerce integrations.

  9. 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.

    1. Hi Ed, version 2 of the WP-API doesn’t have a good way to do that yet. I’m waiting for them to resolve this issue, but until then you’ll have to use your own custom code. See this ticket: https://github.com/WP-API/WP-API/issues/1558

      1. 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

  10. 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.

    1. how to solve this issue?

  11. 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?

  12. Would this sample work with another WordPress API, for example? https://wordpress.org/plugins/json-api/

    1. 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?

  13. Also have the issue with the spinner stuck as soon as I view a single post. Can only get out of the single view by using the browser back button, and the spinner remains in place, making the actual window unresponsive.

    Here it is: http://lunamedia.co.uk/ionic

    Otherwise this is pretty great 🙂

  14. 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.

    1. Hi, I’m not seeing this issue in my app. Make sure you are using the WP-API v2, not version 1, and no plugins are conflicting. You can use your browser console to see any errors to help you debug.

      1. Hi Scott, if it’s not to much to ask, just download my app from the store quickly, it’s your app I only added my wording to it nothing else.

        On WordPress I use the version 2 wp-api plug in.

        I also disabled jet packs json api extention. If that makes sense.

      2. This is the plug in I am using -> https://wordpress.org/plugins/rest-api/
        This is the website -> http://foreverhuman.co.za
        This is the App ( android ) -> https://play.google.com/store/apps/details?id=com.wpionic.app&hl=en

        I really want to use this so badly, I’m just stuck as I do not have the technical knowledge as to what the issue might be?

        I also noticed when I went to phonegap to compile the app it gives the following message:
        Can’t recall by heart, but it is something like the app is not using the latest version of something and should be 5.1.1

  15. 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.

  16. Michael Spredemann December 2, 2015 at 11:14 pm

    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?

    1. I’m going to rewrite the services, stay tuned.

      1. Michael Spredemann December 3, 2015 at 3:32 pm

        Excellent. Thank you for sharing your work.

  17. Posts are not loading.
    Any updates on this…

    Thanks in advance

    1. Michael Spredemann December 11, 2015 at 4:30 pm

      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.

  18. Thanks very much for this nice work Scott. And, thanks again for sharing it.

  19. 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

  20. Hi Scott. Got a solution to my problem: i add the ng-csp directive in the html tag and all works fine now.

    1. share Please

  21. hello scott, i have problem, can’t load image-feufeatured,

    <!––>

Comments are closed.

Being a business owner is hard. I'm trying to get better in business and life, enter your email if you want to join me.
Holler Box