In Collaboration With:

Theming with the WordPress REST API: A developer’s tale

Jack Lenox feels like he’s seen, “the good, the bad, and the ugly when it comes to JavaScript-based WordPress themes and the WordPress REST API.” This is his story.

Building WordPress themes with JavaScript is a popular topic right now, but it’s not that easy to do. Few have gone as deep into the subject as Jack Lenox, a developer at Automattic. In this talk, he tells a tale of some of the things you should consider when building WordPress themes with JavaScript.

You can follow Jack on Github, and follow along this presentation with his slides.

Jack has been thinking for several years about how WordPress themes are made, and whether the paradigm of how developers think about theming can shift. His talk at A Day of REST aims at sharing what he’s learned along the way.

“Using websites often sucks,” Jack begins, though he means that primarily in context to how native mobile applications tend to work. Page load times can be slow, internet connections can be poor, and the user experience is often not continuous. But JavaScript’s advancements in recent years are helping reduce the gap between the experience of using an app versus a website.

Single Page Applications

Single Page Applications only require one page load for the server, and then subsequent calls to grab and display data utilize Ajax, and only partially reload page data.

Over the years, Single Page Applications have presented challenges for websites that have had to be resolved. For instance, search engines long relied on a page load to identify content for indexing. Also, browser history is more difficult to maintain in a SPA, meaning the “back button” doesn’t work. And, Jack notes, the initial page load can take a lot longer depending on what all is included in the request to prepare for both the initial page load and other technologies the web page will need to enable the SPA functionality.

The introduction of tools such as HTML5, HTTP2, and Node.js however, are helping solve a lot of issues to improve Single Page Applications. That said, some new tools aren’t always available to website visitors, and furthermore some users don’t enable JavaScript at all; therefore SPA functionality is often utilized with the mindset of progressive enhancement. Jack noted the following Tweet from a pretty hilarious account:

Neverthless, SPAs are becoming more popular, and bring a lot of benefits to web pages, and Jack wanted to explore what it’s like developing a WordPress theme as a Single Page Page Application.

WordPress themes as a Single Page Application

When creating a WordPress theme as a Single Page Application, Jack walked through how one could solve each of the challenges for SPAs in general, applied to WordPress themes.

  • Search engine optimization
  • Browser history
  • Client / Server code partitioning
  • Analytics
  • Initial page load speed

Browser history and analytics

The History API — part of HTML5 — helps solve the problems associated with browser history as well as analytics. The API itself handles the browser history part, and Google Analytics has built in support for the API.

Templating

In order prevent having to utilize a specific Node.js server, Jack worked to see how he could integrate templating with JavaScript with the regular WordPress templating system.

If you use a templating language like Mustache or similar, then whether the template is requested in JavaScript or PHP, with the appropriate supporting code to render the templates in each, it will work.

Speed of initial load

Jack really starts to get crazy when he begins to talk about how you might be able to “borrow” information WordPress has ready to deliver based on the requested URL, and generate PHP from JavaScript.

Essentially, the website could be built in React, and then it generates the relevant theme files during the build process; and even if you turn off JavaScript, “it would carry on working.”

Jack realizes this is a strange and experimental processes, but that’s why this talk is titled, “a developer’s tale.”

One other thing that speeds up the page load is to not reload JavaScript on every page load. He proposes that the JavaScript be localized, allowing the developer to utilize a PHP variable in the delivered JavaScript. This information could deliver the post’s slug for routing purposes, and many other options.


Jack dug into a number of concepts in this talk, and you can follow along with his slides and click on various resources while you watch. Be sure to stick with it through the Q & A, because he answers a few really good audience questions.

He’s also worked on a tutorial over at Themeshaper on building a theme with JavaScript, recommends this series for learning about Redux.


The videos at A Day of REST were shot and edited by Rhys Alexander. The conference was organized by Human Made, and you can stay up to date with A Day of REST — which is going to Boston — and learn about other potential future events. There were eight great talks at A Day of REST, and you can read my review of the event as a whole, and look out for the next video to be posted here soon.