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.

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!