{"id":2479,"date":"2020-11-24T14:57:09","date_gmt":"2020-11-24T05:57:09","guid":{"rendered":"https:\/\/dev-n8finch.pantheonsite.io\/?p=2479"},"modified":"2022-07-01T10:36:14","modified_gmt":"2022-07-01T15:36:14","slug":"using-wordpress-as-an-api","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/using-wordpress-as-an-api\/","title":{"rendered":"Using WordPress as an API"},"content":{"rendered":"\n<p>Wait, what&#8217;s an API and why would I use WordPress as an API?<\/p>\n\n\n\n<p>What the heck is a BYOFE, and what does it have to do with WP?<\/p>\n\n\n\n<p>Why are there so many acronyms?!?! &#x1f609;<\/p>\n\n\n\n<!--more-->\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WordCampEU 2022<\/h2>\n\n\n\n<ul><li><strong><a href=\"https:\/\/drive.google.com\/file\/d\/1SOCP2VUGUgYISCW77L70byAagamv8E1V\/view?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WCEU 2020 Slides<\/a><\/strong><\/li><li>Video (or view on WordPress.TV <strong><a href=\"https:\/\/wordpress.tv\/2022\/07\/01\/nate-finch-using-wordpress-as-an-api\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a><\/strong>):<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='281' src='https:\/\/video.wordpress.com\/embed\/GxSKv5y9?hd=1&amp;cover=1' frameborder='0' allowfullscreen allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1633526814'><\/script>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Workshop Prerequisites<\/h3>\n\n\n\n<ul><li>Probably your own laptop to work along<\/li><li>Refer to or download <a href=\"https:\/\/github.com\/n8finch\/wordpress-as-an-api\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">this Git repository<\/a>.<\/li><li>Install <a href=\"https:\/\/LocalWP.com\">LocalWP.com<\/a>, cross platform, available for Linux, Windows, and Mac<\/li><li><a href=\"https:\/\/www.postman.com\/\">Postman app<\/a> or <a href=\"https:\/\/insomnia.rest\/download\">Insomnia app<\/a> installed, cross platform, available for Linux, Windows, and Mac (or you can use the web version of Postman.<\/li><li>Knowledge and experience with Git, PHP, and maybe some JS<\/li><\/ul>\n\n\n\n<ul><li>LocalWP (from <a href=\"http:\/\/localwp.com\/\">LocalWP.com<\/a>, or a similar local development environment, but I won&#8217;t be helping debug it so they should install and test it before they come)<\/li><li>Postman (<a href=\"https:\/\/www.postman.com\/\"><\/a><a href=\"https:\/\/www.postman.com\/\">https:\/\/www.postman.com\/<\/a>): they can download the app or use the web app. The need create an account. (preferred, I&#8217;ll be using this in the workshop)<\/li><li>Insomnia (<a href=\"https:\/\/insomnia.rest\/download\"><\/a><a href=\"https:\/\/insomnia.rest\/download\">https:\/\/insomnia.rest\/download<\/a> )<\/li><li>Extra Credit: <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">NodeJS<\/a> installed for the feed reader.<\/li><\/ul>\n\n\n\n<p>It would be good if you were familiar with at least PHP and JS (you don&#8217;t have to be experts, I think intermediate is fine, there will be code they can copy\/paste). If they were familiar with Git and Github, that would be good too.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Workshop Outline<\/h3>\n\n\n\n<ol><li>Setup, import, first example (10 minutes)<\/li><li>WP REST API (30 &#8211; 40 minutes)<ol><li>GET and POST with posts\/pages<\/li><li>CPTs<\/li><li>Meta, ACF<\/li><li>Custom endpoints<\/li><\/ol><\/li><li>Authentication methods (20 minutes)<ol><li>None (already covered)<\/li><li>API Key\/APP Password<\/li><li>JWT<\/li><\/ol><\/li><li>Repeat some of the above with with WPGraphQL (15 minutes)<\/li><li>Postman (10 minutes)<ol><li>Collections<\/li><li>Tests<\/li><\/ol><\/li><li>Extra Credit (15 minutes)<ol><li>Set up basic React app<\/li><li>\u201cFeed Reader\u201d<\/li><li>JWT Login and Auth for creating post types.<\/li><\/ol><\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>In 2020, I gave a different version of this talk to our local WP meetup via Zoom or Google or whatever we were using in those &#8220;early pandemic days&#8221;&#8230; Below are the abstract, recording, and slides for that presentation&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Using WordPress as an API (or, WordPress as a &quot;Bring Your Own Front End&quot;)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/E5KgZVncVdk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen title=\"Using WordPress as an API (or, WordPress as a \"Bring Your Own Front End\")\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>WordPress is an incredibly flexible platform on which to build websites and web apps. Traditionally, WP has been used for blogs, publishing platforms, business websites and more. It offers an all-in-one package.<\/p>\n\n\n\n<p>But what if you want to use a framework like Gatsby (or Gridsome), NextJS (or NuxtJS), 11ty, MERN, Laravel, Ruby on Rails, RedwoodJS, etc. to build an application, but long for the WordPress editing experience?<\/p>\n\n\n\n<p>Or, what if you have a client that already has a web application running, and would like to incorporate a blog using WordPress to that application?<\/p>\n\n\n\n<p>There are many ways to &#8220;couple&#8221; other technologies with a &#8220;decoupled&#8221; WordPress publishing experience.<\/p>\n\n\n\n<p>In this talk, we&#8217;ll explore:<\/p>\n\n\n\n<ul><li>What an API is and to use WordPress as an API<\/li><li>Look at other BYOFEs (bring your own front-end), and how WordPress offers the same or more out of the box<\/li><li>How we can easily create custom post types and custom fields to manage our data in WordPress for API consumption<\/li><li>How we can use other frameworks to read and publish WordPress data (I&#8217;ll be using examples from Create React App and Gatbsy mostly, but this will apply to any framework that can consume an API<\/li><li>Some caveats and how to address those.<\/li><\/ul>\n\n\n\n<p>This will be a jam-packed, Jam-stacky talk, so BYO-lunch and BYO-curiosity as we discover how we can use WP as an API instead of other BYOFE (ok, I&#8217;ll stop with the acronyms now!).<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/drive.google.com\/file\/d\/1HQXJEfgW6D2FkUVsi2LuzLMk7iuJr6Am\/view?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Presentation Slides<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wait, what&#8217;s an API and why would I use WordPress as an API? What the heck is a BYOFE, and what does it have to do with WP? Why are there so many acronyms?!?! &#x1f609;<\/p>\n","protected":false},"author":1,"featured_media":2885,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[1,46],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using WordPress as an API | Nate Finch<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using WordPress as an API | Nate Finch\" \/>\n<meta property=\"og:description\" content=\"Wait, what&#8217;s an API and why would I use WordPress as an API? What the heck is a BYOFE, and what does it have to do with WP? Why are there so many acronyms?!?! &#x1f609;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Nate Finch\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-24T05:57:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T15:36:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/using-wp-as-an-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1247\" \/>\n\t<meta property=\"og:image:height\" content=\"701\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@n8finch\" \/>\n<meta name=\"twitter:site\" content=\"@n8finch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/\"},\"author\":{\"name\":\"Nate\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"headline\":\"Using WordPress as an API\",\"datePublished\":\"2020-11-24T05:57:09+00:00\",\"dateModified\":\"2022-07-01T15:36:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/\"},\"wordCount\":584,\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"articleSection\":[\"Blog\",\"Talks\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/\",\"url\":\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/\",\"name\":\"Using WordPress as an API | Nate Finch\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch.local\/#website\"},\"datePublished\":\"2020-11-24T05:57:09+00:00\",\"dateModified\":\"2022-07-01T15:36:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8finch.local\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using WordPress as an API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8finch.local\/#website\",\"url\":\"https:\/\/n8finch.local\/\",\"name\":\"Nate Finch\",\"description\":\"All the things, keeping it clever...&#x1f913;\",\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8finch.local\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\",\"name\":\"Nate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"contentUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"width\":796,\"height\":792,\"caption\":\"Nate\"},\"logo\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using WordPress as an API | Nate Finch","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/","og_locale":"en_US","og_type":"article","og_title":"Using WordPress as an API | Nate Finch","og_description":"Wait, what&#8217;s an API and why would I use WordPress as an API? What the heck is a BYOFE, and what does it have to do with WP? Why are there so many acronyms?!?! &#x1f609;","og_url":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/","og_site_name":"Nate Finch","article_published_time":"2020-11-24T05:57:09+00:00","article_modified_time":"2022-07-01T15:36:14+00:00","og_image":[{"width":1247,"height":701,"url":"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/using-wp-as-an-api.png","type":"image\/png"}],"author":"Nate","twitter_card":"summary_large_image","twitter_creator":"@n8finch","twitter_site":"@n8finch","twitter_misc":{"Written by":"Nate","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/#article","isPartOf":{"@id":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/"},"author":{"name":"Nate","@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"headline":"Using WordPress as an API","datePublished":"2020-11-24T05:57:09+00:00","dateModified":"2022-07-01T15:36:14+00:00","mainEntityOfPage":{"@id":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/"},"wordCount":584,"publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"articleSection":["Blog","Talks"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/","url":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/","name":"Using WordPress as an API | Nate Finch","isPartOf":{"@id":"https:\/\/n8finch.local\/#website"},"datePublished":"2020-11-24T05:57:09+00:00","dateModified":"2022-07-01T15:36:14+00:00","breadcrumb":{"@id":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/n8finch-site.site.strattic.io\/using-wordpress-as-an-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8finch.local\/"},{"@type":"ListItem","position":2,"name":"Using WordPress as an API"}]},{"@type":"WebSite","@id":"https:\/\/n8finch.local\/#website","url":"https:\/\/n8finch.local\/","name":"Nate Finch","description":"All the things, keeping it clever...&#x1f913;","publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8finch.local\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce","name":"Nate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/","url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","contentUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","width":796,"height":792,"caption":"Nate"},"logo":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/2479"}],"collection":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/comments?post=2479"}],"version-history":[{"count":17,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/2479\/revisions"}],"predecessor-version":[{"id":2993,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/2479\/revisions\/2993"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media\/2885"}],"wp:attachment":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media?parent=2479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/categories?post=2479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/tags?post=2479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}