Ember.js + WordPress

As cool-tech people, we are often hesitant — quite reasonably — about going back to the technologies we started using 5+ years ago, when PHP kingdom dominated the web market. However, WordPress is still one of the most popular blogging platforms around. It’s not surprise, as Wordpress is really easy to setup and manage, seems to be familiar to a large user base and have been very well maintained through the years. That’s why choosing WordPress as backend for a content-oriented Ember app turns into an attractive option.

In this article we’ll explore how to setup an Ember application using WordPress as backend.

Painting showing workers round the lithographic press, AEPM.

WordPress API → JSONAPI

Probably one of the biggest concerns about this mix could be: will there be pain making WordPress API play well with ember-data? Thankfully, the issue is greatly simplified by WP-REST JSONAPI Serializer Plugin.

WP-REST JSONAPI Serializer is a plugin for WordPress that transforms WP API v2 payload into JSONAPI, thus making it compatible with ember-data out of the box.

Setup JSONAPI serializer on WordPress

In order to have our WordPress serving JSONAPI, we will need these plugins:

  • WP REST API v2: this plugin provides the API functionality to WordPress.
  • WP-REST JSONAPI: this plugins adds a serialization layer to WP REST API so it returns JSONAPI formatted data. To install it, download it from Github as a zip and upload it in your Wordpress Dashboard as a plugin.

Once we have these plugins enabled, we’ll have JSONAPI ready in our WordPress.

WP Custom Types → Ember Models

The power of WordPress Custom Types gives us a very nice tool to handle the models that we need for our application. It’s even possible to add relationships to these models and control them through the WP Admin Panel GUI. I’ve found Pods to be the most helpful one here, so the following examples use it.

Pods is a WordPress plugin to manage custom types. It makes it very easy to manage types and use them.

There’s a couple of things about custom types to make the work correctly with our WP JSONAPI serializer.

Creating a custom type

When creating a custom type, be sure to fill in the advanced Pod Name field with the plural form of your model name, that Ember data would expect.

You can create sophisticated models, with different attributes types and relationships. Just be sure to tick the ‘Yes’ box on the REST API tab. Otherwise, it will not be serialized.

Ember Models for our Custom Types

You can create your models as usually, by matching your attributes to the name of your custom types.

You do not need any additional serializer or special setup because WP from payload is formatted with JSONAPI.

Querying WordPress from our Ember app

We will most likely require to query specific information from WordPress. You can make use of WP_Query options by wrapping the attributes into a `filter` hash like this:

WP_Query is a class in WordPress that provides many options to filter and sort data. You should be able to use the options available there to query your results.

Examples Using Ember.js + WordPress

Here are some projects we know using this strategy on production and have an open source repo. Share with us what you’re done with this :)

The EmberShow

CRITICarq.gt

Like what you read? Give jorge a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.