Theming with the REST API – Meet Picard

4238708849_3a994eb881_b

If there’s one thing that has been making waves in the WordPress ecosystem this year, it is the new REST API. Officially known as WP-API, and currently available as a plugin, it is due to be rolled into core at some point this year.

A REST API?

A REST API may not initially seem like a useful feature for theme developers. It is clearly very useful for those looking to use WordPress as an application platform, but how the REST API can be used within a theme is perhaps more opaque.

The Theme Division at Automattic have had an eye on the potential uses of a REST API powering a theme for at least a couple of years now, and in recent months some concepts have started to take shape.

The Future is JavaScript

There are many potential benefits to building themes that rely more than ever before on JavaScript and the REST API, including but not limited to:

  • Design: We can have smooth transitions between the different types of content on our websites.
  • Speed: We can store content from the REST API in localStorage (effectively the browser’s memory). This means that on the initial site load we can store any post that is retrieved. Imagine a user clicking a ‘read more’ link and the full post being displayed without the need of a further server request.
  • Offline: By handling interactions with JavaScript, as developers we gain control of what happens if the user goes offline while browsing our site. We can let them know that the server doesn’t appear to be reachable and we can present content that we know is stored in their browser in a graceful way.

Picard Screenshot

Picard

In February of this year, the team worked together on a prototype REST API theme that has become known as Picard (a geeky nod to “the next generation” of themes). To create Picard, we used React, a JavaScript library for building user interfaces. Coupled with vanilla JavaScript and a number of other libraries sourced through npm, we were quickly able to produce an engaging, working prototype.

Recently, I have been talking about building themes with the REST API and our approach to building Picard at a number of WordCamps so far this year, culminating in a workshop at the inaugural LoopConf.

Today, Picard is now publicly available on GitHub.

Tango

We intend to continue developing Picard and working on some of the harder problems that we have not yet solved. We aren’t stopping at Picard either. Our experiments have led us in various directions. My colleague Kirk Wight has created another experimental theme called Tango. Tango is an extension of the concepts we are exploring with Picard, blended with the bulletproof Underscores starter theme.

Make It So

The future of WordPress theming may dramatically shift with the official adoption of the REST API but you don’t have to wait for the future to take advantage of it now. Clone Picard and Tango. Experiment and see what you can do. These are exciting times for themes!

Further Reading and Resources


 

Photo credit: JD Hancock/flickr

Author: Jack Lenox

Automattician, humanist, vegan, adventurer, journeyman

11 thoughts on “Theming with the REST API – Meet Picard”

  1. Great write up Jack, thank you!

    Quick question if I may. Picard imports 15 SASS files, will that have a negative impact on the speed, or it does not matter?

    Tango does that too, so I figure why not ask:)

    Emil

    1. Thanks Emil!

      The structure of the Sass is very much experimental and incomplete. However, to answer your question, regardless of the number of Sass files, they are compiled into one CSS file for production. So I don’t believe there is any inherent reason why performance would be affected.

  2. I agree that the possibilities here are exciting, but I have to admit that this direction has me worried about the future of WordPress themes. The features afforded by the combination of JavaScript and the REST API should be added to themes as an enhancement, and not as a replacement for traditional PHP templates. Do we really want themes that can be completely broken by a single JavaScript error?

  3. Very cool to see themes “officially” moving this direction. I’ve been experimenting with this concept in my spare time as well. However, it would seem much more productive to contribute what I’ve learned to Picard.

    Looking forward to diving in an playing around!

Comments are closed.