Building a React-based WordPress Theme

Using Frontity, I built a custom React-based theme for this WordPress blog.

Frontity makes it really simple to connect WordPress as your backend. They have 2 themes that you can use out of the box, or you can create one from scratch. Using the tutorial below, I followed along and created a custom theme. It doesn’t look great, but it works*!

There are some issues with the site, but by “it works” I just meant it deployed successfully with no errors.

I also deployed it to Vercel to get practice with that and see how the production process works. I’ve tested a few deployment sites so far, and Vercel has been the easiest and most user-friendly for me.

The Tutorial

Some of the key steps are:

  • Modify the Root component
  • Connect the Root component to the state
  • Add a menu
  • Use data from the current URL
  • Display the list of posts
  • Display the post content
  • Display posts and pages separately
  • Add styling
  • Add dynamic styling
  • Use state and actions
  • Add head tags

Leave a Reply