Astro has been the hottest new framework on the block for a little while now, in this post we’ll explore how to hook it up with WordPress to create headless sites, combining a slick modern dev experience with the world’s most ubiquitous CMS.
This will be a couple of installments. In this first post, we’ll set up the classic starter blog project. In future posts, we’ll look at setting up custom post types and custom fields and more advanced/real-world implementations beyond personal sites.
Note: this article assumes some very basic familiarity with both WordPress and Astro. I will try to explain Astro concepts as we go, but if you are completely new to Astro I highly recommend this crash course which will cover all the basics and even some advanced stuff as well.
Let’s jump right in!
Setting up WordPress
For this write up, we’ll be using Astro in the Static Site Generation mode. What this means is that your WordPress instance will not get hit with requests, except when you build your application. For development purposes, this means you can go ahead and just spin up a local WordPress site using your favorite tool (I recommend local if you are looking for a beginner friendly/zero-config option). No need to set up real web hosting unless you want to.
Go ahead and set up your own blank WordPress install, then install the following plugins:
- FakerPress – this will just allow you to generate a handful of sample posts super quickly
- WPGraphQL – You can set up headless WordPress with just the built in REST API, but using WPGraphQL will improve the dev experience on the Astro side significantly.
Generating our starter content in WordPress
Once you install FakerPress you can navigate to the “posts” page within the plugin to generate some dummy content for us to use. Just set the number of posts you want to create and set the date range to sometime in the past: