Ben Foster 
I posted recently about an updated blog design, the first in 8 years. And now I’m doing another post about another redesign. My original intention was to build a front end in React+Remix and use WordPress headlessly as the backend. I ran into a few issues with this approach and it was going to be way more complex than I anticipated to do it right, and I just don’t have the time for that. So instead, I have created a new WordPress theme for the blog using classic PHP templates. Read on for the why.
Headless WordPress complexities
I don’t think this would be as much of a problem if starting a new site, but with an established site like this that has been running for almost 15 years, there would be a lot of breakages.
- Permalinks: all the links will potentially be changed, breaking existing post links
- Duplicate content: the same blog posts can be read on different sites unless the WordPress public front end is disabled somehow
- Crossdomain issues: I ran into some problems loading blog content across domains
- Rendering with React: it was very difficult to render blog content correctly with React. My approach was to render the content using dangerouslySetInnerHTML which had a tendency to break with server side rendering.
- RSS and social sharing: WordPress would generate RSS feeds and post to socials but they would point back to the WordPress site, not the React site. So generating traffic to the new site was going to be challenging.
I’m sure all of these problems are solvable, but don’t have the will to solve them in my spare time and I would rather spend my time doing other things.
WordPress Classic and Block themes
I ended up building a new Classic theme based on my last blog theme. I wanted to build a new theme using the latest tech and approaches which meant a Block theme, but I soon discovered that Block themes meant that everything is designed via the Gutenburn UI, which I think is great for writing blog posts, but terrible for building a theme. I struggled to really make anything decent in the Block editor so ended up going with a Classic theme. I don’t need the theme to be editable in the WordPress admin. The Classic themes use simple PHP templates, so they require coding but you can pretty much do anything you want. I found working in PHP templates to be quite refreshing after nearly 10 years of mostly working in React.
Design and build
I knocked up the new design in Figma in a couple hours, based on the new design for my personal website, but with a few tweaks to give it its own personality. Then a few days on and off building the design into a WordPress theme. It’s been a long time since building themes, and I have to say, Github Copilot was a great help with suggesting the functions I needed to use to display the data.