DE{CODE}: An Atlas of Headless WordPress
Headless WordPress is the complete solution for headless WordPress development, with open source tooling for page templating, data fetching, content modeling, and more. What’s the current landscape of Headless WordPress?
Check out the video below to learn about exciting new tools available to headless WordPress developers that make crafting high-performance and secure websites faster and easier.
Session Slides
Full Text Transcript
KELLEN MACE: Hi, and welcome to this talk that we’re calling “An Atlas of Headless WordPress”. I’m Kellen Mace, and I’ll be joined by my colleague Ilona. The two of us are taking half of the presentation, and we’ll be going over a number of products that make up the Headless WordPress ecosystem.
So Headless WordPress, as you may know, is the name of WP Engine’s headless WordPress hosting platform. But it’s really a lot more than that. It includes a number of products and open source offerings that really make it as frictionless as possible to build sites with headless WordPress sites– build sites with headless WordPress– and also to deploy those.
I’m the manager of our developer relations team at WP Engine. So my job involves a lot of engagement with the community and trying to educate the community on building and deploying sites. And much of my work is focused on headless WordPress, specifically.
So I’m very much invested in this world of making it very, very easy to develop headless WordPress sites. Before we dive in to all of the offerings that I’m referring to that are part of the Headless WordPress ecosystem, I first want to make sure we have the foundational knowledge laid as far as how a traditional WordPress architecture differs from a headless WordPress one.
So traditionally, as you can see on this slide here, it is represented by this kind of workflow. So you can see that we have three different groups represented here. We have publishers, developers, and site visitors. So in traditional WordPress, the publisher in purple, they would do all their content authoring and editing and management inside of the WordPress admin, and all of their content would be then saved to WordPress.
The developer in blue, that person would do their coding in WordPress themes and plug-ins and that data would also live inside of the WordPress application. And then lastly our visitor in green, when that person visits the WordPress site, WordPress has a lot of jobs. It has to retrieve the data from the database and then use its theme API to template that out and ultimately deliver the site– the HTML site– that’s visible to the end user.
So WordPress serves all three of these groups. These days, though, it’s becoming increasingly popular to adopt a headless WordPress architecture. And that looks something like this, where our publisher down here in purple, they still do their content authoring and editing and measurement inside of WordPress. So that part really remains unchanged.
But the other two groups, their workflows are quite different here. So the developer in blue, instead of using WordPress’s theme API, they instead use JavaScript and quite often modern frameworks like React or Vue or Svelte to build out a front end, Node.js based JavaScript app.
And then the visitor in green, that’s the application that they actually visit in this JavaScript app. And then two, the Node.js frontend application and the WordPress backend, communicate to each other. So that’s what some of the green– the gray arrows here would represent.
So those two can send and receive data as needed. There are many guides out there, including on our own site, that developer relations runs on more about the difference between traditional and headless, and probably more importantly, why you might want to consider one versus the other.
So go check that out if you want to gain some more familiarity there. With this kind of groundwork laid, though, I want to dive into some of the Headless WordPress offerings that make building with the headless WordPress architecture even better. So what we’ll be covering today are these…
We’re framing Headless WordPress as the complete solution and like I said, really an ecosystem of different products to make building and deploying headless apps as easy as possible. So I’ll be covering the top row here. So Faust, WPGraphQL, and Headless WordPress Content Modeler.
And after that, I’ll hand things off to Ilona, and she’ll be covering Headless WordPress Search, Headless WordPress Blueprints, and then Headless WordPress For All. All right, so let’s dive in with Faust now. Faust is a really exciting project. This is the headless WordPress framework. So what we mean by that is, it’s a front end JavaScript framework, similar to ones you might have heard of, like Next.js or Gatsby or SvelteKit.
It’s kind of in the same vein as some of those single page app JavaScript frameworks, with one important distinction. Faust is specific to WordPress and it’s tailor made for building sites with a headless WordPress architecture. It’s built on top of Next.js, which is incredibly popular front end single page app framework.
So that is really good news, in my opinion. That means any and all of the hard work that goes into improving Next.js and any new features that Next launches, you get to inherit and also benefit from in your Faust.js app. Beyond that, Faust also has authentication and post previews built in, which is a huge head start, really, if you’re building headless WordPress sites.
If you build a traditional site, you kind of get these things for free. WordPress has its system of authentication and authorization in its capability system for knowing what users can do what on the site, and it can authenticate people and also allow people with certain capabilities to view post previews.
So that is view a preview of a post that is not yet published. It might be in a draft status, for example. Once you go to a headless WordPress architecture, though, you have to really reinvent these two things. Your front end app and your back end WordPress site have to be able to authenticate users and then provide post previews differently than WordPress has, historically.
And I’ve wired this up myself from scratch and it is quite a lot of work. So I really like the fact that with Faust, you get these things out of the box. You don’t have to write these from scratch for each new project, which is huge, in my view. Next, Faust.js feature I want to highlight is easy data fetching.
So this is another one that if you’re just starting with clean slate that’s running Gatsby or Next.js or SvelteKit or something, you’d have to wire this up from scratch. You’d have to figure out what GraphQL client am I going to use, and how am I going to wire that up so that it points to the appropriate WordPress back end and I can send and receive data.
And then once all that’s done, how do I actually do that? How do I compose my queries and fetch the data? So Faust has a lot of built in conveniences here as well. As soon as you create a new Faust project, data fetching is already set up for you. And it even comes with a number of react hooks that you can use to fetch common things in WordPress like posts, pages, categories, and tags.
There are really convenient react hooks that are pre-built and ready made for fetching those things so you can just start building out your pages right away, which is again a huge time saver as well. And the last one for Faust here is our version 1.0 release.
So I’m pleased to announce that in the near future here, we’ll be releasing version 1.0 of Faust. So that will be a version of Faust that has the stability that we’re comfortable with with calling it 1.0. And you could have even more confidence building new projects on Faust.js after that point.
So if all this seems enticing to you and you like– you like the idea of trying out some front end JavaScript framework that has a lot of the stuff built in for you– post previews, authentication, easy data fetching– I encourage you to do just that, to try it out. Here’s where to get it.
So you can go to github.com/wpengine/faustjs to check out the project and give it a– give it a whirl for yourself. That was it for Faust.js, our front end JavaScript framework. Next up, I’d love to talk about WPGraphQL. This is a plug-in that is really mind-boggling, if you think about it.
WordPress is the largest CMS in the world. Now it’s powering over 40% of the internet. And WPGraphQL is a free open source plug-in that is bringing the GraphQL technology to 40% of the web, for– to any WordPress site who wants to use this technology.
So I’m really pleased that that exists, and happy that WP Engine is funding the development now and fully supporting WPGraphQL. So let’s dive in and see some of the new exciting features that have come and will be coming soon to WPGraphQL.
One of those is the built in GraphQL IDE. So this has existed for a bit in WPGraphQL. For anybody not aware, I just want to highlight how powerful this is for the developer experience and for the workflows that it unlocks. So you can see here in the screenshot that I’ve composed a query called get post, and I’m passing in a few query variables.
So I’m saying the ID of the post I want to get is, what is headless WordPress? And then the ID type is a slug, right? Then I can hit the play icon in the upper left here to execute this query. And then on the right hand side, see what my front end JavaScript app would get back if it were to fire off this identical query.
So you see on the right hand side that I’m getting back for that post the database ID and then also the title. So this is huge for being able to compose your queries and then hit that play button to execute them and quickly see what your front end app would get back if it requested the same data.
And then once you have your query built up and it’s returning what you want, then you can make use of that in your front end js app. So really powerful. I’m really pleased about the developer experience that WPGraphQL provides with the GraphiQL IDE. Another feature that’s come to GraphQL is this one.
So you might have noticed this in the previous slide. I have my little avatar here that’s shown in the upper left of the GraphQL IDE. This allows you to fire off either authenticated or unauthenticated requests. And this is huge. So if I click this so that it is saturated with color– my avatar image is saturated there and I have the little green icon next to it– I know that I’m logged in as me and I’m firing off an authenticated request.
So any of the data I get back would be specific to the user capabilities that I have as the logged in user. Oftentimes, though, it’s helpful to test out what you would get back if you were to run a query as an unauthenticated user, right? So this means just a site visitor who lands on your site who is not authenticated.
If the query, you know, were to– were to run for that person to fetch some data, would they get all of it back, or is some of it gated or requires capabilities? So with a single click, you’re able to click on this avatar icon now and fire off the same query that you had composed as an unauthenticated user, just to confirm you’re getting back what you always expect.
That’s been a really cool recent addition to WPGraphQL. Further on the GraphQL IDE train here, next thing we’ll talk about is Query Composer. This is a very cool tool as well. And if you open up the Query Composer, it looks like what you see here in the screenshot where you can give your query a name, you can pass in query variables.
So you can see here I’m saying that passing an ID of what it says is WordPress, and the ID type is slug and then from there you can just check boxes for what data you would like back. And the GraphQL IDE is smart enough to be able to run an introspection query and know all of the data available in WordPress, and it shows everything here.
So it makes it really powerful to just click these boxes and compose your queries and then fire those off to test them out. So be sure to check that out as well. The Query Composer.
The next thing I’d love to talk to you about is the experimental Gutenberg blocks integration research that’s been going on. So Jason Ball, who is the creator and maintainer of WPGraphQL, he has this code base– WPGraphQL Block Editor– where he has experimented with being able to expose all of the data about Gutenberg blocks that WordPress provides so that you can query for all of the blocks that a given post or page has and then iterate through those and render different component in your front end JavaScript app depending on the type of block.
There are some caveats there. Not all data about blocks is exposed, at this point, by WordPress. But you can read more about that in the readme here. But we’re just really excited at WP Engine that strides are being made– progress is being made in this direction of being able to query for all of your blocks data with Gutenberg.
Next one I want to talk about is persisted queries. So this is huge. Right now, it’s possible to use WPGraphQL and then turn on an object caching solution, such as Redis or Memcached, to get your database queries cached in memory for some speed gains.
That’s already possible, and has been for a while. But one thing that the team internally is working on is persisted queries, which I’m very excited about. This would take that caching to the next level, where it would cache the results for common queries and return that immediately without ever loading up– without ever running a database query or even loading up WordPress.
Ahead of all of that, one of your caching layers would recognize that the query being run is still in the cache and it’s still valid and would return that immediately. So this would– this feature will make for very, very speedy queries. So very excited for that. The team’s working hard on that, and stay tuned for more info on when that will be available.
The other feature is the ability to save queries in GraphQL. Right now if you compose a query in GraphiQL, it’s really great to be able to quickly test things there. However, your queries don’t persist. If you like leave that page or delete it, you can’t get back to the query.
So the team is working on some very impressive features where you’ll be able to compose a query, give it a name, and then save it and you can kind of go back and forth between your collection of saved queries and make changes or re-save them to have kind of a catalog of all the queries that your site uses, which I think is very cool as well.
There’s also going to be some integrations between this feature and the persisted query one I talked about. So really exciting stuff there as well. I encourage you to try out WPGraphQL if you haven’t already and you can do so at wpgraphql.com. There’s all kinds of documentation there on how to use it, how to download it, and where to get started.
All right, last thing I want to talk to you about before handing it off is Headless WordPress Content Modeler. This is another tool that I’m really excited about. It allows you to create content models. If you’ve been in the WordPress space for a while, you probably know the term custom post types.
So WordPress comes out of the box with support for two post types, and that is post and page. But for many, many sites, it makes sense to register your own custom post types. So you can have the concept of a project or a team member or job. Something else like that. And then store data against that custom post type you’ve created.
Headless WordPress Content Modeler allows you to create custom post types, but really so much more and it calls those content models. So this screenshot shows one example. You can see that I’ve created two content models here. One of them is called locations and that has three custom fields associated with it.
The other is called providers, and that one has a number of custom fields as well. It also supports registering taxonomies. So once your content model– a.k.a. your custom post type– once that exists, if you want it to be able to add taxonomies to it, to be able to group together those posts, it allows you to easily do that.
And it has support for a number of custom fields. So you can see on the slide, we have text, rich text, number, date, and so on down the line. So you can create a content model, add taxonomies to it, and then add custom fields that that custom post type should have as well.
And ACM will add those in the WordPress admin so then anybody who is either creating or editing a post of that type, they’ll just see all of these options for custom fields and for taxonomies. And it’ll also expose all that data, which we’ll talk about in a moment.
One thing I want to highlight is it allows for efficient relationships as well. Quite often, you want to be able to relate– have either one to many, many to one, or many to many relationships between different posts in WordPress. My example here was I had health care providers and then I had locations, you know.
And health care providers might work at one or more locations, but it might be nice to query from the other direction as well, right? And say, if I have a specific location on a query in the other direction, they will tell me all the providers who practice here, right?
So for this kind of bidirectional relationship, I’m pleased to say that ACM supports that and it’s– the database is optimized for this kind of bidirectional querying like that, which is not the case for many other relationships solutions that are out there for WordPress.
So it looks something like this where you can register our new relationship field and just give it a name and an API identifier and then select the connection between the two models as well. So really, really powerful if you’re looking for the ability to create relationships in headless WordPress projects.
The last thing, which is probably the killer feature, I would say, of ACM is everything I just mentioned. All of it. The creating the content model, the taxonomies, adding all your custom fields, establishing relationships between them. As soon as you create all of those things in the WordPress admin, it’s all automatically in the WPGraphQL schema and is available immediately for you to start querying for from your decoupled front end JavaScript app.
So this is– this is huge. Many people in the past have cobbled together a number of plug-ins to provide these fields in the admin. But then also to expose it in WPGraphQL and Headless WordPress Content Modeler, amazingly, it is able to do both of those things. So I highly recommend checking it out if that sounds powerful to you.
One thing coming to ACM in the near future here is the email field, so stay tuned for updates on that one. The team also recently added support for repeatable fields. So this has been a feature request, and I’m really pleased to report that we now have support for repeater fields.
So you can specify a field and then say that it should be able to repeat one or more times, and the content creator can then make use of that repeating feature. All right. So if you’re interested in ACM and want to try it out, I would highly encourage you to do so.
That’s on the WordPress plugin directory, so you can go ahead and grab that at wordpress.org/plugins/atlascontentmodeler and try that out for yourself. So that’s it for my section. Thanks so much for listening, and now I will turn things over to Ilona to cover the rest of the products in the Headless WordPress ecosystem.
ILONA KEDRACKA: Thank you so much, Kellen. My name is Ilona Kendracka, and I am a product manager in Headless WordPress. And what a year it has been, both for Headless WordPress and for the entire world of headless WordPress. Around this time this year, Headless WordPress was first announced to the public.
And for us, it’s been a year full of learning, interviewing, experimenting, prototyping, and researching. And it’s the biggest joy for a product manager to be able to share with you the results of all the things that we’ve learned in the form of work product, in the form of new features to Headless WordPress. So let’s jump right in.
Let’s start with something that is very important for every major website on the internet. That is search. The ability to search for content is a crucial component, not only for e-commerce but also for other types of websites like corporate or media sites. Research has shown, in fact, that people who do search are far more valuable site visitors, whether they are looking for a specific product to buy or if they are looking for a specific article to read, they are valuable because they are coming to your site with intent.
And it has been shown, then, for an e-commerce site that their search can unlock about three times higher conversion rates. Therefore, search is a really valuable tool for the marketers. At the same time, to do search in WordPress is also a painful and troublesome task for various reasons.
WordPress search is pretty slow and it scales poorly. It’s also pretty limited in functionality. The limitations of core WordPress search can be solved using third party solution, but that means more configuration, more maintenance, more hassle, and of course, more money that has to be spent on a bespoke solution and third party components.
That’s why here in WP Engine, we’ve been working on a better, advanced, and flexible solution that delivers the most relevant results for the customers on WordPress. Building and delivering such a product to WP Engine customers is a high priority for us this year.
That’s why I’m excited to share that public beta for Headless WordPress Search, our new product for WordPress content search, is here for you to try it out. There are three main things that make Headless WordPress search a great tool for modern websites, and the first one is performance. Extremely important aspect for any major website.
With Headless WordPress Search, content is retrieved much more efficiently and faster than with traditional WordPress search solutions. By offloading the data processing and querying processes to Headless WordPress Search from WordPress, precious compute cycles on the expensive, hard to scale WordPress server are saved.
The next pillar is simplicity. It requires a lot of time, effort, and money to come up with a solution for WordPress search that is going to meet the performance and accuracy demands of modern websites. Maintaining all of the moving parts is pretty time consuming.
Headless WordPress Search is a singular, simple, and elegant solution that requires minimal configuration. Once it’s set up, it just works. And as a user, you can easily configure the content you want to be searchable. Headless WordPress Search is also neatly integrated with WordPress, enabling it to process your data in real time as it changes, ensuring that your search results are always going to be up to date.
So no need for using external vendors, no need to spend time and money on maintaining your own solution. Headless WordPress Search is your one stop shop for all things search. Last ones are relevance and accuracy. In good WordPress search, it’s missing some of the important features.
And the lack of them makes it not a good fit for modern websites. Things like full text search, being able to define search , relevance scoring are either hard to execute or nearly impossible to do with traditional WordPress search. So I’m happy to share that we managed to address many of these pain points in our new search solution.
In the Headless WordPress Search dashboard, by using a really simple and intuitive UI, you can specify what fields you want to search through. That not only includes the whole WordPress fields, but other search works also. Custom post types and unbalanced custom fields. And of course, our very own Headless WordPress Content Modeler out of the box.
You can specify for each of the selected fields and retrieve the most relevant results. You’re also able to do multiple terms search, as well as use Google-like search operators in your search queries. Headless WordPress Search works best with WordPress REST API and WPGraphQL, which gives you the flexibility and portability on the tools you want to use for your headless project.
So I’m really excited about this release, and we can’t wait to see what awesome projects you are going to build using our new solution.
Moving on to our next announcement. Entering the world of headless WordPress is exciting, but it can be pretty hard at first, for many different reasons. First of all, many aspects of the process of creating websites that are true for monolith WordPress are no longer true for headless.
We know that it takes time to wrap your head around different way of thinking about creating apps. For many of you, it’s also the first time of interacting with new tools and technologies, programming languages, and frameworks. Moving from monolithic to decoupled architecture is a huge change.
And it not only requires developers to learn and think about and understand all these different components, but also to spend time on configuration and linking them all together. And regardless of what new skill you are trying to learn, it’s usually much easier and way more fun if you can learn by doing.
So having to read tons of documentation before being able to play with something for the first time is pretty discouraging and can make you put your side project on a shelf for a very long time. And you might promise yourself that you’re going to come back to it one day, but the same may never happen and this is the feeling that I know way too well.
So to try something for the first time, to be able to jump right in and start a skill you’re really excited to acquire should not require hours of reading documentation, configuration, and pulling your hair out to figure out how to get your setup ready for something.
So for the past couple of months, we’ve been talking to numerous developers interested in learning Headless WordPress and observing their struggles and their needs. And we used all these lessons to build something that gives you an opportunity to get started quickly, to minimize the effort that is needed to be spent on the configuration, and of course to maximize fun and excitement coming from learning a brand new skill.
So the solution that we propose are Headless WordPress Blueprints. Headless WordPress Blueprints are a complete headless WordPress starter projects, available for you to clone, get your own projects started in minutes, see the power of headless WordPress in a real life scenario, and start playing with it and modifying it to your needs.
You can use them as a sandbox for your first headless projects, but you can also leverage them to get started quicker while building your own fully functional sites. There are four components that each blueprint is made of. First of all, during the process, a new WordPress environment is created for you.
This way, you can actually get started on a safe, isolated environment, play with it, and see how it works.
Then, all the necessary plugins are installed and activated on this WordPress install. So you don’t need to go through that list and install the plugins manually, search for them, and all that stuff. It’s all done for you behind the scenes so that you’re ready as soon as the application is up.
Aside from that, a note application is spun up for you. Each of the blueprints prepared by us is a complete, beautiful website that is designed for real life cases, and each of them is built using our Faust.js framework that was built specifically for making headless WordPress development easier and more enjoyable.
And whilst all these components are in place, all the necessary configuration behind– happens behind the scenes. So just in a few minutes, you can actually access a fully provisioned and configured headless WordPress site. So Headless WordPress Blueprints is the complete solution for headless WordPress, a solution that was built for all of you. A solution that just works and helps you to get started with minimal configuration and in a very short time.
Today, we are happy to give you three blueprints to try. A portfolio blueprint that is perfect for a company website, a blog blueprint– a WordPress classic which you can use for sharing your thoughts with the world– and a basic blueprint, which is a minimal scaffolding to help you get started quickly.
Each blueprint leverages all of our Headless WordPress products. So Faust.js, which is our framework for headless WordPress, Headless WordPress Content Modeler, which is our plugin that lets you to create custom data models, and Headless WordPress Search, our tool for highly performant and accurate search experience in WordPress.
So if you were actually curious to try out a search, using Headless WordPress Blueprints are the easiest way for you to get started. There are two ways you can try blueprints out. One way is to sign up for the sandbox account and follow the app creation flow in our portal. This way, you will actually end up with a whole set, fully provisioned website in just a few minutes.
If you’d rather prefer to spin up your application locally at first, you can head over to local, where you’ll be able to create your new headless WordPress site using one of the three blueprints that we provide. Blueprints are available for anyone. So Headless WordPress sandbox users, Headless WordPress paid customers, and users of local as well.
So if you had it in your mind to try headless WordPress out but had trouble finding time in your busy schedule to work on your own project, Headless WordPress Blueprints are for you. So go and check them out.
On that note, and to wrap things up, we have one more important and exciting announcement. Our mission is to power your creativity by building and giving you an access to a great platform for headless WordPress. We believe that everyone that is eager to create amazing experiences for visitors of their websites, or the websites of their clients, should have the opportunity to do so.
That’s why, from now on, four new Headless WordPress SMB plans are available for you to purchase. Up until now, Headless WordPress has been only available for enterprise projects. However, we want to bring the performance and security of Headless WordPress to every size project to unlock your creativity.
That means that initial plans you get a WordPress install optimized for headless, a node server that can build any JavaScript framework of your choice like Next or Gatsby, a high powered CDN to distribute your project all around the world, our open source tools like Headless WordPress Content Modeler, WPGraphQL, Faust.js and more.
And all of this from one partner, on one platform, for one price. So everything I was talking about today– Headless WordPress Search, Headless WordPress Blueprints, and Headless WordPress plans for SMBs– are actually available for you right now. So to try them out, go ahead and visit wpengine.com/atlas to sign up for a sandbox account, or purchase a plan.
As a member of the Headless WordPress product team, I’m really excited about all the announcements that we shared with you today, and I just can’t wait to see all the great things that you are going to build on our platform. Headless WordPress is created for you, inspired by you, and it’s you, the users of Headless WordPress, that inspire us and all of our users, features, and products.
So I hope that you enjoyed today’s presentation. Thank you all so much for your attention. Stay tuned for the upcoming demos and sessions, and see you all in the product.
