Allow us to introduce Mantle, a framework for building robust websites and applications using WordPress. Think of Mantle as a layer that sits between WordPress and your custom code, providing you all the benefits of the WordPress CMS with a developer experience similar to Laravel.
Recently it was our great privilege to unveil the new WordPress-based website for the Solomon R. Guggenheim Foundation and museum. It was a long and highly educational road to launch, and I want to provide a bit of a window into what happened behind the scenes.
Our work with Guggenheim began over two years ago with an initial consulting phase to help the organization think through the biggest picture technology issues they faced. The first question we tackled was, “is WordPress the right CMS for us?” Many of our clients are big media organizations, and the answer to this question for them is so obviously “yes” that they’ve often decided it well before we even speak to them. Non-profit organizations like Guggenheim tend to have novel or unusual information architectures, but the truth is that there’s very little in the way of novel information architecture on WordPress that Fieldmanager can’t handle.
We also spent a fair amount of time wondering whether it was a better use of resources to engage in a full-scale visual update to the site concurrently with migrating to WordPress, or to bolt the existing front-end assets onto WordPress and update it later. Our point here was that that would essentially involve two front-end build projects instead of one, so we decided to go for the full package at once.
The defining feature of this project, though, was the decision to build a single-page application experience using Angular. This called for a major departure from how we build traditional WordPress sites. Instead of building a library of partial templates laden with PHP loops and snippets, all the templates live within Angular components and are closely coupled to specific pieces of the site and their interactive behaviors. The components represent a reusable piece of front-end code (for example, the so-called “GuggenMenu” that follows you on the left side of your browser window in desktop width), or a set of behaviors and interactions with the WordPress REST API that support a specific type of content (such as exhibitions, artworks, or calendar events).
All the “smart” components that read data from the WordPress backend are consuming endpoints exposed by the WordPress REST API. We used custom post types and Fieldmanager to effectively define a schema for Guggenheim.org’s various data objects and wrote WP API bindings for all the fields. (Look for built-in REST API support in a forthcoming version of Fieldmanager, informed by what we learned here.)
Single-page architecture, though complex to build, offered us a number of opportunities to provide an excellent user experience. Since navigating from page to page just involves fetching some JSON objects via the REST API, intra-site page loads are very fast and involve much less visual disruption than web users are accustomed to on conventional websites. We were also able to do things like begin playing a Soundcloud audio clip triggered on a certain page, and continue playing it while the user navigates away, since a complete DOM refresh is never necessary.
If you’re familiar with the Guggenheim’s flagship museum in New York, you might know it features a new special exhibition every few months, while also maintaining a permanent collection. Like many museums, Guggenheim uses The Museum System to manage its permanent collection information, but it also offers information about artworks specific to a certain exhibition. The Angular-based artwork viewer we built supports both data sources (including a daily sync with TMS’s database) and showcases high-quality photography and historical information about the artwork.
Laura Kleger, Guggenheim’s Interactive Director, wrote a very informative post about the process from their end and about what a visual update to their site means to such a prominent arts organization. It’s definitely worth a read if you’re interested in the broader context of this project.
I also want to take this opportunity to offer my sincerest thanks to our tireless project team for Guggenheim: Noah Schoenholtz, Drew Machat, Orson Bradford, Zach Green, Michelle Bookless, Melanie Ferras, Andrew Short, Jackson Marketon, Ian Del Giudice, and Alexis Bellido. This project would definitely not have been possible without their hard work, ingenuity and good humor over the past several months.