The Legend Of The Headless Website with the WebDevStudios Team

It’s a haunting but educational tale with Brad Williams, Lisa Sabin-Wilson, Greg Rickaby, and Amor Kumar as they join host Cory Miller to talk about headless WordPress.

Topics:

• What is a Headless WordPress Website?
• Considerations when deciding if Headless is a good approach for you.
• Learn how a Headless approach can be faster, more secure, and more scalable.
• Supporting advanced functionality like contact forms and user input.
• Recommended tools, hosting providers, and partners.

Every week Post Status Live will brief you on important WordPress news — in about 15 minutes or less! Learn what’s new in WordPress in a flash. ⚡

You can listen to past episodes of Post Status Live, browse all our podcasts, and don’t forget to subscribe on Spotify, Amazon Music, Google Podcasts, iTunes, Castro, YouTube, Stitcher, Player.fm, Pocket Casts, Simplecast, or by RSS. 🎧

🔗 Mentioned in the show:

• WebDevStudios
• Next.js WordPress Starter
• WP Engine Atlas
• WP VIP
• Frontity
• Beach Body On Demand
• Legend of the Headless WordPress Presentation
• Embracing Headless WordPress with Greg Rickaby
• Post Status (Twitter)
• Cory Miller (Twitter)

🙏 Transcript Sponsor: WP Engine

WP Engine is a leader in Managed WordPress hosting. They’re also a new breed of technology company at the intersection of innovation and service. WP Engine provides the solutions you need to create great WordPress sites and apps to drive your business forward — and faster. WP Engine’s new Atlas platform is fully headless WordPress with support for multiple server-side environments, auto-deployments from GitHub branches, both static and dynamic headless architectures, your choice of JavaScript frameworks — React, Angular, Vue.js, or any other — and command-line that is 100% scriptable.

Transcript

to take it away? 

Cory Miller: Hey, real quick. Can I just say thank you to my awesome friends who always show up enforced to with great learning, which you’re going to talk about today, but also entertainment. Who loves to learn and be entertained?

And I want everybody to take a quick vote in the chat of the painless today who wins. For best costume, then we’ll do second. You guys can put in your please for that, but more as the front end developer dressed as a backend developer, I think is one of my favorites. But seriously, while you all vote.

I want to say thank you to web studios. Brad and Lisa. I count as some of my dearest friends in the world both been in, in my home here where I’m helping a sick kiddo today but always willing to. Invest in the community. And so this presentation today was a [00:02:00] conversation, Brad and I started, I think a couple months ago.

And of course, if Brad, he wants to a theme, everything is Halloween and I totally support that. And so he was like, what if we do a headless webinar on Helmy notes? It’s heck yes, that’s on brand plus. It’s awesome. So thank you all. And I’m going to put the. The Twitter ID for city to, so you can go online and thank them for this webinar today.

And you can also say I’ve voted for Brad or I’ve voted for Lilesa or more Greg, but so I’ll do that in just a second. And then, oh, by the way, before I turn it over to. And Brad and team, I want to say special, thanks to WP engine. They reached out about trying to sponsor the event and which is awesome.

Cause I know they care about it. They’re going to be able to provide some transcriptions for today and some special content in the future around all this as, WP engine or the makers of Atlas. And I think. My understanding is red and team is going to mention that at some point along the way today because they they’re building some awesome stuff over there.

So I just wanted to say a quick thanks [00:03:00] WP engine, but also I’m going to put the tweets now in the chat and say, go say awesome team at WebDevStudios. Thank you for today’s webinar. Okay. I’m gonna turn it over to you. Awesome folks. Thank you so much for all of this, and can’t wait to learn. 

Greg Rickaby: Thank you for that intro Corey, we’re excited to dive in today and talk about the legend of the headless website.

And I’m not going to talk like that the whole time, because that would probably be tough to follow, but we have a fun presentation, like Corey said, not only. Pack with a lot of good information, but we want to have some fun presenting it so that we can all stay engaged and and really get this information across.

We’re looking forward to any questions you might have. So please drop those in the chat. We’ll be happy to answer those, and this will be recorded so you can always share it or rewatch it if you have to drop or anything like that. So with that, let’s dive in, what are we talking about? Today, we are talking about headless WordPress.

So of course we need to start with what is a headless website? What does headless WordPress [00:04:00] mean? You’ve probably heard the term if you’re familiar with it maybe not, but it’s certainly a buzzing around a lot of headless discussions out there. We’re going to talk about the type of websites industries, verticals that might benefit from a headless type of woods website or decoupled infrastructure.

We’re going to talk about some of the challenges, the spooky side of headless and things you might want to look into or some things that might be of concern. And of course, we’re going to talk about the benefits of headless the pros and cons and why some people some of the real wins that you can get from implementing a headless solution.

We’re gonna dig into some of the technology. Around a headless approach and some things to consider some different frameworks, maybe some platforms as poor you mentioned. And then of course, we’ll get into some recommendations of some of the headless hosting providers that we generally work with. And a lot of our clients use many.

You probably will be familiar with that. We’ll show off a few real world examples to look at some other companies and publications that are doing headless WordPress and interestingly. So today we have, as you can see, I’m [00:05:00] Brad Williams, CEO co-founder of web dev studios, along with my business partner, Lisa Sabin, freaking Wilson over there, or I should say Beetlejuice juice Wilson over there.

We also have our. Headless invisible man, Greg, our director of engineering and of course, a more Kumar. Who’s one of our headless front end specialists. And today he’s dressed up like a backend specialist. If you can’t tell them, make sure to call that up, but we’re looking forward to sharing some knowledge and information with you today.

So let’s dive in 

Lisa Sabin-Wilson: what is a headless WordPress website in order to understand what a headless WordPress website is? It helps to first understand the traditional way. Powered by WordPress. And what it’s designed to do, the traditional approach has everybody here probably. Puts all the candy in one big bucket, if you’d like my trick or treat reference there.

So all the candy includes all of the content data, which is your posts, pages, categories, menus [00:06:00] all of your media files, images, audio, video documents, and all of the tech, all of the code, HTML, CSS, JavaScript PHP, all the code graphics front end and backend development is all in. Bucket served by WordPress on a hosting server displayed on your website 

Greg Rickaby: candy.

Lisa Sabin-Wilson: These days, enterprise companies and most companies are developing websites, mobile sites, apps, digital displays, and even emerging web three applications on the blockchain with blockchain apps and platforms. As digital platforms have evolved the need for more flexible solutions have emerged for some people.

The answer clearly is decapitation. As Greg is illustrating over there, removing the head. What does it mean to decapitate a website? Headless worms, [00:07:00] WordPress website is where the presentation layer is the. And the presentation layer is your, what you’re viewing on the website itself. So graphics, HTML, CSS, JavaScript, all of the things that make a website, what it is when visitors come to interact with your website.

So when that layer, which is considered the head is separated from the content repository, which is considered the body. You have a headless website. Content repository is your standard WordPress installation with all of the content to the database, which is storing your content. And it’s completely separated from the front end of the website in order to do that we’re going to be going through some of the tech and some of the Things that you can do to make this happen.

But once you do that, it allows you to do things like serve content from multiple channels and platforms because the head is [00:08:00] separated from the back or the front end is separated from the back end. WordPress then can display content from, or not WordPress, but your website can display content from any location.

And it can take many forms like a website or a mobile app or any other digital devices. It’s a classic sort of content reuse scenario where content can be packaged and reused in different areas of the website, but it’s coming from different locations. Maybe it’s coming from WordPress or it’s coming from HubSpot.

Maybe the content is coming from Shopify. All of those things are served up via an API. So the content that lives in the box. Is delivered to the head of the website via an API for seamless display across different front ends. So again, the content is part of the body of the website. So that’s the CMS, WordPress, and it’s [00:09:00] delivered to the head, which is your presentation layer, the website itself via.

An API and WordPress offers the rest API that allows you to deliver that content from the body to the head. And this is referred to as headless because the presentation layer, the head is separated from the content. The body, which Greg I’d love that you’re illustrating this whole point for me over there in your video with his head dancing around, that would be the presentation layer by the way, dancing around in Greg’s video.

So who would use a headless website who on earth would decapitate their website? Here’s a few use case examples. News and media organizations can utilize headless to accelerate the speed of content curation and publish breaking news on the spot with breaking [00:10:00] next speed. And I think Brad, don’t, you have an example of something that we’ve recently done in the news media organization industry.

Greg Rickaby: We’ll definitely talk about that here in a little bit. Yup. 

Lisa Sabin-Wilson: Cool. E-commerce is another one where Shopify could handle the commerce part and while the headless WordPress powers, the content portion of it, entertainment verticals can build a platform for artists to help promote music, art books. And all of that data can come from not only WordPress, but it can come from multiple different channels fed into the presentation layer of the website via an API.

And then also emerging blockchain platforms, web three development. Examples would be like integrating with an NFT marketplace. If you’re familiar with non fungible tokens like open, see or wearable and let the react. Next [00:11:00] JS handle the smart contract NRH interactions on the front end while a headless WordPress handles the content on the backend.

So those are some examples of use cases. I’m going to hand this over to my headless director of engineering. No challenges of headless WordPress. Yeah. 

Brad Williams: Appreciate it. No nothing comes for free. So we’re going to talk about the spooky side of having a headless WordPress website. The first is you’ve traditionally had one stack, one host, one invoice, and now you’ve got two, one stack, hosting the backend WordPress and then the front end stack which would be the JAMstack.

So you could potentially have two separate stacks and two sets of invoices, which is spooky. By the way, if you didn’t know, JAMstack stands for JavaScript, API and markup, and it was going by Mathis [00:12:00] Billman the CEO of Netlify back in 2015. Here’s another spooky thing about headless WordPress. We’ve got two stacks now and both of them have dependencies.

WordPress of course has plugins. And the JAMstack front end probably has NPM packages. And keeping those up to date for security reasons and to get new features is really important. However, these updates need to be carefully tested. This takes a lot of time upgrading a WordPress plugin may break an integration on the front end unexpectedly.

So you need to have a plan for keeping two stacks up to date. When you decouple WordPress, you’re essentially moving it out of the WordPress bubble. And what I mean by that is. One of the things that WordPress is really famous for is like endless backwards compatibility. You lose some of that. When you go headless, you’re essentially taking the front end out of WordPress, all those familiar things like themes and plugins.

And you’re moving that stack to something that you’re going to have to manage, or a team of [00:13:00] engineers is going to have to manage. So you’re going to need some more support, speaking of themes and stuff, good-bye plug and play these things no longer work out of the box. Customizer previewing content, comments, even SEO, all of that needs ongoing engineering support to hook up on the front end.

Not saying you can’t do it. It’s just not something that comes out of the box or as plug and play. As we know it today with WordPress things like themes and templates, you can’t just open up the WordPress dashboard, go into the theme dashboard and click, add new and preview it and play around with it to see if you like it.

You lose that bit. ’cause you’re going to have, you have a separate front end that you’ve designed separately and you have engineers working on finally formatting challenges. So when you decouple the front end or go headless your front end has all the CSS. It has the styles for maybe you’re doing bird blocks or a page builder or whatever.

How do you get those styles back into WordPress? [00:14:00] So when you’re editing in the block editor, you might have just a native Gutenberg experience without all the bells and whistles that you’re used to seeing with the new block editor and Gutenberg WordPress page builders. No longer can you just drag and drop a logo into the header or add a new widget to the header or to the footer, all of that stuff.

That’s currently available to you through WordPress and page builders, and even. That goes away unless you have an engineer hooking it up on the front end, this kind of ties back to the plugin plates stuff. But it’s something to think about if you currently run on a WordPress page bill, 

Greg Rickaby: and now that we’re going to proper land, now that we’ve properly scared everybody, we’re going to wrap it up.

So have a good rest of you. 

Lisa Sabin-Wilson: That’s the whole presentation, right? That’s, 

Greg Rickaby: everybody’s laughing, right? That’s the fun part about webinars. I’m gonna assume everybody’s laughing at that stupid joke, but all right. We talked about the considerations on the challenges with headless and things.

You need to think about the spooky set, but let’s talk about the benefits. So clearly there are some massive benefits to headless or else [00:15:00] people would not be really diving into it. So one of the biggest benefits that That we’ve seen, especially with our clients is around multi-channel support.

So what does that actually mean? It means a couple different things, but the crux of it is essentially multi-channel support means when they, when you publish something in WordPress and a headless set up that data that content can push to many different places through an API. So traditionally when you publish something it’s just displays right on your front end, it’s directly connected to WordPress. It shows up exactly as you write. Now when we publish something, yes, it could still show up on the front end in the headless environment like you would expect. You could also show up and your iOS and Android apps, it could go and post a medium.com. It could pull that data into a intranet, SharePoint service.

It could post a public facing SAS website, written an angler, and it could even go into your PR proprietary in-house framework and it can all display and look completely different and make sure that works and looks how those platforms needed to look and work. So publish. Post many different places is a massive benefit.

It [00:16:00] also means again with the front end being headless or removed that multiple data sources can be pushing content into that headless front end. What is really powerful about this is it allows complex or complex systems and organizations rather than just flip a switch when they need to sunset a proprietary system or maybe an older system, they can actually have a much longer rollout.

We have a client, a very large media. The organization that has a massive newsroom of writers to end to flip from one platform over to WordPress and a single day is nearly impossible. So it actually allowed us to do over a four month rollout while the old system was slowly being sunset. The WordPress system was solely being used more and more.

Both systems are still pushing into that headless front end. And overall over the course of four months, they were able to do a nice, smooth transition to where all of their articles are coming out of WordPress and they can officially retire. The road system. So it makes it way easier to roll out these more complex systems for larger [00:17:00] organizations than it has in the past one component that we found also is training.

A lot of people don’t think about is the training aspect of it. If you have a lot of writers and you’re changing to a brand new system, There’s a significant amount of time. That’s going to have to be spent training and getting comfortable with that new system. Again, another way you can sunset into a newer oh an older system.

So you can work with the newer system without just flipping the switch on a Friday or a Monday. So multi-channel support is a massive win for headless. And of course just content, right? Content is the most important thing. When it comes to, we talk about WordPress, talk about the web content is king.

So again, having a more headless infrastructure is going to really get back to the idea of content. First, when your writers, your authors your editors are writing content and WordPress, they can focus on the content. They don’t need to focus. Anything else, focus on filling out what is there for them, focus on adding the media and the images and the system.

It will set up if assuming it’s all configured, correct. We’ll do what it needs to do. Content will show up or it needs to show up. It will look the [00:18:00] way it needs to look up, but it really removes some of the complexities that many of the writers face when they are really trying to figure out, okay, how is this going to look, let me preview it.

Let me go over here and see how it looks good here, but is it gonna look good on our mobile app or on a responsive site? A lot of these challenges that can really distract from what the core of what the writers are doing, which is writing amazing. Next up is around just a kind of extension of that, but it can really speed up the editorial process, right?

So again, not having these hurdles to jump through, they can get back to focusing on that and just cleaning up the implementation. If WordPress is purely storing content it’s going back to the roots of what WordPress is a content management system, all that other stuff can go away. It can just be focused on WordPress and writing amazing content, a nice clean implementation.

That’s going to really scale up your editorial. And of course performance. This is a massive one. And generally the reason why a lot of people get interested in the idea of headless as the performance wins. So imagine, and the traditional setup for WordPress, you got your back and you got your front end.

It’s all one big bucket of candy. As Lisa [00:19:00] showed us earlier. The problem is scalability with that, as your website grows, the performance of your server, the performance of your setup and your infrastructure also needs to grow. I’m sure many of us have had problems where a website gets a rush of traffic, maybe unexpected or expected and starts to have problems, maybe caching layer issues.

Maybe the database is just getting too hard on every page load. By. Decoupling and having a headless website the database side of it, the back end is just focusing on the content, right? The front end is all about being as performant as possible and displaying that content no longer do we have to hit databases every time we’re loading a page, so the performance implications and improvements around the headless is generally the number one reason. People really get interested and excited about headless massive winds. You could even have that, that, that backend hosted. You don’t even have to have it sitting on the same server and generally it’s not going to be on the same server.

Your front end could be on a highly optimized CDN that is there just to serve up the content as quickly as possible, maybe in different locales all over the world or different countries. [00:20:00] So again, that be coupled state is is massively important. And of course work with modern technologies. The Moore’s going to dig into this a little bit more, but one of the exciting things in the web, or all of the amazing kind of modern web technologies and frameworks that are available, this really goes back to your goals.

What is the goal of what you’re looking to build? What type of system you might want to use, but react next, JSU, Gatsby there’s many others. The more is going to touch on. And even more that you can dig into this. Pretty mind boggling, how many, JavaScript focused frameworks are out there now, but there’s a lot of great options.

And of course finally is just around security. Our IP hacked accounts, our IP exploits. It doesn’t mean they’re fully impossible, but the idea of somebody coming to your front end and somehow hacking into the backend of the website where they can do some significant damage is extremely unlikely.

Again your backend is completely separate. It could be hosted completely different behind a different domain. It could be high. The behind VPNs and SSO and two factor off log-ins it could even be hosted locally where you just literally turn it on when you want to publish something and [00:21:00] turn it off when you’re done.

And your public website is humming along just as it is. So it doesn’t mean it’s impossible at a, but it greatly reduces the risk of security issues with your website. Now I’ll hand it over to Omar. Who’s now dig into some of the headlines. 

Amor Kumar: Yeah, thanks, Brad. Now let’s talk about some of the headless technologies that are possible to use.

Okay. No two projects are the same tools that are perfect for one project might not work well for another. Also your team might be more skilled with specific tools, technologies, and frameworks. Headless WordPress gives you the flexibility to choose the right tools for the right. When you decouple WordPress from the front end of your website, you open up tons of possibilities for all these different ways to present your data.

Your editors still get a familiar editing experience entering all of the content into the WordPress admin interface. But now your developers get arrest API to query for. Allowing them to use modern web technologies. Since everything is accessible through an API layer, your data can be [00:22:00] served to iOS apps, Android apps, learning management systems, or a front end web application framework.

Like next JS possibilities are really endless. These are examples of different headless front ends that you can use. Say your team likes react. They can use our very own next Jess WordPress started that we created, they could use next JS itself. They could use guests. Automatic sprint duty or fast JS, which is a WP engine Atlas product.

If your engineers like view, they have, they can use view, press Grissom or next say they like spelt there’s elder JS and snapper JS. And there’s also Jekyll and Hugo and tons more, a big advantage of using JavaScript frameworks. Like react is the ability to build your website using.

Components are awesome because they help us build consistent testable and maintainable sites quickly components help avoid code duplication, and they can also be developed in isolation. You get tons of advantages for using components. [00:23:00] So now let’s talk about some of the things we use at WebDev studios.

We develop our headless websites using atomic design methodologies, atomic design takes components and gives them a bit more strict. Everything is broken down into the smallest possible elements. Development begins on Adams and moves up from there. Components are great because there’s a built-in roadmap for easier project planning atomic design leads to more robust applications.

So the built-in roadmap is you start on the Adams, you combine the atoms into molecules, you combine those molecules into organisms, and then you use those organisms on templates and pages. To explain this a little further. This is an example from the atomic design website. This is the older Instagram app, but they’ve updated their design since then, but it’s this, the app broken down into atoms molecules and organisms.

So on the left there, you can see the atoms are the [00:24:00] individual components like buttons, icons the avatars, the actual image for the post. And then we’re using those atoms. We’re putting them together to build molecules, which is the post header at the top there, the post image, the action bar, where you can like, and comment the amount of likes and then the comments.

And then you compose those molecules into organisms. And the organism is the post itself with all of those things together. And then you use those organisms and templates and that’s a template of a post. And then you use those. And then the last one is the actual post on the page. And if you scroll down from there, you’ll see multiple of the same post.

And that just fills in all the data with the actual avatar, the actual image and the real numbers of the likes and things like that. Storybook is a tool that we use. Storybook helps you develop document and test your company. Storybook PR also provides a [00:25:00] sandbox for you to develop your components in isolation from the front end, instead of waiting until a whole page is built before doing QA storybook allows you to QA.

As you go testing each component extensively, including all of the props of each component and all the different states in one place, a storybook also allows you to write developer documentation around alongside your current. So this is an example of how we use stories in our headless WordPress starter on the left there, you can see that this is a button components folder.

The button component is the button dot JS. It has some CSS and button module CSS. And then the story is the button dot stories dot MDX is a markdown mixed with react code. And it allows you to import your components into this markdown file and then write mark down for your documentation but also display your components alongside it.

So at the top there, you can see. We’re describing the button. So it says, use [00:26:00] this component to display a button, use it anywhere where you would use a link or a button element. And then we’re importing the button into that story over there. And that is the button story. And then at the bottom, there’s another story for sizes and it shows how to use different button sizes and it shows the size prop.

And if you pass it small, medium, large, or extra large, it’ll render the button in those different states to show how. This is an example of what that renders as this is the canvas and the canvas is where you develop the button in isolation from the rest of your app. You’re just focusing on the button only at the bottom there.

It shows the different props that the button takes. It’s really small, but under sizes you can see the, it shows medium, large and slim. And this is an example from Shopify as Polaris design system, storybook gives you tools at the top that you can use like accessibility. It also helps [00:27:00] you develop it helps you choose different screen sizes to see how it renders on those different screen sizes.

And there’s also a knobs to test different uses. This is an example of the knob would be the button text. So it allows you to go in there and edit the button, text live and see what happens if the text gets too long. Do you want the text to wrap or not rapper, whatever. And this is an example of how the markdown from the story renders.

It just shows the different use cases there laid out nicely in the sidebar. You can navigate to a specific use case at the top. There is the primary button, and then we have the danger, but. And then the slim button and each different use case renders does its own story. And you can actually go in there and copy the code for a specific button and then paste it into a component that you’re making.

We also use tailwind CSS and our headless starter a tailwind is great because it forces developers to stay within the constraints of a design system. It’s a utility framework built [00:28:00] specifically with components in. Everyone on this team shares the same constraints that come from the tailwind config file and it overall makes the project more consistent because you’re choosing specific values instead of arbitrary CSS values.

This is an example from Tillman’s homepage of how you would use tailwind. It looks a little scary if you’re not used to tell wind or if you’ve never seen this before. But really it provides a lot of structure to your current. For example, you can see P eight and that means padding on all sides of eight and eight corresponds to a specific value that’s defined in the tailwind config.

And this just makes it so that let’s say it means eight pixels. This means that another developer can’t come in and say for example, eight nine pixels, because that would cause some inconsistency. Also if you’re a designer works with the same constraints that are in the tailwind config and the developers use those, you pretty much get a pixel perfect app without even really trying.[00:29:00] 

If there’s alignment with design and development, finally, we also use next JS starter. It’s our headless framework of choice. Next is great because it comes with tools that make developing headless sites. It has a built-in router so that you can create pages with static or dynamic routes to show your posts and CPTs.

It comes to tools to fetch data from the WordPress rest API or any API. It also comes with optimizations for images, fonts, and scripts. It’s all built in. And finally you can easily deploy next JS sites to versatile. This is just a quote from our read me of our next gen starter. We figured out all of the hard stuff and place the sum of our knowledge into something that both the community and our future projects could use as a jumping off point.

If you want to check out our starter, Brad posted a link in the chat Brad, I think you send that to host and panelists. It’ll be there for everyone in a second and yeah, you can go check it out. Now pass it off to Lisa for headless hosting options. 

Lisa Sabin-Wilson: Thank you. I’m [00:30:00] more. That was really great going through all of that technology.

Sometimes I think that is half the battle of understanding new and exciting cutting edge use cases for WordPress. Like this is just really understanding the tech and how to put it all together. There are some hosting implications for hosting headless WordPress. It’s not, your typical hosting environment that you’re used to.

So usual my SQL database with your normal file system, but you need a hosting environment that can host the jobs skirt and the front end layer. So we use Versal. You can find posting options there for your headless environment. We also recommend netlify.com. Of course, Amazon web services, aws.amazon.com.

WP engine has a new headless platform called Atlas. You can find [00:31:00] information@wpengine.com slash Atlas and WordPress. VIP also has headless hosting options@wpvip.com. So those are some areas where you’re able to find hosting options. If you are interested in implementing and executing on a headless website, and I want to end excuse me, I want to end this webinar with some real world examples.

Some websites out there that you can check out. One of the things that we like to do when we talk to our clients. Headless WordPress is we give them some real world examples of sites that are out there and ask them to do things like test, page, feed, test performance, using Google development tools, things like that because the significant performance and speed on these headless WordPress websites tends to be its biggest selling point.

So one of the more popular well-known websites that a lot of us on this call already know about [00:32:00] is tech crunch@techcrunch.com. It’s one of the biggest technology blogs, and most people know that it is hosted by on are built on WordPress, but it is hosted on WordPress, VIP and uses headless technical.

Front of the front of d.org is a framework using WordPress with the react JS front-end and their website is also headless using and eating their own dog food. And then Beachbody on demand. Beachbody on demand.com is a headless WordPress site. They used headless to streamline the. And the content management automate things like handling assets, images, videos, they have a huge video library and decoupling WordPress really allows them to connect it with many different endpoints so that they can get data from a bunch of different content servers and in custom formats.

So that is the end of our [00:33:00] webinar. So headless WordPress is not forever. But it is for some people, and we hope that we’ve given you a good introduction into headless WordPress what it is pros and cons of using it the technology behind it and some good use cases for it. I know Greg has a quick announcement about this presentation.

Brad Williams: Oh, thanks, Lisa. We thought it would be very cool to end the webinar by saying that this entire slide deck is headless word. All the slides are in WordPress as a slides custom post type. And what you’re looking at is Lisa screen. I know the web address is covered up by the recording bar, but maybe Corey can share that, but this is just pulling all the slides from WordPress and I built a carousel and Lisa’s able to scroll through it.

So headless WordPress, 

Lisa Sabin-Wilson: Atlas, WordPress. Thank you everybody for showing up today. And. Being interested in the information that we [00:34:00] have and in our costumes and all of that. And I want to think of course, bragging Greg and a more for putting together this webinar and some of the information we presented here today and Korean post status.

Thank you as well. 

Cory Miller: Thanks WebDev. I’m going to put a link back to Twitter. Go online right now. This is an amazing presentation and thank the awesome peeps at WebDev studios on Twitter publicly. I’ve got a poll in just a second, but there were some questions. Did some questions come in that you saw that you wanted the answer bred or.

Yeah, 

Greg Rickaby: I have a couple I could read off here to the group here. So the first one is from the poles right in the way. Now the first one is from Jamie and they ask how can you restrict the headless API for post content to only be usable from your front end site? That is the first question, Greg.

More take that. 

Brad Williams: W which question? I’m sorry, Brad, what was 

Greg Rickaby: the question? I can’t restrict the API. So the content [00:35:00] only goes to the front, your front end, and other people don’t necessarily have could stumble upon it. Maybe inadvertently gain access to that 

Brad Williams: API. Yeah. So one of the cool things is you can literally put WordPress anywhere.

So you could have it behind a VPN. You could have it behind some sort of like Apache lock. You could have it on your own. And then when you build your app using whatever Mehta framework or a pure reactor Vue JS, you want, you just pointed out a certain end point, the end user may never know where the backend lives.

They don’t need to know unless you’re literally sourcing media. For example, our headless slides are just pulling images from a WordPress install across the internet, into the slide deck. But I could have set it up to pull the images into my head, into the headline. And they would be hosted locally and no one would ever know.

So yeah, you can definitely do that depending on your configuration. 

Greg Rickaby: Don’t worry about my backend. Worry about your own backend, 

Cory Miller: can I get, can I create an API and WordPress that feeds out information from my Keston custom database [00:36:00] table created in my plugins? 

Brad Williams: Absolutely. Yes. The WordPress rest API does allow you to set up and point.

And you can even set up fields and do all kinds of stuff. Yep. I would definitely look at the documentation for the WordPress rest API and look at how you would just query the data from the database and point it route it right to a rest API endpoint or even a field. On another end point, for example, for the headless slides, I created custom end points.

I’m sorry. Custom fields that showed the slide. That exposed the slide number in the rest API. And it took a couple of minutes to set up because of the hooks available that I found in a rest API document. 

Cory Miller: If it’s a personal question, but is your costume safe in public? Do you have to even mask, are you already 

Brad Williams: considered mask?

I would say this does not qualify. 

Cory Miller: Okay. Okay. Ashley asks, how can you utilize headless in a hybrid play? If you have a [00:37:00] react form for a front end, but want to develop WordPress pages to. 

Brad Williams: Yeah, this is another great benefit of going headless is you can, you would have to probably do some sort of sub domain or sub folder routing.

Meaning if you had the, if you wanted to serve, let’s say your posts from a headless. So you would set up like your website.com/posts and maybe post is hosted at another host somewhere one of our partners. And you would route, that the headless front two posts, and then you could still use pages and then maybe slash pages or the route of your page could just be a traditional WordPress page.

It going headless doesn’t mean going all in necessarily. You can choose to do a little as little or as much as you would. By leveraging the rest API or plugins like WP graph, QL. 

Cory Miller: You have other questions for the awesome team at WebDevStudios put those in the chat or the Q and a button.

I’m monitoring those. And while you’re doing that I need to share the winner of the [00:38:00] costume. And they didn’t even know this was going to be a costume, but whoever wins either gets a choice of assigned WordPress all in one for dummies edition, by Lisa Wilson, or they get to pick between professional WordPress development by Brad Williams.

See what I’m doing there. Okay. Here’s the results. Here’s the results. Congratulations, Greg. 

Brad Williams: Nice. So I was the editor for both of those books. So I’ve already read them. I don’t want them. So I was trying to force, who’s going to 

Greg Rickaby: win to get one vote. 

Brad Williams: You 

Amor Kumar: didn’t get one vote. Did I get votes tonight? 

Greg Rickaby: Come on people.

Lisa Sabin-Wilson: I think the best person lined because Greg’s outfit is super topical. 

Greg Rickaby: Yeah I’ll tell you what, why don’t we give a copy away to someone that watched the presentation or we’re happy to send them a copy of whatever book. Yeah 

Cory Miller: we’ll tell you that I was, I knew it was going to be Greg and I was [00:39:00] trying to get your director of engineering to choose between you live.

And he went out to me and goes, I was the editor. So who’s you 

Amor Kumar: all went? 

Brad Williams: Yeah, no, I don’t want it. 

Lisa Sabin-Wilson: It’s violent. 

Cory Miller: You basically said I’ve already like both. I’m part of both. Hey everybody, if you have a question for the team here, we got some time left. Don’t let me just banter with my friends over here at WebDev.

But I did put the Twitter address for web dev studios and a chat guest. Thank you to them today. I’ve known Brad and Lisa for gosh, over 10 years of some of my dearest friends in life. And this has been an awesome webinar. So again, if you have questions here we go. It looks like when it’s coming.

Posters and the Q and a button or the chat, whatever works for you. And I’ll be monitoring those. Okay. Should the next, I’m not a developer, some if know, if this is correct correctly written, should the next dot S be okay. Next? Yes. [00:40:00] Be fully static prompts versus service side 

Brad Williams: props. Sure. Yeah, it can be it really depends on the type of content you’re saying.

I would recommend if it’s a basic WordPress install with like static content for pages and posts, and you’re not publishing all that often, I would recommend going static and then using incremental static regeneration, which is a feature of next JS to query for new content. Maybe every 15 minutes.

That way you’ll always have the latest content out there in your website will still be blazing, fast. Another use case maybe for a semi static or using server side props might be something where the data is more dynamic and needs to be displayed in real time. At that point, I would use server side props and do if you have a dashboard or some sort of app, maybe tracking NFT prices or something like that, you want that to be more real time.

I would say to answer that question, you need to look at your content and say, is the static content, or is this dynamic content what’s great about next JS is you get the option to choose one of three different ways [00:41:00] to serve it. 

Cory Miller: Okay. So anonymous ass headless WordPress versus content hub. What are the differences and similarities?

Brad Williams: I am not familiar with content hub, 

Lisa Sabin-Wilson: but there’s a hundred of them out there. Contentful is another one that I’ve seen being used. And really it’s all about the editor experience and what your preference is personally. I’m a little, I’m a little biased on the WordPress and the editing experience.

I’ve been using it for more than a decade. And I just didn’t, I, WordPress has got the editing experience down. So that is the. That’d be content repository or the CMS that I prefer 

Amor Kumar: Lisa don’t a lot of clients prefer WordPress to, to other CMS. They do. They 

Lisa Sabin-Wilson: do. All we do at WebDev studios is 100% WordPress all the time.

And [00:42:00] that is not just a reflection of our preference as a company, as developers, but also a reflection of our client base and what they are requesting. And that’s WordPress. It’s no secret WordPress powers, almost 45% of the websites on the web today. And there’s a reason for that.

Cory Miller: Here’s the question that says, what’s the recommendation. What’s your recommendation for new developers trying to migrate from traditional WordPress to headless 

Brad Williams: starter? Yeah go slow. First of all, you need to be familiar with, react or view. If you go on top of that, you’ve got next JS or Gatsby, which provides you really great options for out of the box integrations.

Like next JS has the WordPress example, a Gatsby has a WordPress plugin. I believe that allows you to just point at a rest API end point. So I would start there and then really try to master. Like what a moral was going over with, like the atomic design, storybook [00:43:00] components, building your components and Adams organism, molecules, organisms, and stuff like that.

Yeah, I would go slow. That’s my recommendation. So in next time 

Lisa Sabin-Wilson: I have a question for you, Greg, and this is a conversation that I see happening a lot in the developer community, but that is. Next JS versus Gatsby versus view we’ve chosen as a company next JS Y 

Greg Rickaby: sure. 

Brad Williams: The dynamic ability, the dynamic integration with incremental, like the features that come with incremental static regeneration, as well as server-side generation.

This is really bothering them there. Like costumes falling apart. I’m also sweating profusely by the way, because it’s really hot wrapped in all these bands. Yeah, so Gatsby man Gatsby came out of the gate several years ago and was very popular. We tried, I gave some presentations internally and was trying to get the company to make a turn a little bit toward [00:44:00] using Gatsby.

We even pitched it to some of our enterprise level clients at the time they didn’t buy into it. They weren’t sold. The JAMstack or anything like that yet? What bothered me about Gatsby and I’m not, this is me, and this is this is what’s great about the internet and having a million JavaScript frameworks is people have opinions.

What I didn’t care for in Gatsby is how, just how opinionated it can be. You’re really locked into their plugins, their ecosystem. You really have to. Everything is built ahead of time. I know they’re making changes and they’re trying to go the way next JS is going, where things can be dynamic.

And it’s not always going to be built and take a really long time to build your site all at one time. And I know they’ve made a bunch of improvements, so please, don’t I don’t want the comments. Yeah. But the reason we chose next JS was the incremental static regenerate. For a specific client we had last year, they needed the website to be static for some content and they needed to be dynamic.

We were building a dashboard, it needed to look like an [00:45:00] app. It needed to pull information in from Salesforce. It needed to pull it in from mural, which is an event management system from WordPress, all these different endpoints in certain parts of the website needed to be dynamic. And at the time next JS gave us the option to do dynamic pages or static pages, depending on the.

So for us, that was a no brainer. Plus I love that next JS you’ve got like create react app, which doesn’t bring any tooling. So you have to like, bring your own Webpack config. You’ve got next JS, which brings a lot of that config in that tooling with you that Maura was talking about. And then you’ve got Gatsby, which brings a lot of opinions.

I like that next JS has in the middle. It gives you the tooling you need to get started quickly, where you can just build. And make quick decisions, like, how am I going to route this page? Is it going to be dynamic or static? So I know I’m rambling on, but this is one of my favorite topics.

And that’s the reason we took the next JS route is we’d liked that we could do static and dynamic content at the same time. [00:46:00] And did I 

Lisa Sabin-Wilson: ask the right question? Huh? Funny how I knew exactly what question 

Cory Miller: is. I think he you’ve done this before, Lisa. Hey Maura, would you mind sharing what you just put into the chat for the recording?

We’ll put it in the show notes, but I think that was really good. And I’d love to hear it from you. Your advice there. 

Amor Kumar: I’m just replying to that question about what’s the recommendation for a new developer or trying to migrate from tradition. WordPress the headless. I think the first step is to just learn either react or view or one of the JavaScript frameworks learn the basics of that first.

And then you can start getting familiar with the WordPress rest API maybe use the classic editor and not Gutenberg yet. Cause Gutenberg comes with some complications for how this websites. And then three develop a simple blog, like just with posts using the WordPress rest API and your framework of choice.

So reactor view or whatever and then try to build the same site using next JS or our WordPress starter or one of those other [00:47:00] Mehta frameworks that are built on top of view or react that we talked about during the presentation. I think that’s a good roadmap. It, yeah. 

Lisa Sabin-Wilson: Good JavaScript deeply that years ago. 

Amor Kumar: Oh, that’s true. If you don’t have a JavaScript background too, before you even pick up reactor view, I would learn the JavaScript more deeply. The basics is just vanilla JavaScript, and then go to the end, then start at step one 

Cory Miller: real quick. Want to thank again? WebDevStudios readily said longtime friends of mine, always spring entertainment, but awesome value to this.

Thank you for all the time, but into this and then being so willing, all four of you to share your experience and expertise with the broader WordPress community. And as a side note real quick, I want to say thanks again to WordPress engine WP, ans excuse me. WP engine for Making the transcript and all the backend stuff that makes these things possible and helpful and accessible to all.

We have it, I’ll be having an [00:48:00] interview on their Atlas project that the game here mentioned among several of the options out there and WordPress. But be sure and say your thanks to to the web dev team here. What other, I want to make sure I didn’t miss any questions. Anybody else have any thoughts?

Lisa, Brad, and more Greg or any questions I missed? 

Lisa Sabin-Wilson: I have a question, but like I need a shower. 

Greg Rickaby: Let me just a 

Brad Williams: statement 

Lisa Sabin-Wilson: and itchy in this. This makeup is like sticky. So this is what I do for you, Corey. Cause I love you. I saw. I saw, 

Cory Miller: did you see the, my title here, my title and my name? Cory Miller holder w scam.

Lisa Sabin-Wilson: Real quick story. I first met Corey in Chicago in 2009. First word camp, Chicago. Ever. I went up on stage to speak, [00:49:00] but I had a mouth of gum and I didn’t know what to do with it. So I took it out of my mouth and I’m like, Corey was standing right there and I said, will you hold my gum?

And ever since 2009, he’s been the holder of. My 

Cory Miller: business card and then Brad and I have numerous stories that are definitely not fit for a zoom webinar, 

Brad Williams: technical webinars 

Lisa Sabin-Wilson: on your only fans account,

Cory Miller: Greg, and a more, I look forward to more of these too. And I love. You all shared just so openly. And again, Greg winter, we’ll figure out something to send to you from post status for winning the, in our girl, headless Halloween by waving a towel.

That’s where 

Lisa Sabin-Wilson: it should be. Isn’t it? Absorbent? 

Brad Williams: Yeah, it’s absorbing. All right.[00:50:00] 

I do like your post status. Corey 

Cory Miller: you got that or whatever you want to come in your way, 

Lisa Sabin-Wilson: but all of us, 

Cory Miller: everybody here. Okay. I’ll get your address is offline. Yeah, I do too. Except at least what do I do? What’s the protocol? Do you all have an opinion? Should it be curved? I can’t rock a flat hat.

Amor Kumar: Okay. 

Cory Miller: Okay. I’m good. If Lisa said don’t even wear that. I’d be like, okay, I can’t wear that. 

Lisa Sabin-Wilson: You definitely should wear the hat and you definitely should send the hat. So I’ll send 

Cory Miller: for while I’ll get your addresses offline. Very sick. Hey, what did the team, anything you want to share before we wind this down and say, thank you for your time and sharing.

Brad Williams: If you have any questions I’m on Twitter at Gregory, it could be a, or at WebDevStudios, obviously I’d love to chat a more [00:51:00] Rebecca Darren, the whole, like next day as team here at WebDevStudios, we’ve seen and done it all. So if you have any other questions please reach out and we’d love to answer them and work with you on 

Greg Rickaby: it.

So yeah, definitely check out our blog. webdevstudios.com/blog. A lot of topics on headless, a lot of developer topics. So if you’re looking to learn more, there’s a lot of great content on our blog. 

Cory Miller: I’m trying to put the link in there and we’ll put it in the show notes too. Hey, thank you so much. I hope these are getting to be able to read recycled in a couple of days, 20 to take your kids or family, a trick or treating better.

Thank you for an awesome webinar. And thanks everybody for joining us at post EDIS. Live here. We’ll see you in slack. I love it. 

Brad Williams: got it.

Happy Halloween, everybody. Amor Kumar: Thanks everyone. See you.