Using WordPress & React to create a Headless CMS Portfolio Website.
So first things first, what is a headless CMS? Sounds like a sleepy hallow reference honestly.
Being “headless” does not mean that the CMS is missing its header section either. Instead, we tend to think of headless CMS as a service which can be used “a la carte” from other technologies used to build the front end. In our case we’ll be working with React as the front end and WordPress as our Content Management System.
Why Use a Headless CMS?
For our purposes we chose to use a headless CMS with WordPress due to its flexibility and utility. WordPress offers a way for you to build your front end using any technology you desire while still being able to incorporate its versatile Content Management System. In other words, how you manage and organize the digital content you plan to publish.
One good working example happens when you’re implementing a blog or forum on your site.
Instead of coding the necessary components from scratch you have the ability to use WordPress to manage the flow of content using a Rest API.
If you haven’t purchased a domain name or installed WordPress yet I suggest reading my other blog How Set Up a WordPress Portfolio Website first and then come back to here when you’re ready.
Setting Up WordPress
In order for React to connect to a data source we need to set WordPress up as a Rest-API. We can do so by downloading the following plugin from git and dropping this into our plugins folder within the WordPress backend. Rest-API
If done correctly you should now see something like this:
Next we’ll want to set up our link structure and for forum postings I recommend going to Settings -> Permalinks and choosing Post-Name link structure like so:
We’ll be working with API calls so it’s also recommended to download Postman which will allow us to insert URL’s and receive data from inside our WordPress site: Postman
After downloading postman you can run a GET request using the following url and replacing seankrueger.io with your own domain name and you should receive some information back in the body below.
URL: example.com/wp-json/v2/posts
Note: If you set up a WordPress login for your backend when you set up hosting you’ll need to switch over to the “auth” tab circled in blue and type in your credentials for Postman to have permission to make the request.
Great! Now that we have postman retrieving info from our backend its time to add another plugin that will help us display custom post types when we use WordPress and React together in the next step.
You can find Custom Post Type UI by search for it in the WordPress plugin section:
After installing and activating Custom Post Type UI you should now navigate to the left menu bar and click add/edit Post Types to create your first custom post.
After filling out the top portion you’ll needed to check a few more things. In order for you to be able to grab this information after posting you will need to navigate lower to where it says “Show in REST API” and change it to true along with the REST API base slug so that a path is created for this post.
If you’d like additional information from the rest API you can check whatever boxes you seek from the REST API.
Then we should be able to save our changes and VOILA a new option should have been populated on our sidebar! For my purpose it should say Blog but yours can be whatever you named the label at the top of the page.
Now we can go in and add whatever filler information we want for the sake of testing or go write in and start writing our content. For me I just added a quick Lorem Ipsum filler that can be found here: https://loremipsum.io/
After creating your content hit “publish” and then we can use postman to verify that the data is indeed available using the API. Remember what you used as your post name slug, for us it was /myblog and I named my article API-test.
So inside of Postman you should be able to go directly to the root of your portfolio website and make a get request to confirm: example.com/myblog/api-test/
Success! That’s all we need to setup in order to send our data to our ReactJS application. If you’d like to go further and add advanced custom fields you could also install and activate 2 additional plugins from the WordPress library; ACF and ACF to RestAPI
The reason you need both is because by default ACF does not communicate with WordPress Rest API so activating AFC Rest API fixes that well.
Congratulations! You now have a working portfolio website that can add custom post types and be called from an API request. But we’re not done yet! Now we need to make sure we can retrieve this information on our front end.
Next we’ll tackle how to set up ReactJS so we can render our data dynamically from what we have already built. Follow me for more here!