Join Morten Rand-Hendriksen for an in-depth discussion in this video REST APIs and standalone applications, part of WordPress: REST API.
- [Narrator] Remember in the beginning of the course where I explained that the REST API allows us to work with the data store by WordPress from outside WordPress? Well, so far we've only worked inside the safe confines of WordPress with a WordPress theme so it's high time we break that wall and test the REST API with an independent app. In this chapter, I'll walk you through the process of building a rudimentary stand-alone application that uses the WordPress REST API to populate itself. I call it the WP Reader and it takes the url from any WordPress site and displays the 10 most recent posts from that site in a uniform format using the REST API.
You can see here the application is running on my computer under the domain 127.0.01.58374. Here I can plug in the url to any WordPress site, so I'll put in my own and when I click Get post that app goes to Morten.com and finds the REST API then it asks for the 10 most recent posts and populates a menu here on the side. And then it grabs the first of these posts so the most recent post and places it on the right hand side here. Now I can navigate between each of the posts and you'll see as I do so that we make new requests to the REST API for the site in question every time we click on one of these things.
And as you see, this app is super fast because it's only dealing with the REST API and it's displaying content from Morten.com in a completely different way from the site itself. The point of an app like this is to remove all the design and clutter and ads and other stuff from the original site and just get the content in a font and layout I've chosen. Simple, useful, and in no way production ready. This is just a proof of concept to get you thinking. Here's the thing, WP Reader is intentionally ephemeral.
It neither holds nor stores any of the data it gathers, merely displays it in the browser when requested. In that way, it's not that different from a text only browser or a reading app like Pocket which is important since it can be used to read content from any WordPress site and shouldn't store that content since it's not owned by the person running the app. For this reason, it's important that the app provides raw links to the original article. And you see that right down here under the title and the author name and the date we have a link directly to the original source.
Click that link and you're taken to the site where the article originated. WP Reader is both a classic demo of a single paged application and the antithesis of a resilient web app. On its own, it's just a shell with no content if I inspect the code right now you'll see this app is pretty much just an HTML shell. There is no content and that means anyone trying to archive this app or pull content from it using any other app will find absolutely nothing there.
And that's an important point to dwell on single paged applications like this are easy to build but they are not resilient unless you add a lot of extra functionality. That's okay since this app is for reading content from other sites but would not be okay if the app was running the front end of a site where the content originates but I'm really getting into the weeds here. Let's build this thing and see how we can leverage the WordPress REST API in the wild. Just remember, this is a proof of concept only and a very crude one at that.
Do not publish this app on the web. Build something better.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses