<commit_before>---
title: Ember.js with a Wordpress WP-API backend
---

Let me present you a great (and dare I say, fun!) way to build websites with the power of Ember and Wordpress extended with [WP-API](http://wp-api.org/) and [Advanced Custom Fields](http://www.advancedcustomfields.com/) (ACF).

We've tried it all: Typo3, Drupal, Wordpress with Timber, Perch, Statamic, Jekyll, Middleman, Google Drive, Dropbox, anybox, anything to make it easy for clients to edit their website while spending a minimum amount of time on that part to allow us to focus on creating a good website. Normally we'd even finish a static website, convert it to a Wordpress theme and first then integrate it. Not effective, it's hard to reuse code across projects and it's not fun.

Ember is fun but for the most of us it's hard to whip up a REST API. And how do you make it easy for your client (or worse, yourself!) to manage all that? What about multilanguage? Now a day, Wordpress does all that and WP-API exposes it with a REST API that we can use with Ember.

Even if your project isn't limited to title-and-body kind of articles, Advanced Custom Fields gives you all the flexibility you can think of AND its data is _also_ available through WP-API.

## Everything is a post

@todo: Custom post types, how to query and filter.

- https://github.com/WP-API/WP-API/issues/1352#issuecomment-112975732
- https://github.com/WP-API/WP-API/pull/1302

### Custom Fields

@todo: How to configure Advanced Custom Fields.

### Related projects

- Pfadfinderei, <NAME>, Kunstjagd, Yasemin, BarGuide projects for inspiration.
- https://github.com/kush-team/ember-cli-to-wp-theme (the most interesting one)
- https://github.com/calouette/ember-wp-api<commit_msg>Draft the WP post for now<commit_after>---
title: Ember.js with a Wordpress WP-API backend
draft: true
---

We've tried it all: Typo3, Drupal, CMS Made Simple, Hugo, Kirby, Wordpress with Timber, Perch, Statamic, Jekyll, Middleman, Google Drive, Dropbox, anybox, no box… anything to make it easier for clients to edit their website while minimizing development time, allowing us to focus on the unique, features of the individual projects, making them great. Normally we'd even finish a static, prototype website first, and first then then convert it to a Wordpress theme and make it dynamic. Not effective, it's hard to reuse code across projects and it's not fun.

Let me present you a great (and dare I say, fun!) way to build websites with the power of Ember and Wordpress extended with [WP-API](http://wp-api.org/) and [Advanced Custom Fields](http://www.advancedcustomfields.com/) (ACF). We'll write a simple adapter and serializer for Ember Data to make it fit together and you'll be up and running in no time.

Ember is fun but for the most of us it's difficult to whip up a REST API. And how do you make it easy for your client (or even worse, yourself!) to manage all that? What about multilanguage? What about security? That's where a content management system comes in. Wordpress combined with a few free plugins does all that and the Wordpress API (WP-API) exposes it almost automagically with a REST API that we can use with Ember Data.

Of course, skipping the theme layer of Wordpress has its disadvantages. Unless the plugin is exposed through the WP-API, you probably won't be able to use it. You can't use custom shortcodes, you'll have to build menus yourself etc. On the other hand we'll have the JavaScript and Ember communities behind us.

As most things in life, as soon as you know how to it's actually pretty easy. That being said this setup does require some setup. To keep this article short(er) I don't have the opportunity to explain everything and it assumes you are familiar with Wordpress and Ember.js.

## Our goal

We will create a portfolio website using Ember.js and Wordpress as our backend. We will extend WP with a custom ‘project’ post type with optional fields to choose a background and text color per project.

Using Ember Data and a custom adapter and serializer we can build the front-end with Ember.

## Setting up Wordpress

Install Wordpress. I can recommend [Webfaction](https://webfaction.com) as a host but anything will do. [Pantheon](https://pantheon.io) also offers (two) free hosted installs if you prefer.

Once installed, we need a few plugins as well: [WP-API 2](http://v2.wp-api.org/), [WP-CORS](https://wordpress.org/plugins/wp-cors/), [ACF](http://www.advancedcustomfields.com/) and finally [ACF to WP API](https://wordpress.org/plugins/acf-to-wp-api/).

Enable all of them now, please.

My Wordpress installation is here: http://dev-ember-wp.pantheon.io/wp-json/wp/v2/posts. If you go there you’ll see the JSON we get. If you use Chrome, the [json-formatter]](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en-US) extension is handy.

To get all posts the endpoint is:

http://dev-ember-wp.pantheon.io/wp-json/wp/v2/posts

To get a single post the endpoint is:

http://dev-ember-wp.pantheon.io/wp-json/wp/v2/posts/1

Good, that works. You can replace ‘posts’ with your other types as well. Now we’ll create the custom project post type, add the color fields with ACF and make sure we can access it through the API. I won’t go in to detail about creating custom post types in Wordpress but there a few things you need to know.

First upload this project-post-type.js to `/wp-content/plugins/` and enable it in Wordpress.

Because the endpoint derives from the post type name, the name is registered in plural form e.g. ‘projects’. This is what all the Ember adapters normally expect. Also `show_in_rest` is set to true, otherwise it won’t show up. If you wanted to have another endpoint than the post type name `projects` you can change it with the `rest_base` parameter.

Now go to ‘Custom Fields’ and create a new field group. Assign it to our ‘projects’ post type in the location box and create to color picker fields: ‘background color’ and ‘text color’.

Let’s create a project with some random text and colors to test. If everything worked you’ll be able to find it at

http://dev-ember-wp.pantheon.io/wp-json/wp/v2/projects


## Setting up Ember CLI

@todo: Custom post types, how to query and filter.

- https://github.com/WP-API/WP-API/issues/1352#issuecomment-112975732
- https://github.com/WP-API/WP-API/pull/1302

### Custom Fields

@todo: How to configure Advanced Custom Fields.

### Related projects

- Pfadfinderei, Kölnercocktailtage, <NAME>, Kunstjagd, Yasemin, BarGuide projects for inspiration.
- https://github.com/kush-team/ember-cli-to-wp-theme (the most interesting one)
- https://github.com/calouette/ember-wp-api
{'fraction_non_alphanumeric': 0.08096378329841365, 'fraction_numerical': 0.006435199042202933, 'mean_word_length': 4.1526599845798, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 13, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2367648', 'n_tokens_mistral': 1964, 'n_tokens_neox': 1882, 'n_words': 955}