In this presentation, I'll show you how to use WordPress' REST API to unlock WordPress' hidden potential by using it as a Headless CMS and connect it to a React front-end.
React out at: https://adamrasheed.com
3. What is a Headless CMS?
• AKA Decoupled CMS
• Allows your to break through the limits of the CMS by separating the
presentation model and the data layer.
• “Decouples” the front-end from the CMS/Backend
4. What is a Headless CMS?
Server/Database Wordpress CMS
Website
Mobile App
JSON
Data
5. Why Headless?
• Future-proof sites – lets you implement a
redesign without redoing your CMS structure.
• Full Control of Front-end – Gives your front-
end full control the user experience, as
opposed to coding things the “wordpress way”
• Interactive experiences – let’s you use front-
end frameworks like React or Vue to make
web apps.
• Let’s you import data into another CMS (e.g.
use a Wordpress Blog on a Shopify site).
9. Setting Up Wordpress
• No Need for Themes (use a blank one if
you want)
• If you use Advanced Custom Fields, use the
acf-to-rest-api plugin
• If you use any security plugins, make sure
you allow REST API access (e.g. iThemes)
• That’s it for Wordpress!
10. REST API
• Documentation:
• https: //developer.wordpress.org/rest-api/
• Endpoint:
• https: //domain.com/wp-json/
• Example - Posts
• http: //demo.wp-api.org/wp-json/wp/v2/posts
11. REST API - Posts
http://adam-rasheed-headless.local/wp-json/wp/v2/posts
12. REST API - Posts
http://adam-rasheed-headless.local/wp-json/wp/v2/posts
https://jslint.com
13. Pulling in Data to React
• Use Fetch, Async Await, or a library like Axios to pull in API data into your
web app.
• If using React, pull in data if component mounted. Saves a lot of data.
15. Pushing The Site Live
• Wordpress and your Front-end Site can live
on two separate hosts. (I’m planning on
using DigitalOcean for Wordpress, Netflify
for React).
• Quick-and-easy way to migrate live: 1) push
the WP site live, then change the endpoints
in your React to point to the live WP site,
then push the React Site live.
16. Next Steps
• Take an existing WordPress site you already have, and look at it’s REST
API
• Use the REST API to build out a new site in React/Vue/Angular, or even
create a static site and pull in the API with vanilla javascript!
• Keep in mind, you don’t have to go fully headless!
17. Nearly Headless CMS
• You can add interactive elements to your
WordPress site by implementing the REST
API
Some Ideas:
• Create a “Load More” button for your blog
post roll that pulls in the next 8 blog posts
without reloading the page
• Creating a twitter-like “like count” that
shows the “likes” each post has in real-
time
