August 14, 2019
Get a SPA on a headless WordPress!
What if you have to update an old WordPress theme to React? And your only option for deployment is to upload a new theme in the WordPress dashboard?
create-react-wptheme replaces the Webpack dev server coming with
create-react-app with a WordPress dev server. That makes developing React themes as easy as developing any other React applications.
Deploying the theme is also made easy: you just build it and upload it to WordPress. That’s all.
The overall experience is very smooth. So smooth there is nothing to learn about. Big kudos to @devloco, the unknown code artist.
You won’t write PHP code anymore and all theme files will be generated for you except
functions.php in case you’ll want to extend
Creating themes with GraphQL is documented in the
WPGraphiQL plugin. Which is also serving as a live testbed for all database operations.
It feels refreshing to read the docs next to the live code editor. It’s all in one screen — without the need to fire up webpages and search for results.
I’ve found the GraphQL API documentation more useful than the original WordPress documentation. Better navigation, less verbose but straight to the point for a quick lookup and even for a deep dive.
Creating the first theme with GraphQL felt in the same way natural like creating themes the classic way.
In fact it was a more delightful experience.
It was fun to (re)implement the
get_category_link() PHP functions in React and observe this app needs no more from the whole category API.
That makes to feel how light the app is compared to the old approach when no one knew what goes on under the hood and how many functions are called down the stack to perform a simple operation.
It’s amazing how fast WPGraphQL managed to become the headless part of WordPress.
Recently the WPGraphQL creator was backed up by Gatsby to support further developments. These are signs of a healthy direction for the project.
Due to these two fantastic open source contributions WordPress is now ready for simple React theming using the Single Page Application (SPA) paradigm.
SPAs don’t really support multiple URLs and are ideal only for small projects like marketing sites and portfolios.
When more needed — real URLS, server side rendering, static site generation — one has to simply replace
create-react-wptheme with another service like Gatsby or Next.
All existing React and WPGraphQL code stays the same and it can be reused.
To React with best practices. Written by @metamn.