Kathleen Vignos provides six examples where Wired’s engineering team has used or is using the WordPress REST API, from related posts widgets, to liveblogs, to site synchronization.
You can view all videos as we release them on the A Day of REST video archive.
Kathleen Vignos is the Director if Engineering at Wired. The digital magazine served over one billion pageviews in 2015 on Wired.com, and they use WordPress to run the site, and the WordPress REST API to run some components of the website. In Kathleen’s talk, she borrows from a regular magazine feature called, “Ask A Flowchart” that uses a flowchart to answer a question, like, “What’s the best-designed U.S. city for me?” In her talk, she asks, “Should I use the WordPress REST API?”
They use the REST API for several things, but Kathleen says it’s not always the right tool for the job. So they’ve developed a series of checks the engineering team uses to determine if the REST API is a good fit for a particular feature.
In this talk, Kathleen offers six examples of situations where they decided whether or not to use the WordPress REST API.
Wired has a “Latest Posts” widget that runs on every page, and at one point they used the WordPress REST API to serve those. However, they then received a request to never show duplicate posts between the Latest News, and therefore needed the query from the REST API to know what the primary query from the server was doing, so they decided to change the query back to the server.
This is a simple example of when they were using the API for a simple widget, but because of a requirement for how they displayed posts, in this case it made sense to go back to the server.
For related and recommended posts, Wired uses Outbrain — a third party service — to analyze the query of the provided page and deliver relevant results back to Wired. In this case, they use the WordPress REST API as a fallback, in case Outbrain isn’t available to return results.
So if they don’t get the response from Outbrain, then they remove the Outbrain element, call the REST API and render results based on the query to the API. This is just a basic example of how they use the API to ensure a response in case a third party goes down or doesn’t return results.
For serving content to Apple News, Wired created a custom output that fits Apple’s custom native format that’s not based on a web standard, so that they could make Wired work in the new-ish Apple News app.
Since Apple News requires such a custom feed, Wired uses the WordPress REST API to add a custom endpoint for Apple News that parses posts and render JSON in way that Apple News will accept.
The way the parsing works is that they take the HTML from the database, remove all shortcodes and other WordPress specific output, and format the article in a customized Markdown format, to JSON that Apple will consume. Kathleen says, “The WordPress REST API just gave us a really handy way to manage this process.”
Synchronizing the beta Wired with production
For about a six week period, Wired needed to fully synchronize articles between their beta site and their live site. The beta was a public beta, so beta users of the redesign (I was one!) could go to that site and read the same articles as the production site.
The team used the WordPress REST API to synchronize the two sites: one on the production site to push data with a hook on post publishing and updates, which would make a POST request to the REST API using the relevant post ID; the second on the beta site to receive the data, validate the request, and create the post.
Using the WordPress REST API for this synchronization, they were able to test their beta site with real users, and when the time came to make the switch, they had didn’t have to do any form of data migration at all.
Slack liveblog integration
Periodically, Wired runs liveblogs which update on the fly during events. In order to enable faster conversations with their team, they wanted to integrate with Slack, which they use for internal communications.
So they created a Node application that listens to a Slack channel for requests. Each comment or image posted to Slack creates an update to the liveblog post type, via the WordPress REST API, and a WordPress template updates the content on the page with React.
On the WordPress side, they query up to 500 live blog updates from Slack and render them on the front end, and since React can listen for updates, they can update the post itself in almost real time with the conversation.
Home page curator
Wired would like to re-work their home page curation tool to utilize a Single Page Application (SPA) using React components and the REST API. They want to create a custom endpoint for the REST API for the homepage and each “section” featured area. They would utilize this in both the admin, for making the admin curation experience better, and on the front end, so users could swipe or click from section to section without having to reload the page.
The videos at A Day of REST were shot and edited by Rhys Alexander. The conference was organized by Human Made, and you can stay up to date with A Day of REST — which is going to Boston — and learn about other potential future events. There were eight great talks at A Day of REST, and you can read my review of the event as a whole, and look out for the next video to be posted here soon.