Using WordPress as a Backend for Your React Project
Using WordPress as a
Backend for Your React
A few words about Me
• Front-end Developer based in San Diego
• Started my career doing custom WordPress sites
(and before that, custom MySpace pages).
• Now I do a lot more work in vanilla
HTML,CSS,JS (ES6 is siiick), and some PHP and
• On a quest to use React to make my site an
single-page web app.
• Currently based in Jekyll (static-site generator)
• I want to get into posting blogs more regularly
• I want an easier time publishing blog articles and case studies. (I’ve found
I’m most consistent using the WordPress admin dashboard)
• Jekyll requires blogging in markdown, and then publishing
• Want an SPA (mostly for rad page transitions)
• Looking for the perfect solution
Solution: Headless CMS
• React for Front-end
• WordPress for Backend
Preface: You Don’t Have to Use React
• You can use these teaching for:
• or just to decouple your backend data from how you present it.
Getting Started – Overview
• What’s The Point of Headless?
• Setting Up Dev Environment (WordPress and React)
• WordPress & REST API
• Creating a Component
• Pulling in Data
• Publishing Live
• Netlify (front-end)
• DigitalOcean (WordPress)
What’s The Point of Headless?
• Completely Custom Front-end Development
• Free from the constraints and structures of WordPress theming. Eliminates “div-itis”.
• Speeds Up Your Site
• Moves display logic to client side, and streamlines the backend. The Backend can solely
focus on logic, and the front-end can solely focus on displaying that logic.
• Enhanced interactive capabilities on the website.
• The back-end becomes the “state machine”, but back-and-forth interaction happens real-
time in the browser. (e.g. ‘clap’ feature on medium.com)
• You can host your backend and front-end in two different places!
Mindset Shift: Separate Yo Concerns!
• Data/Logic != Presentation/View
Server/Database Wordpress CMS
Setting Up WordPress Environment
• Local development environment of your choice.
• (No Cowboy Coding!)
• Local by FlyWheel (easy to spin up)
• Scotchbox (also great)
• Much more control (exactly match your hosting environment)
• We don’t need to display anything on the actual site.
• Using either the REST API natively or GraphQL through a plugin
• Just make sure custom post types and advanced custom ﬁelds show up in
the API (done through a plugin)
WordPress REST API
• Let’s you access your WordPress site’s data in JSON
• Endpoints (Posts/ Pages / Site Info)
• Available natively in 4.7+
• REST API Handbook – https://developer.wordpress.org/rest-api/
• ACF integration
• Plugin (ACF to REST API: https://github.com/airesvsg/acf-to-rest-api/)
How to Access Endpoints
How to Access EndPoints
• https: //domain.com/wp-json/wp/v2/posts
• https: //domain.com/wp-json/wp/v2/pages
Let’s Check Out Posts on My Site
Let’s Check Out Posts on My Site
Reading Data for Humans
• PostMan —>
Wordpress – My Blank Theme
ACF to REST API Plugin
React/JS v. PHP/WordPress
• PHP is server-side (renders HTML that shows up in the browser through
• React/JS are client-side (show up in the browser natively)
• Vanilla React vs Frameworks like Gatsby
• GatsbyJs (https://www.gatsbyjs.org/)
• Like Jekyll for React
• Built in Router, Helmet, and GraphQli (IDE for GraphQL)
Create React App
• Up and running with react.
• No conﬁguration needed
• Can easily build for production
• Creating a Component that pulls in a list of our WordPress Posts
<— Only need to look at this
Recap: Fetching WordPress Data
• Set endpoint
• Mount Component
• Fetch Data
• Set state
• Render component
• You can host on two different platforms
• DigitalOcean/SSD-based server for WordPress
• Netlify for front-end.
• Host WordPress ﬁrst, update your endpoints in your React project, then
If React isn’t your Speed
• You don’t have create a completely Headless CMS.
You can create use the WordPress
API to add a layer of functionality
to your site.
Ideas for using the Word API on your current
• “Load More’ button that loads the next few blog posts without refreshing
• “Clap” button like on medium.com
• Twitter like button on posts that updates “like” count on your website
without refreshing the page.