{"id":157726,"date":"2016-08-21T14:00:00","date_gmt":"2016-08-21T14:00:00","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=157726"},"modified":"2016-08-19T05:21:46","modified_gmt":"2016-08-19T05:21:46","slug":"real-world-sites-using-wordpress-rest-api","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/real-world-sites-using-wordpress-rest-api\/","title":{"rendered":"Real World Websites Using the WordPress REST API in Cool and Unexpected Ways"},"content":{"rendered":"<p>For most of us, the WordPress REST API feels like something experimental, something we might be developing our skills on or experimenting with.<\/p>\n<p>I know there are plenty of developers out there who are playing with the API, testing what it can do and using it to build personal projects and experimental sites. And that&#8217;s great: by doing this we learn about <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-rest-api-ordinary-users\/\" target=\"_blank\">the possibilities the API offers<\/a> and can share that with other developers.<\/p>\n<p>But did you know that there are quite a few sites already using the WP-REST API? These aren&#8217;t restricted to small, experimental sites either. Some big names in web publishing like Wired and the New York Times are already making use of the REST API and the possibilities it offers.<\/p>\n<p>In this post, I&#8217;m going to look at some of the sites already using the REST API, detail what they&#8217;re doing and try to find out how it&#8217;s benefited them and what they&#8217;ve learned from it. So read on!<!--more--><\/p>\n<p><em>Note: While researching this post I made use of the <a href=\"https:\/\/hmn.md\/wordpress-rest-api-white-paper\/\" target=\"_blank\">REST API White Paper<\/a> created by <a href=\"https:\/\/hmn.md\" target=\"_blank\">Human Made<\/a>. Thanks to them for putting such a comprehensive and useful resource out there &#8211; I recommend that anyone interested in the REST API gives it a read.<\/em><\/p>\n<ul class=\"dev-tutorial-list\"><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Wired<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"493\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/wired-600x493.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Wired image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>The Wired site\u00a0isn&#8217;t built with the REST API, but it does make use of the API to manage data exchange with third party services.<\/p>\n<p>There are two ways in which Wired is using the REST API: to share data with a third party source and to provide links in the site.<\/p>\n<p>Apple News is a native app written in JavaScript. Wired sends content to it by using the REST API to fetch\u00a0posts, parsing that to markdown and then outputting it using Apple&#8217;s native format. So the site you see when you visit Wired isn&#8217;t built with the REST API, but if you subscribe to Wired on your Apple device, then the content you access via that is delivered to you using the REST API.<\/p>\n<p>Like many news sites, Wired has links on its pages (usually under the content) that take you to other articles around the web you might be interested in. Again like lots of other news sites, it uses Outbrain, a third party service, for this. But Wired uses\u00a0the REST API as a fallback if Outbrain goes down or isn&#8217;t feeding the links to their site. If that&#8217;s the case, their site accesses the same data that&#8217;s been set up to go to Apple News and outputs that as links in the page.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Wired?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"http:\/\/www.wired.com\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--See it in Action\">See it in Action<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">ThemeConf<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"425\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/themeconf-600x425.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"ThemeConf image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>ThemeConf is a conference taking place this September for theme developers, with a focus on the REST API. It made sense therefore to build its website using the API.<\/p>\n<p>Unlike Wired, the ThemeConf site isn&#8217;t using the API to send data elsewhere. Instead, it uses the endpoints provided by the REST API as the basis for the theme running on the site. Instead of accessing posts and other content using PHP, the theme uses JavaScript to interact with the REST API and populate the pages of the site.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in ThemeConf?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"http:\/\/themeconf.com\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--See it in Action\">See it in Action<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">New York Times<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"434\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/nyt-600x434.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"New York Times image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>The New York Times uses the WP-REST API to power its live blog, a page on its site that is updated throughout the day with key news developments. Journalists post to the blog\u00a0via a completely\u00a0bespoke admin interface, built using JavaScript, that lets them\u00a0add content to it quickly as news comes in.<\/p>\n<p>Because the REST API means they can pull content in from third party sources, journalists can also post copy to the live blog from Slack, meaning they don&#8217;t have to leave what they&#8217;re doing and log in to the main website. This makes it easier for journalists who aren&#8217;t at a desk.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in New York Times?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"http:\/\/www.nytimes.com\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--See it in Action\">See it in Action<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">UsTwo<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"418\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/ustwo-600x418.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"UsTwo image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>UsTwo are a digital agency whose site was built as a Single Page Application using the REST API. They wanted to combine a front-end built using React with a backend powered by a reliable open source CMS.<\/p>\n<p>The content of their single page is modular, with a structure that&#8217;s different from a standard WordPress page. To make this work, they use\u00a0a custom page builder plugin that lets authors add modular content to the site.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in UsTwo?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/ustwo.com\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--See it in Action\">See it in Action<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">NPM<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"421\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/npm-600x421.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"NPM image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>NPM chose to use the REST API on their website for security reasons. They wanted a secure way to deliver content to different areas of the page without having to access IP addresses that weren&#8217;t whitelisted.<\/p>\n<p>Their site is built using JSON with Handlebars templates to deliver content. The REST API doesn&#8217;t\u00a0just send content to the site: it also sends rendered HTML, scripts and stylesheets.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in NPM?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/www.npmjs.com\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--See it in Action\">See it in Action<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">WordPress.com<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"424\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/wordpressdotcom-600x424.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"WordPress.com image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>WordPress.com&#8217;s admin screens, known as Calypso, are built entirely in JavaScript using the WordPress.com REST API. This API is currently different from the API for self-hosted WordPress sites but the two teams are working together to bring them in line with each other.<\/p>\n<p>Calypso works as a web app and as a desktop\u00a0app, using the REST API to access the content on your WordPress.com sites and let you add new posts, edit existing\u00a0ones\u00a0and more. You can find out more about it in our <a href=\"https:\/\/wpmudev.com\/blog\/calypso-tour\/\" target=\"_blank\">guided tour of Calypso<\/a>.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in WordPress.com?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.com\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--See it in Action\">See it in Action<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><\/ul><!-- end dev-tutorial-list -->\n\n<h3>This Short List Shows How Broad\u00a0the Possibilities Are<\/h3>\n<p>Each site I&#8217;ve listed above is different\u00a0and uses the REST API to achieve different things. In some cases, that&#8217;s about the user interface; in others it&#8217;s about interacting with third party services; while in others it&#8217;s about security.<\/p>\n<p>This demonstrates just how broad the possibilities are for developing with the REST API. The number of sites out there using it isn&#8217;t huge right now, but it&#8217;s growing, and with the possibilities it offers, the number is only set to explode in the future.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For most of us, the WordPress REST API feels like something experimental, something we might be developing our skills on or experimenting with. I know there are plenty of developers out there who are playing with the API, testing what it can do and using it to build personal projects and experimental sites. And that&#8217;s [&hellip;]<\/p>\n","protected":false},"author":347011,"featured_media":158390,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[235],"tags":[10108],"tutorials_categories":[],"class_list":["post-157726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-misc","tag-rest-api"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/157726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=157726"}],"version-history":[{"count":11,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/157726\/revisions"}],"predecessor-version":[{"id":158396,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/157726\/revisions\/158396"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/158390"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=157726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=157726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=157726"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=157726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}