This article was originally published on this site

Welcome to Press This, the WordPress community podcast from WMR. Here host David Vogelpohl sits down with guests from around the community to talk about the biggest issues facing WordPress developers. The following is a transcription of the original recording.

David Vogelpohl: Hello everyone and welcome to Press This the WordPress community podcasts on WMR. This is your host, David Vogelpohl, I support the WordPress community through my role at WP Engine, and I love to bring the best of the community to you hear every week on press this as a reminder, you can find me on Twitter @wpdavidv, or you can subscribe to press this on iTunes, iHeartRadio, Spotify, or download the latest episodes at wmr.fm. In this episode we’re going to be talking about optimizing headless WordPress custom fields and API’s and joining us for this conversation is a prayer, boost and press this and often guests like to welcome back to press this, Mr. Anthony Burchell from WP Engine, Anthony, welcome back.

Anthony Burchell: Thanks for having me back.

DV: Glad to have you here. I feel like I’m in the middle of like one of our word around the campfire episode. Yeah, if you’re like, go to ones the guest is. So glad to have you back here and I know you’ve been pretty busy with WP Engine I want to talk a little bit about that here in the context of the show but just a reminder for those listening. Anthony Michelle is a headless as on the headless engineering team at WP Engine. And one of the things he works on is the Atlas content model where he was going to talk a little bit here, in addition to just generally headless custom fields and API’s and all that kind of stuff. It’s really glad to have you on the show here today to talk about it and then quite a few headless episodes over the years. Looking forward to revisit this here with Anthony. Anthony, I am sure I asked you this story on the show before, but maybe I, maybe I did it so we asked you know what is. Briefly tell me your WordPress origin story how’d you get started.

AB: Yeah, it was in, ’09, I was interning at an ad agency, and then after a few weeks they were like, well, you can do the work. So, we’ll hire you in and, and one day they were just like, hey, try this WordPress thing out, we have a feeling that this, this, this might be the replacement for all of our Drupal sites that we’re doing so, I was tasked with researching, and in 2009 is when I started researching WordPress I built a quick blog, I didn’t really even get into the code that was the interesting thing I was tasked with just installing a theme and kind of exploring the UI.

DV: Yeah, so this is uh, yeah, so this is a pretty exciting time in WordPress and a lot of ways right like custom post types and fields are not out yet so WordPress in my mind isn’t really a CMS back in 2009 and then, but that happens right thereafter. And that was right around the time that I also founded my WordPress agency and I remember having to decide, you know, what was their CMS of choice and CBTs had just come out and it was this big battle between in my work between Drupal and WordPress and WordPress one of the time that the reason it won is because all my leads kept asking me for WordPress sites and I was like, build a WordPress site I got more into it than that but it was I remember the customers ultimately being, you know what tipped the scales there and I feel like WordPress is bridge or even exceeded a lot of this gaps, if not all of them. Since then, but at the time that wasn’t true. Did you, did you experience that at all, or is this,

AB: my gosh, yes, yes, there was, it was such an interesting thing and that was that was ultimately why I was doing that research just because we were having that battle, where we had one developer is very very into Drupal very much knew that that ecosystem had built a reputation with it, and we were trying to tell him, hey now go learn WordPress which was taking steps back at the time in the case of like the custom post types and all of that. So, so yeah and I think it’s really interesting how we’re now in that same kind of battle where JavaScript developers are arguing when WordPress is not the right thing for this and that’s where this whole headless focus is, it’s really interesting because I think everyone is now having to do that same research somebody out there right now is the me of 2009 that’s been tasked with researching headless and building something, and, and yeah, it’s, it’s, it’s a different, it’s a different task now, it’s so much harder to develop like back then when I, my research task is just install a theme do the five minute install, no big deal. Now it’s it’s it’s much more difficult, but, and that’s sort of where my focus now with ACM with Atlas content modeler, is to kind of fix that and make that easy, so that people can create those post types of today, which is essentially just post types again.

DV: Yeah, before we get in like deep on ACM I want to get a little more context here for those listening. And so you can tell us about your WordPress or origin story back in 2009 and ad agencies. Check out this WordPress thing that’s really interesting what’s your headless WordPress org story. What was the first time he built something and head was very risky, and like, it can be like headless not JavaScript your headless with JavaScript doesn’t matter like what’s your what’s your origin story.

AB: Yeah, so my origin story is a really interesting one. So, the REST API was introduced in 4.7 So that was December of 2016 I looked that up before the show. And, and I dug deep through my own blog posts and I found that in 2017 is when I built a VR headless WordPress and I thought that was that one was probably my most interesting and I it hit me just before the show that actually there was a prior example that I did which was a chat app that was a, it took the comment system in on a page, and made it real time so that if somebody left a comment you actually saw that populate, but it was also populating the post, and that was using the REST API to do that so this sort of decoupled I guess it wasn’t truly headless but it was an app running within the page that was doing the headless things. So I think the VR one is the first one I would qualify for headless, and that one was just loading post data in a VR world and using the featured image as like a spherical panoramic that surrounds your body so that it looks like you’re in the place like was 360 photos

DV: you took that project is word Kim’s there, didn’t you, I definitely articles on tavern about that, it got some mileage out of that project. That word camp. I’m asking that question first for the audience I was at these events and it was fantastic to see the WordPress content, kind of, it within that VR environment I think that’s such an interesting point is like this notion of headless, of course, we often talk about the, the notion of like a content management system, and then a separate JavaScript essentially application that’s, you know, rendering and building out the site as you will. But this notion that a WordPress site might not have a header that is rendered in the normal WordPress way extends beyond just JavaScript applications I mean that’s absolutely true right we’ve talked about, yeah.

AB: Yeah and it expands beyond just like web pages right, our concept of what a web page is, is going to change in the coming years and everyone right now is the hot topic on my Twitter feed is the metaverse and my hot take on the metaverse is that it’s just a branding thing, like Facebook wants to obviously own that name. But what it really is is it’s just web pages it’s just URLs being hit and being served data and an application, interpreting that and putting it around you in my case of the VR.

DV: Yeah I think that’s a really interesting aspect, Anthony, do you know that I have the world’s only truly headless WordPress site with absolutely zero heads at all. So did you Photoshop the heck out of a bunch of stock photography oh I have a WordPress instance that runs version of pretty links it’s kind of like that plug in redirection. And it’s my own custom URL shortener, and there are zero rendered web pages in use at all. You know yeah you are using it like an app, all these all these poser headless people I have the world’s only true headless. Tell me what you need WP engine now and then in the past he talks about your community contributions but what are you working on to the engineering team.

AB: So we’re building the Atlas content modeler plugin, and, and what this plugin does is, it simplifies that step so I guess let me take a step back and sort of illustrate the process you go through building a headless app,

DV: you’re working on something called ACM and I know we’re gonna kind of like deep dive into that I kind of want to do that in the next section, but from the high level, you’re an engineering team and you’re working on this thing called Atlas content modeler, is a plugin is framework like give me, give me the sense of like what it is, what should I call it.

AB: So yeah, actually the one thing that I want people to know about it is that it is an open source plugin. It is a plugin that you install on your WordPress and it simplifies creating content models, which is essentially just post types a lot of people are trying to do that right now as you’re creating all of these post types, and, and it’s mainly render based the way they’re doing it today so we’re focused only on the content.

DV: Yeah and so that’s like a critical part of headless sites right external applications are consuming the data. And so your content modeling is critical for this. And so, I guess you were kind of mentioning though from the Atlas content modeler side it’s kind of in a headless first way and I know a lot of people have had like your own homegrown solutions or cobbling together other kind of posts, custom post type of field plugins, but not necessarily kind of purposely built for this way, which I think is really interesting and I played around with it a little and I’ve kind of had, you know, conversations with just you and I are I’ve got to see it where I think you know like to really take a deeper dive now on it really for myself and for our audience, but we’re gonna take a break and we’ll be right back.

DV: Everyone welcome back to the Press This the WordPress community podcast on WMR, we’re in the middle of our episode, optimizing headless WordPress with Anthony for shell of WP Engine Anthony right before the break, you were telling us a little bit about your role in education in engineering or are you working on this atlas content model or open source and free and freely distributed plugin, but I was hoping now after this first break, you could you could kind of break down a little bit more about what ECM does or maybe even like the problem it’s solving for.

AB: Yeah so, the problem that we’re solving is there is currently a gap between JavaScript developers who are used to creating their, their awesome react apps or other kind of interactive applications. That would be very hard to convince to go to WordPress and I think the reason that the we believe the reason that that it would be hard for them to go to WordPress is because then they have to learn WordPress, they have to learn how to create post types, they have to know that those post types need to be exposed in the REST API. They need to know that Graph QL is available, and then they need to know that they have to actually maintain their, their data to be served through Graph QL, so there’s so many things that you have to keep in mind when you’re building, just from scratch, now, now there are plugins out there that do this stuff and allow you to kind of check that things are in the REST API, things like that, but they’re often very render focused and layout focused, and by that when you say that. Yeah so, so imagine that you go to a web page and it pulls up and there’s there’s segmented data, like for instance there’s columns right. People really like columns because you’re putting things inside of these cells, but this is visual focus right like you’re when you’re, when you’re building that data model, it’s, it’s not a data model it’s it’s a, it’s HTML that you’re building in. And the thing that we’re the difference in our plug in is that we’re focused only on the data, because it’s not always layout based for look at my, my MDR world, those were some things can be abstract right like maybe the text color is a field that somebody defines. That’s not layout base so, so you kind of have to, to separate what you want to be rendered and what you want to be served to do other things in the app, and it gets confusing when you’re trying to manage that in a way that like you’re basically using the wrong tool and achieving the goal, right, when you could be, yeah,

DV: yeah, I gotcha, so that’s. So when you say render base you’re thinking of it from the page render perspective and how content is organized and divided, and from a headless perspective though you really want a much more kind of pure value based API approach where I’m calling a value and pulling the value and then doing something with the value either showing it somewhere performing an action or something like that is that the gist.

AB: Yeah and then the other thing that we make really easy is adding more fields, protecting them behind the user system. That’s another really big thing that’s really hard to do. And and what, what JavaScript developers are our challenge is our opportunity is to show that, that JavaScript developers can that are building other apps can inherit the user system of WordPress. And oftentimes, when you look at the core of what a CMS is it’s you’ve got to use your system you’ve got posts that are associated with those users and you’re essentially just building data models. So, showing them that they can use a user system, and also that user system with Atlas specifically I know I know I’ve said that this plugin can be used outside of Atlas but with Atlas specifically with headless framework plugin you can use that user system within your app very easily because we’ve got these components that you can utilize them. So it’s just an out of the box solution.

DV: Yes, you’re talking about two things there right you’re talking about like the Atlas headless hosting offering by WP Engine. And you’re also talking about the Atlas content model plugin, published by WP engine right yeah plugin is free and anyone can use it on any site. But if you’re using it in concert with the hosting side you’re saying you get to take advantage of this user assistance without a requirement, so that was

AB: exactly you could absolutely build your own React components to then log in or to get those authenticated responses from the REST API for Graph QL.

DV: So, you said something interesting, just a minute ago you were sent send something that can to like get to inherit all this, this benefits from WordPress like and like, it sounds like one of the benefits you’re not able to inherit is this kind of API first or headless oriented data modeling approach that ACM addresses right otherwise why would AZ and the existing would just be any wordpress. But then you look at like competitive CMS is I’m gonna use that with a Tildy on it for a second. In the headless university if you see things like Contentful which excels at content modeling, but it’s terrible at being a CMS. And I think that’s, you know, frankly one of WordPress, strengths and you see things that content will try to augment that by like whether you’re integrating with other things, provide more of a true CMS experience or giving you the content and data modeling to produce your own CMS or something in a framework, but like you view like the combination of what ACM is doing, and like the inherent strengths of WordPress is even a benefit over choosing something like Contentful.

AB: Absolutely and that’s why we’re so focused on it, like if, consider this. In the future I was talking about metal versus the user profiles may have a your avatar model attached to him right. But you have to wait for that feature to be added or you have to then go build it yourself in other systems, whereas the community is constantly building on top of WordPress and adding more features where that’s just gonna happen. Whatever, whatever direction the web goes WordPress is going to support it so you are constantly going towards the bleeding edge of the web by just using WordPress, I think that’s the biggest benefit and the plugin ecosystem right like you can still use plugins in, in tandem with, with a headless architecture, and by that I mean like Yoast, okay Yoast they’ve got great headless support so that you can do all of those SEO things on your web pages. But, you know, do it the headless way

DV: I like. It’s kind of funny, there’s always these WordPress is every press is gonna die so the acts are request killer and it never ends up being true WordPress keeps gobbling up market share. And, you know, and it’s funny because we see headless sites, a very small percentage of the overall web and just in general at this point right in terms of number of sites, but with WordPress as the back end I wonder like which share of that WordPress would have like kind of gobbled up the backend. But, like, I don’t know it’s just this, this really interesting aspect they feel of WordPress in terms of its flexibility and themes, things like adding the WordPress REST API and so on and so we’re kind of led to these moments where like these killers actually become integrations, in some cases I mean, there’s not all that. I feel like that flexibility is really what gives it its staying power something like headless I would not have imagined that the WordPress would like find a way to not only play nice, but even, maybe even provide more value over kind of generic content modelers like it.

AB: And when did you think to to compare is the publisher experience, right. I think that’s another thing that we talked a lot about it’s a public true experience and I know that sounds like hand wavy. What that really means is the people that are actually creating the content for your application, your site, whatever it is, because of all of that market share that WordPress has gobbled up, it’s a familiar interface for most people that are working in these departments. So if you’re now creating these data models that are in a familiar interface where you go create a new post or let’s say that you have like an employee directory, you create a new employee, everything is laid out there in a WordPress like way so that you’re creating content in the same way and it’s getting displayed on those those rich interactive experiences. So you’re empowering publishers now to create more interactive, more rich experiences.

DV: Yeah, it’s funny because, you know, I think, ultimately, this is what gives WordPress is strength is how comfortable it is with this content creators and not just familiarity. But, you know, tons and tons of years of actual working on it and like, obviously not built for the WordPress contacts, but I think like when I, when I hear the buzz around headless, I hear it from two places. I hear it from developers, and I hear it from people that care about speed and security and that’s it. But like if there’s this massive gap I still feel headless that’s holding him back. And that’s the gap that connects the content creator to what that developer makes. And like I feel like this notion of like well I’m going to give you a field for x piece of content, like in some cases is great like a directory that’s fantastic but like a landing page that’s terrible and so like I still feel like that’s an address in the headless sense and I think that’s a giant opportunity. I think it’s an opportunity personally that I think WordPress is playing a critical role in helping to build and you know I think like the merger of those two things like this notion that headless is a dead thing. I mean, shoot PHP was a dead thing to write, making websites and PHP was only a dead thing and editing those pages was also only a dead thing until someone made a CMS, and then we got the customizer. Exactly, and like, he started to have these more accessible modes of modifying and building, and I just don’t think that’s that’s there yet had was, and so, I think, you know, certainly we all watch the engineers like see what’s next. But I think it’s maybe not quite there yet, but it’s of course just getting going, and so there’s a tremendous amount of opportunity there I think for technology companies and people building with it, all kinds of other things, it’s definitely early days of another digital gold, gold rush in my mind, so it’s hard to talk about we’re gonna take one more break.

DV: Hello everyone welcome back to Press This WordPress community podcast on WMR. This is your host David Vogelpohl I’m nerding out with The Anthony Burchell about optimizing headless WordPress, Anthony right before the break we were talking about some of the kind of fundamental strength of WordPress and the headless contacts. I mean, I think we’re both shills for WordPress on some level by the grace of it like right tools for the right job. And I feel like WordPress is definitely in a strong position there when it can get back to Atlas content modeler though, you kind of talked about in the same kind of a, he kind of described it earlier folks kind of cobbling together solutions to kind of address this content modeling challenge and the headless WordPress sense, and like you know I guess one of the drawbacks is like I have to cobble together a bunch of stuff and figure out what to use and why and what are the consequences and things like that. Are there any other drawbacks of like the common headless WordPress stack.

AB: I think, well it depends on how you approach it. And one of the, one of the risks is is the plugin system could be seen as sort of a risk, right, like, if, if you are updating plugins and not knowing how they interact with your models, or your content, your existing content like that sort of stuff can stack up and it can be harder to keep the integrity of your data without having full control, but also I guess it’s true for an all in one solution, but at least you know that you can version out your changes on your site and not segment that’s. But as far as like drawbacks to the, the architecture yeah you do have to think a little more about what your what your content models are going to look like. But the great thing is that with ACM, particularly the UI is very straightforward. If you need a new model you click the New Model button, and then you’ve got a list of fields that you can add in that model and you can get them slugs, you can give them properties of like min and max if it’s a number like those sorts of things, and they don’t have to think about that stuff. And that’s the sort of stuff that, that, that we’d have to go out and develop on top of

DV: this built it feels like it’s like one difference right because again, some of these other tools I mean I know like WP Graph QL and we had Jason ball on the show a while back, obviously his purpose. Purpose Built for headless but like not a lot are like popular custom build plugins and stuff like that. It’s kind of like an ancillary afterthought.

AB: Yeah and also like we get a lot of requests for things like repeater fields right and repeater fields are basically just repeated data fields for multiple objects that you want to have assigned to a single entry single post. And a lot of times what they’re trying to do there is, is, is have some kind of relation between that post and other data, right, so if that other data that you were entering in these repeater fields existed as just other entries inside of their own content model. You have more interesting ways that you can interact with this data, or you can build, you want more interesting queries more efficient queries based on that, so that your application is then faster, so there’s just all kinds of things that you do have to think about, but you’re working within the constraints of what we’ve identified as the biggest needs like those, like a number field having a min and max for instance like that sort of thing. So you have the tools there it’s just a matter of getting creative with how you want to use it and a hackathon recently I made a trading card game simulator. And the thing I needed to think through with that as well okay my data model is a card, or my data object is a card, and I’m looking at this card and it has a cost of a certain amount it’s kind of power of a certain amount and it this is all just metadata. And so for my application, it was very easy to build that structure because I was like okay let me look at the card and put those, those numbers down. And then in the application, I can interpret those numbers and do logic based on those numbers, so that’s the way that that like the thought process should be it’s not so much well I need to look at this web page and it needs to render in this order. This is my header etc. It’s more, what is the experience of your application and work backwards from there what data do you need to achieve that experience and then you just kind of, it works itself out.

DV: I love it I love it. I think that’s also an awesome point to end on. I’m going to share a link for Atlas content modular in a second, that Anthony thank you so much for joining us today.

AB: Yeah, thank you for having me.

DV: So glad to have you I have you come back nerd out about headless again or something else. If you’d like to learn more about what Anthony is up to. You can check out the Atlas content modeler again, free and open source plugin, you can download it, I have a little URL here using the world’s only headless WordPress site. But if you visit wpengine.com/atlas you can access the Atlas content modeler. Thanks everyone for listening to press this the WordPress community podcast on WMR. Again, this has been your host, David Vogelpohl, I support the WordPress community through my role at WP Engine, and I love to bring the best of the community to you here on Press This.