WordPress as Source of User-Managed Content

In this example, we will start with a MEAN stack application and then pull in user-managed content into a screen, e.g., an "About Us" screen.  For simplicity, we only really need a client app (AngularJS and none of MongoDB, Express, or NodeJS). To make this completely transparent, I will write the client app in JSFIDDLE.

note: I will assume a basic familiarity of WordPress, i.e., pretty much what one would pick up through an introductory tutorial.

Install and Test the WP REST API Plugin

First, install the WP REST API plugin: http://wp-api.org/. This example was written with version 1.2.2.

By the way, one of the guidelines of this overall effort is to minimize the number of plugins and customization of the WordPress environment.

At this point, the unauthenticated API endpoints are ready to go, e.g., browsing to:

http://local.wordpress.dev/wp-json/posts

results in an empty array.

To make it more interesting, we will put in two posts with titles and content and reloading results in something more substantial:

[{"ID":44,"title":"The Title of Post 2","status":"publish","type":"post","author":{"ID":1,"username":"admin","name":"admin","first_name":"","last_name":"","nickname":"admin","slug":"admin","URL":"","avatar":"http:\/\/0.gravatar.com\/avatar\/06e92fdf4a9a63441dff65945114b47f?s=96","description":"","registered":"2015-06-22T20:13:15+00:00","meta":{"links":{"self":"http:\/\/local.wordpress.dev\/wp-json\/users\/1","archives":"http:\/\/local.wordpress.dev\/wp-json\/users\/1\/posts"}}},"content":"The content\u00a0of post 2<\/p>\n","parent":null,"link":"http:\/\/local.wordpress.dev\/2015\/06\/24\/the-title-of-post-2\/","date":"2015-06-24T21:09:07","modified":"2015-06-24T21:21:11","format":"standard","slug":"the-title-of-post-2","guid":"http:\/\/local.wordpress.dev\/?p=44","excerpt":"

The content\u00a0of post 2<\/p>\n","menu_order":0,"comment_status":"closed","ping_status":"closed","sticky":false,"date_tz":"UTC","date_gmt":"2015-06-24T21:09:07","modified_tz":"UTC","modified_gmt":"2015-06-24T21:21:11","meta":{"links":{"self":"http:\/\/local.wordpress.dev\/wp-json\/posts\/44","author":"http:\/\/local.wordpress.dev\/wp-json\/users\/1","collection":"http:\/\/local.wordpress.dev\/wp-json\/posts","replies":"http:\/\/local.wordpress.dev\/wp-json\/posts\/44\/comments","version-history":"http:\/\/local.wordpress.dev\/wp-json\/posts\/44\/revisions"}},"featured_image":null,"terms":{"category":[{"ID":1,"name":"Uncategorized","slug":"uncategorized","description":"","taxonomy":"category","parent":null,"count":2,"link":"http:\/\/local.wordpress.dev\/category\/uncategorized\/","meta":{"links":{"collection":"http:\/\/local.wordpress.dev\/wp-json\/taxonomies\/category\/terms","self":"http:\/\/local.wordpress.dev\/wp-json\/taxonomies\/category\/terms\/1"}}}]}},{"ID":42,"title":"The Title of Post 1","status":"publish","type":"post","author":{"ID":1,"username":"admin","name":"admin","first_name":"","last_name":"","nickname":"admin","slug":"admin","URL":"","avatar":"http:\/\/0.gravatar.com\/avatar\/06e92fdf4a9a63441dff65945114b47f?s=96","description":"","registered":"2015-06-22T20:13:15+00:00","meta":{"links":{"self":"http:\/\/local.wordpress.dev\/wp-json\/users\/1","archives":"http:\/\/local.wordpress.dev\/wp-json\/users\/1\/posts"}}},"content":"

The content\u00a0of post 1.<\/p>\n","parent":null,"link":"http:\/\/local.wordpress.dev\/2015\/06\/24\/the-title-of-post-1\/","date":"2015-06-24T21:08:52","modified":"2015-06-24T21:08:52","format":"standard","slug":"the-title-of-post-1","guid":"http:\/\/local.wordpress.dev\/?p=42","excerpt":"

The content\u00a0of post 1.<\/p>\n","menu_order":0,"comment_status":"closed","ping_status":"closed","sticky":false,"date_tz":"UTC","date_gmt":"2015-06-24T21:08:52","modified_tz":"UTC","modified_gmt":"2015-06-24T21:08:52","meta":{"links":{"self":"http:\/\/local.wordpress.dev\/wp-json\/posts\/42","author":"http:\/\/local.wordpress.dev\/wp-json\/users\/1","collection":"http:\/\/local.wordpress.dev\/wp-json\/posts","replies":"http:\/\/local.wordpress.dev\/wp-json\/posts\/42\/comments","version-history":"http:\/\/local.wordpress.dev\/wp-json\/posts\/42\/revisions"}},"featured_image":null,"terms":{"category":[{"ID":1,"name":"Uncategorized","slug":"uncategorized","description":"","taxonomy":"category","parent":null,"count":2,"link":"http:\/\/local.wordpress.dev\/category\/uncategorized\/","meta":{"links":{"collection":"http:\/\/local.wordpress.dev\/wp-json\/taxonomies\/category\/terms","self":"http:\/\/local.wordpress.dev\/wp-json\/taxonomies\/category\/terms\/1"}}}]}}]

albeit a little difficult to read.

Organizing Posts for a Screen

If the screen requires a single post, we can simply get the single post, e.g.,

http://local.wordpress.dev/wp-json/posts/44

If the screen requires multiple posts, we can organize the posts with categories and get them by category, e.g.,

http://local.wordpress.dev/wp-json/posts?filter[category_name]=home&filter[orderby]=ID&filter[order]=ASC

With this strategy, we can build our AngularJS app as in the example: http://jsfiddle.net/sckmkny/hsafmsbe/.

note: Because this example was developed to run against my local WordPress installation it will not work outside of it.