Chris Who Codes

Recently, there has been a lot of talk in the WordPress world on what is the next big thing for the platform? The answer I've been hearing is called "headless" WordPress. So what does "headless" mean? WP Engine describes it as, "...a “decoupled” architecture, where the frontend and backend are managed separately. Publishers still manage content in WordPress, but WordPress is no longer responsible for generating HTML pages. Instead, a separate JavaScript-based frontend application is responsible for generating and serving the HTML pages that are served to website visitors."

This requires a more traditional WordPress developer (me) who works with PHP files to rethink how they build websites. It was certainly a learning experience, but overall I'm glad I took the leap and built my website using a Javascript framework. Not only does it create a very native "app-like" experience, the page load performance is off the charts.


  • Personal Portfolio

Tech Stack

  • Nextjs
  • GraphiQL
  • WordPress
  • Atlas

Project Link

View Project

Project Goals

My aim was to build my first Javascript based web application that used my WordPress website as a data endpoint. I wanted the website to be as fast as possible and mimic a native phone app experience as much as it realistically could. I also wanted the website to maintain search engine indexability so SEO wouldn't be an issue. This led me to my technology choices for the build.

Technology and Build Choices

While I normally wouldn't necessarily put my own portfolio website as an example inside the portfolio, I felt this was a special case as I had to learn quite a few new concepts, languages and techniques to get this where I wanted it to be. In order to meet my project goals, I looked for the best way to create Google indexable website from a react Javascript framework. The solutions I found were recommended by my favorite webhost, WP Engine. I could create the front-end application using react-based Nextjs, which enabled a single page web app like build experience, but also allowed for static site generation (ssg) so the individual content pages would actually exist for Google to crawl as individual pages. WP Engine also had its own technology called "Atlas" that would allow me to host the Javascript application portion of my site in the same dashboard as the WordPress half of my website. The WordPress half would be used to house the actual data that I would feed to my Javascript application via GraphiQL. Overall, very convenient!

Development Process and Challenges Faced

I had a few false starts, as I had never seriously spun up a react app development environment before, however WP Engine's "headless CMS developer roadmap" had tons of great resources that I was able to easily follow to get up and running. 

Coming from a traditional WordPress and PHP background, I was used to creating code that would be run on the server itself and dynamically generate content pages from the PHP code. This was very different from creating a react based JS application. React applications typically have to be compiled ahead of time, and have all bugs as ironed out as possible in the development environment ahead of launch, or it just won't deploy. I learned how to use node package manager to get a dynamically compiling development environment set up for my app. Using Nextjs, which is react-based, also allows for partial dynamic page generation for faster app builds, which I was thankful for.

Working in React and Nextjs for the first time had me fighting my way through various concepts like how a Nextjs app renders twice, once on the server and once on the client-side, and if both renders don't match, it causes errors. I solved some of these issues by using react hooks to tie into specific points of the rendering pipeline and make sure the content rendered and matched where it should.

A small, but cool, touch that I wanted to add was a light and dark mode toggle button. If you go to my website on your phone or computer where you have the operating system set to a specific mode (ex. dark mode), the website will automatically load with the appropriate stylesheet loaded. I also used a basic setup of storing the user's preference in the client side local storage to persist the light mode state across their user session.

Project Results

It took longer than I wanted it to, and some hair was torn out, but this was one of the most valuable projects I've completed in years. It really got me out of my comfort zone of traditional HTML and WordPress PHP based development. The web world is being taken over by Javascript based technologies, so I didn't want to be left in the dust. The performance of my website is also mind-blowingly fast compared to what I'm used to. On a more traditional web host, even a fully cached WordPress site using a CDN hasn't compared in the speed and performance area. I'm looking forward to doing more in this realm in the future!

Other Projects

Let’s build something together