I’ve been wanting to get more familiar with the JSON API proposed for WordPress core and also with Angular (a javascript framework), so I decided to start building a little web app idea I’ve had for a while.
I’ve started small. My first experiment was just to see if I could connect to the JSON API and output a list of most recent posts. To do this, I built a basic theme with only the essential components: a stylesheet, a functions.php, an index.php, and the custom javascript.
You can find it on GitHub here.
How the JSON Works
Since the JSON API is not in WordPress core yet, you’ll need to install it as a plugin: https://wordpress.org/plugins/json-rest-api.
Once it’s installed, you should be able to access the JSON at:
yoursite.com/wp-json/posts
If it looks like an ugly blob of text, I’d highly recommend installing a browser extension to prettify it. I use the JSONView extension for Chrome.
Enqueue the Scripts
For this really simple theme example, we’ll just need to load a couple scripts and a stylesheet. We’ll load Angular (through the Google CDN) and our custom javascript to display the posts. It’ll should look like this in functions.php:
https://gist.github.com/devinsays/dd557b6cdb807c3efc19
You’ll notice that wp_localize_script is also being used. This is so we can use PHP to output a variable (the path to the JSON API) which our javascript can read.
Custom Javascript
This app.js is about as pared down as I could make it. It defines the api path in the root scope, and then fetches the most recent 10 posts in the controller.
If you view the console log in the browser, you should see correct JSON API path outputted, along with the object of data that is returned.
https://gist.github.com/devinsays/67055f35170385fa4a04
Display Posts
Finally, we need to render these posts on the front end. To do that, we just loop through the returned data in index.php. In this example, I’m just displaying the title and excerpt:
https://gist.github.com/devinsays/f7115d8294d6beed99ff
What’s Next
As you can see, it’s pretty simple to get started with Angular with WordPress. If you want to download this little theme to experiment with, you can download it from GitHub.
For the little app I’m building, I’d like to display a quote when someone visits the site. If they want to see another quote, they’ll click a button. I also want the option for unauthenticated visitors to be able to submit a new quote.
So, as I piece this all together, I’ll try to keep posting my progress.
Nice article Devin. If you are interested in AngularJS + WP-API in a mobile app, here’s a starter project I put together that pulls in posts and does some other stuff https://github.com/scottopolis/wpIonic
Hi Devin,
in case your interested I’ve been using a quick service for WP on a handful of WP-API apps I’ve been/am developing.
https://gist.github.com/dannywilson/52a444195f0df873cc1c
simplifies the calls down to wpService.function-name().then(function(data){ do stuff },function(error){handle errors});
In case it’s of any use.
Ta
Angular is amazing! Glad to here that you start using it for your apps. We’ve been using it for a while for our Meta Box Builder extension and one of our shortcode plugin. I love the “2-way binding” feature which allows me to add “live preview” to our products!
Hey nice stuff Devin, I’ve been thinking about doing the same with Backbone. Seen a few such examples around recently and wondering why it seems everyone is approaching this with Angular when Backbone and Underscore achieve can the same result, with data binding and front end templates, yet are already in core. You just need to `wp_enqueue_script(‘backbone’);`
Hi, great article!
It would be great to see how we could serialize the output so that it displays correctly on the client side.
Cheers!!
Great Tutorial Devin, thanks for writing this! I have followed your tutorial and initially it worked as hoped.
I’m having a bit of a problem when I have a high number of posts (around 160), the performance really drops and it takes around 4-5 seconds to load the data from JSON. Have you encountered this issue as well? I find I have the same problem when loading thumbnail images, text and titles to if I was just loading titles.
I’m still getting into Angular so any tips would be great! Thanks!
I’d try and find where the bottle neck actually is. Are you querying the API for all 120 posts at once? If so, that might be it. Try loading 10 at a time, and just pull more as you need them.
Thanks for the reply Devin! I am loading all at once, I think the best approach would be to load 10 at a time like you suggested. Now to work out how to do that! Thanks mate,
James
Nice tutorial. Only issue I have, with latest WP 4.3.1, Angular 1.4 the text is formatted with html tags that are visible (as in some text).
How can I convert this back to rendered html?
Hi Steve, you can disable the wpautop filter.
Take a look at this link https://codex.wordpress.org/Function_Reference/wpautop
Interesting stuff.
I’d be interested to hear from anyone who’s been playing with Angular2 and the wp json api.
Good Tutorial,
but I wanna handle the featured_image from wordpress.
so how can I solve theis problem.
thanks