Foxhound

Avatar of Chris Coyier
Chris Coyier on

As of WordPress 4.7 (December 2016), WordPress has shipped with a JSON API built right in. Wanna see? Hit up this URL right here on CSS-Tricks. There is loads of docs for it.

That JSON API can be used for all sorts of things. I think APIs are often thought about in terms of using externally, like making the data available to some other website. But it’s equally interesting to think about digesting that API right on the site itself. That’s how so many websites are built these days away, with “Moden JavaScript” and all.

So it’s possible to build a WordPress theme that uses it’s own API for all the data, making an entirely client-rendered site.

I would have thought there would be a bunch of themes like this available, but it seems it’s still new enough of a concept there isn’t that many. That I found, anyway. I did find Foxhound though, by Kelly Dwan. It’s simple and quite nice looking:

It’s React-based, so the whole thing is logically busted up into components:

I popped it up onto a test site and it works pretty good! So that I could click around and do various stuff, I imported the “theme test unit” data, which is a nice and quick way of populating a fresh WordPress install with a bunch of typical stuff (posts, authors, comments, etc) for testing purposes.

Only a shell of a page is server-rendered, it looks like. So without JavaScript at all, you get nothing. Certainly, you could make all this work the regular server-rendred WordPress way, you’d just be duplicating a heck of a lot of work, so it’s not surprising that isn’t done here. I would think it’s more likely you’d try to server-render the React than keep the PHP stuff and React stuff in sync.

About 50% of the URL’s you click load instantly, like you’d expect in an SPA type of site. Looks like any of the links generated in that shell page that PHP renders do a refresh, and links that are rendered in React components load SPA style.

I would think this would be a really strong base to start with if you were interested in building a React-powered WordPress site. That’s certainly a thing these days. I just happened to be looking at the Human Made site, and they say they did just that for ustwo:

ustwo wanted to build a decoupled website with a WordPress backend and a React frontend. Human Made joined the development team to build the WordPress component, including custom post types and a custom REST API to deliver structured data for frontend display.

So ya know, people are paying for this kind of work these days.