Gatsby WordPress Themes

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to another episode of Learn With Jason. (Echoing) Whoa. Okay. We're off to a great start here. Also, my scenes didn't load. Let's just refresh this page. There we go. Okay. We're off to the races. I'm having equipment issues all over the place today. It has been a mess. All right. So welcome, everybody. Thank you for joining us. We're running a little behind schedule today, but that's not going to stop us from having a good time. Today on the show we have Alexandra Spalato. How are you doing? Thank you so much for joining us.

ALEXANDRA: Fine. Thanks for having me. Super happy to be there. We have rescheduled several times. Finally. Finally.

JASON: This one has been -- I think we might be a full year in the works of getting this episode to actually happen. And I am so happy to see what you've been working on. I know you've been hard at work building out a whole new company, right? And so this is going to be a whole lot of fun, but before we start talking about what we're going to do today, let's talk a little bit about you. For folks who aren't familiar with your work, can you give us a little bit of a background?

ALEXANDRA: Okay. So I began with WordPress about ten years ago out of the blue. Then I get into coding custom themes with WordPress. I always wanted to build a product. But the WordPress market theme was kind of crowded. After a few years, working mostly with clients on custom themes, I jumped into JavaScript and React. And then I discovered Gatsby, which was about two or three years ago. Then we began to create the first free themes to WordPress from Gatsby. And I remember that we were doing them and somebody else said, oh, now there is an API for themes. There is Learn With Jason. I think it was one of the first episodes where you were showing the themes API. And we transitioned to themes API. So from there, I really continued specializing many WordPress and in Jamstack, especially in Gatsby. I thought it would be nice to have premium themes. Nobody is doing it. And I was dreaming of doing a project. I have also some design skills. So that was perfect. But I was needing another. So I've been very lucky here because it was on Twitter. I remember we posted about this first free WordPress Gatsby theme, and Paulina, a friend from WordPress Paris, she had a WordPress themed shop already. She tweeted out, oh, it's nice, I'm doing the same, et cetera. So the perfect person. I tweeted her and we called each other and she was in. After that, it was Gatsby days in London when I was speaker. She came there, we passed two days together, and the next day we began. It was about October three years ago.

JASON: Yeah, time fly, huh?

ALEXANDRA: Yes, time flies.

JASON: And it feels like just yesterday when you and I were talking about the idea for this business.

ALEXANDRA: Yes.

JASON: And when you were just getting started. Geez, what, 250 episodes of Learn With Jason later, two-plus years of working on this later, you are off to the races. This is very exciting. I'm super excited to see this grow. So I guess maybe -- you mentioned something which I think is worth pointing out. You said you started out by building starters for Gatsby. Then you pivoted to use the themes API. What's the difference?

ALEXANDRA: Okay. So starter, it's just files with all the components, but it's not an npm module that can be updated. If you modify it, then you cannot update it. A theme, it's not like a WordPress theme because it can be components that can be used in different places. You can combine several themes together. And if you want to modify them, you have to use what is called shadowing. You bring this component and modify it in the starter. And you can combine a theme with a starter. That's what we are doing. What we have architected, we have a central theme that is only responsible of bringing the data from WordPress, the block data. We are going to build our themes. For example, we'll make a theme for e-commerce. It will take all this data from e-commerce. We have then plug-ins. We have plug-ins for contact form, for comments, for search, for all these functionalities. Then we have made plug-ins, for example, that package all the extensions, which is really good because for users, when we make updates, we update all these packages all together. And in the actual version of themes, not in the free one, but in the other ones, we build another thing on top of the parent themes that are responsible for the data that bring all the front-end components. And on top of that, the project. But we realize that passing by, shadowing a component to change it, it's complicated. So we made it a starter, but now in the future, we have decided we're going to make themes these core parts and all this functionality, but all the front-end parts finally so people can modify them directly. So things that come in the practice and you are building, you realize, okay, that should be better like that or like that. I hope it's clear.

JASON: Yeah, no, and I think that's a good point. What you just mentioned is this isn't something where one use case is like clearly superior to another one. And so I think that, you know, this is a case where when you have shared functionality that is common between sites, it's not going to change a lot like pulling data from WordPress or how you handle a contact form submission, that's a great use case for Gatsby themes. But when you start looking at something that is less consistent, like the way that a site looks, trying to make that into a theme, sometimes you're going to introduce more work than it's worth. So having that as a starter that uses the theme for the common shared stuff is a way for you to say, hey, this is a starting point. But as you modify it, this code is yours, you can continue to modify it. It'll become your site, not a starter site that you -- you know. So I think that's a good call out. There are different use cases for different things.

ALEXANDRA: Exactly.

JASON: Also, chat, I see your note about Google Calendar. I apologize. I missed the Google Calendar entry for this one. So we're going rogue today. But yeah, so we're doing an audit to make sure Google Calendar is updated for everything going forward. So that's an exciting thing for today. But so Alexandra, when we're talking about the theme that we're using today, you mentioned that you're doing premium themes, but you just launched free theme, is that right?

ALEXANDRA: Yes.

JASON: Great. So what -- like, what can somebody expect if they go in and they get this free theme? How -- what are we setting them up with out of the box here?

ALEXANDRA: Okay, we are setting up a blog with a really nice design. It's as nice as the premium themes. You have all the data. You have the posts. You have the pages. You have pagination. What else? You have a share on social media. It'll have the comments, the search. It'll have -- in the premium themes, we have options to add a side bar, to add widgets, like the last post or categories or things like that. But the free theme, it's really totally usable for somebody who wants to make a blog or start a blog as a developer that's really well structured with folders and files. And it's a nice design. So it's really usable out of the box.

JASON: Great. Well, why don't we -- I mean, I'm excited because I feel like this is a pain point for a lot of people. They want something nice looking that just lets them start creating, right. They don't necessarily want to have to design a blog or do the nitty-gritty of coding of a front end. They just want to get a site out there so they can start to publish and evolve it over time.

ALEXANDRA: Exactly.

JASON: So I'm really excited to see how this works. Why don't we switch to our pair programming view here. Before we get started coding, let me do a quick shout out. We have live captioning for this show like all shows. We've got Rachel here from White Coat Captioning today making that possible. And that is paid for by our sponsors, Netlify, Fauna, and Auth0, all kicking in to make the show more accessible to more people. If you want those captions, you can find them on the home page of learnwithjason.dev. And we're talking to Alexandra today. You can find her on Twitter @alexadark. Give her a follow. We're specifically working with Gatsby WordPress themes here. Here's a link to the site where you can find the premium themes, as well as the free theme we're going to use today. So Alexandra, where should I start? What's my step zero here?

ALEXANDRA: Okay. You get your feet web by subscribing. In a few seconds, you'll receive an email with all the instructions.

JASON: Okay. So I'm going to do that.

ALEXANDRA: Oh, there are some browsers where it doesn't work.

JASON: Oh, did it give me an error? Something got blocked by client. What browser should I use?

ALEXANDRA: On Chrome it works. I have one browser it doesn't works. I have to write to them.

JASON: Let me close all this. Let's see. Let's go here. Okay. So there we go.

ALEXANDRA: Okay. So now it should arrive. It takes a few seconds to arrive.

JASON: Okay. So I'm just looking at my email off screen here because no one should see my inbox. It's very anxiety inducing.

ALEXANDRA: Then you will have the WordPress theme because we have a specific theme to work with. And the demo. And we will install that and download the Gatsby files. Is it there?

JASON: I'm looking. Oh, here it is. I've got it. So I have a token. You can see the demo here. So let's start by looking at it. Okay.

ALEXANDRA: We have dark mode too.

JASON: So here's our light mode. There's pagination. This looks great. Oh, and you have a review, typography.

ALEXANDRA: Yes, by category of tags. We have an archive of everything, pagination of archive. Pagination is great. It's always been one of my pet peeves. I don't know why.

JASON: Yeah, but this looks really nice. The pagination goes the way we expect. It all does what we're expecting it to do. Okay. So that's good. Then I have a token here.

ALEXANDRA: Yes, and you have the link to the doc. I really send people to the doc to know what to do with the token and everything. But the first step is to install the WordPress site. So we have two and you're going to join all that.

JASON: Okay. So here's my download.

ALEXANDRA: Yes, this is the demo. The other one is the theme. WP Light. So, now the best way is to use it local by Flywheel. Or you can make an online install too.

JASON: All right. So let's -- download how?

ALEXANDRA: By the way, that's for development. When people will deploy, of course, we need their website on hosting live.

JASON: I think I need help. This isn't clickable, and I don't know where to go.

ALEXANDRA: Oh, I don't remember how I install that.

JASON: Do I have to get the whole box? Nope. Okay.

ALEXANDRA: Or if you have WordPress hosting somewhere, you can have it there.

JASON: Where do I have WordPress hosting? I think I did this on -- where was it? There was a site that I used that just gave me WordPress hosting for like a couple bucks a month.

ALEXANDRA: Yes, I have one. I have a hosting I use for demos and things like that.

JASON: Which one do you use?

ALEXANDRA: It's in Spanish.

JASON: Oh, Spanish. My Spanish is not that good. Let's see if I can do -- why am I drawing a blank? Where the heck did I host it? I had Colby Fayock on the show.

ALEXANDRA: Localwp.com. Then you have a button download.

JASON: Oh, localwp.com. Weird. They don't link to that.

ALEXANDRA: Yes, I don't know.

JASON: Geez, okay. We're getting there. This is going great. (Laughter) See if I can spell my own email right. I'm not going to put that in. Is it going to let me? Okay, it's going. All right. So I'm going to get Local by -- do I already have this? No, I don't. Okay. So we're going to get Local. I'm going to install that. It's doing a thing. There it goes. All right. So I'm going to close that, open up local. And, sure. Okay. Unlock more tools. I don't need any of that today. I can do that later.

ALEXANDRA: Okay. Create a new site.

JASON: Here we go. Okay.

ALEXANDRA: Okay, continue. Yes. Preferred. Username and password.

JASON: Probably just do it like this so it doesn't send me things. Do I need to worry about any of the advanced stuff?

ALEXANDRA: No, no. It's okay.

JASON: Okay. So this is creating a whole service right on my computer.

ALEXANDRA: Yes.

JASON: Whoops. Okay. So we got this going. Downloading WordPress. Here we go. This is pretty snazzy. Looks nice. And I can see some settings in the background here that are cool. Like, I can see -- we can choose our web server, PHP version. It's got a database. This is all really cool.

ALEXANDRA: Yes, no, it's very practical. And now we go to admin.

JASON: Okay. Oh, nice. That happened fast.

ALEXANDRA: Yes.

JASON: Oh, no. Screwed it up. Okay. So something is wrong. Let me turn off this redirect. I think I'm in a loop there. So let me go -- what happened here? I guess I can reset my password. And I'm just going to watch for that to show up. Did I typo this? Oh, this is weird. Okay. So when I put in my correct password -- what the heck was that? Okay. Maybe it just wasn't ready yet. It was in a loop, not a missed password. Okay. So here we go. We're in.

ALEXANDRA: Okay. I think the best way, because it's what the users are going to see, it's going to the doc. So if we go to the website, and in the menu, we have the doc. It's a step-by-step doc. So we go to setting up WordPress.

JASON: Okay.

ALEXANDRA: And go down. It explains that we have this WP backup. And there's an all-in-one WP migration.

JASON: So I'm going to go to here. Go to plugins.

ALEXANDRA: Yes. It appears first. Yes. This one.

JASON: Okay. Got it. Activated it.

ALEXANDRA: Yes. And now --

JASON: Okay. So we can import from file. So I need to unzip this one, I assume.

ALEXANDRA: No, you don't need to unzip it. Wait, wait, wait. You have to have it end with wpress. I think you don't need it because we are going to import everything, and the theme will be inside. Just look for a file with wpress.

JASON: Oh, this one here. So we can go straight to there. Import. There it is. I'm going to take this one right in. Overwrite your website, that's fine. So now -- okay, and it changed my password. So I'm going to log in. I'll change that later because we're not going to put this live yet. So, okay. Now we've got -- here we go.

ALEXANDRA: We're good with the WordPress part. Now we can go to the Gatsby part.

JASON: Wait, that's the whole WordPress part?

ALEXANDRA: Yes.

JASON: Wow! All right. Okay, that was easy. Great.

ALEXANDRA: Then after we can go through the things, figure out how you want the blog or the home page. Now we are good to go. Now we go to setting up the Gatsby side. Installing Gatsby starter first. It explains everything for the folks who are not developers and need to install everything on their computers. We don't need that, I think. Now we are going to install the starter. So if you download the starter.

JASON: I have downloaded the starter.

ALEXANDRA: Documentation is different. We have to put some different things so people don't go in the premium parts. So now, yes, you need to unzip your Starter Light.

JASON: So I'm going to move this. Let me open up a new window here. We're going to go into GitHub, Learn With Jason. Let's call this Learn With Jason Gatsby WP Themes. Then I'm going to copy all of this. Actually, I better do it this way. Let me -- so I don't miss any hidden folders, I'm going to drag that in here. So then in here, we can open this up. Okay. So here's our site.

ALEXANDRA: Okay. Now the first thing we need is to install the modules. That includes the themes and all that. So for that, if you -- no, it will not work now.

JASON: It will not work.

ALEXANDRA: No, we need the famous token that's in your email. We need your add your token to your shell file, or you can just, to make it simple, type GWPT auth token equals, and then your token.

JASON: I'll do this off screen so I don't share that token. Then I'm running npm install.

ALEXANDRA: Yes.

JASON: Let's see. Unable to resolve dependency tree. Looks like we're trying to use 16.8 and 17.0.2 here.

ALEXANDRA: This is a plug-in with dark mode. For me, I never had this problem.

JASON: Let's see. I might need to do the legacy peer deps thing. let me head over here and run it again with the legacy peer deps. I think what's happening is in more recent versions of npm, it just hard fails if you have incompatible peer dependencies. Before it would just print a bunch of warnings and ignore it.

ALEXANDRA: Okay. I use yarn all the time.

JASON: Gotcha. So that also could be the problem.

ALEXANDRA: We always use yarn, but normally npm should work.

JASON: It is working now. Let me pull this back over. It's doing the thing now. So it just needed that legacy peer deps to make sure that it didn't choke on those mismatched React versions.

ALEXANDRA: It takes time to install the module. While it's installing, what we can do is enter the variables. So we go to the env sample. And we replace the Gatsby WP URL by our URL from Local by Flywheel.

JASON: Okay. And that was here.

ALEXANDRA: Yep.

JASON: And do I need to include the WP admin or anything?

ALEXANDRA: No, just that. We don't need it for the moment because we don't have a website. So just this one. And rename the env sample to env.

JASON: Okay. There we go. So it is there. I have this plug-in that I've apparently --

ALEXANDRA: What is this plug-in?

JASON: Well, it's called Cloak but I can't seem to uninstall it. I tried to disable it because we were doing some stuff that was visible, and it just won't turn off. So at some point, I'm going to debug that. For now, I'm just going to leave it alone.

ALEXANDRA: Okay. So where are the node modules?

JASON: Getting there.

ALEXANDRA: Okay. So once out there, we just type Gatsby develop and we're good.

JASON: Okay. And this is -- all right. I can npm run dev. I don't have the global Gatsby CLI.

ALEXANDRA: We have not built anything, and we just have a normal Gatsby develop.

JASON: This is funny. Maybe now is a good time to get up and stretch. And is this using WP GraphQL under the hood? I saw a question about that.

ALEXANDRA: Yes, yes. It's using WP GraphQL, WP Gatsby. All these plug-ins are installed. It installs the necessary plug-ins and everything, plus the demo data.

JASON: Nice.

ALEXANDRA: If you go to the URL, you will see all the plug-ins.

JASON: Sorry, which --

ALEXANDRA: On WordPress.

JASON: Ah, I see. Yeah.

ALEXANDRA: Oh, yes, we have Yoast SEO too. We have a beautiful blog.

JASON: Local host 8000. There it is. Hey, hey. Beautiful. And this one is hooked up on ours. So if I go into this hello world and we want to change that, I can go to posts, edit, and we can say hello chat. Update. Then does this hot reload, or do I need to stop and restart to pick that up?

ALEXANDRA: No, you don't need to restart it. It's good now.

JASON: Oh, oh. I didn't even have to refresh the page. It just worked. Cool.

ALEXANDRA: Yes, and also, we have it make to work with the core features. So if you want to build, you can do it. But it's not with other plug-ins. We have also code, you know, with Prism.

JASON: Yeah, so this is the Prism JS.

ALEXANDRA: So that's included in the free one. And now we can do anything. We can do things in WordPress. For example, we can choose to have a homepage instead of a blog at first.

JASON: And this will all just work, right? So if I go in and go to my pages, we've got this typography page. Let's add a new one.

ALEXANDRA: I don't know if you have to reload for that. We are going to see. I don't remember.

JASON: Okay.

ALEXANDRA: Just publish something.

JASON: Okay. So we'll have to come back and link that once we figure out where the blog is going to live. But I'm going to publish this site. If I remember correctly, I need to change some settings to make that turn into the homepage?

ALEXANDRA: Yes, you have to go to settings. And reading.

JASON: Reading.

ALEXANDRA: Okay. Yes. Static page and home. And post page, yes, you have --

JASON: Oh, do I need to go make one?

ALEXANDRA: Create a blog page, yes. We will have to restart to change the configuration.

JASON: Let me create a post page. Then I'm going to go back out here, go to settings, reading, and now I can change this to be home and blog.

ALEXANDRA: We can change the number of posts per page. Now there is ten. So if you put three posts, for example. And save changes.

JASON: All right. Then I can go back out to my page here. On the homepage, I want to --

ALEXANDRA: Like, link a diary, for example.

JASON: This is something I think WordPress really excels at, this kind of connectedness of content and not having to even -- I don't need to know what the automatically generated URL of the blog is. I can just come in here and say I want a link and search for it. I feel like that works. I feel like that's something that's done really well by the WordPress.

ALEXANDRA: Ah, yes. Now you have to restart.

JASON: Restart entirely? Oh, wait. Did it just work? I didn't. It just worked.

ALEXANDRA: But I don't think you have the home -- oh, yes, it works.

JASON: Look at it go. I will say, it's been a while since I have been on Gatsby. I haven't been using it, and that is a good upgrade. Great job to the Gatsby team on making that just work because definitely did not used to do that.

ALEXANDRA: No, it's running on Gatsby 4 now. Everything is really great.

JASON: Yeah, so there's a question in the chat about what we're using here. The all-in-one WordPress migration we installed, did that install a theme, or is it just installing plug-ins? What happened under the hood with that?

ALEXANDRA: Okay. This plug-in, it's, for me, the most handy plug-in to make backups and restore backups. So what we have done, we have viewed this demo, we have all the necessary plug-ins, all the data to make it look nice. If you go to the all-in-one WP migration, you also have export features. You can export. We have downloaded that and provided just an import/export and backup plug-in. But it works just super well and super easy. So we can even just import the database, for example. I have a limited version so I can import/export big websites. It's really a good plug-in. So yes, it installs everything, the plug-ins, the images, the posts, the pages. Then this is the theme we are using. That is just a necessary thing for that. In the premium version, there is more things. There is widgets. There's an option to have a side bar to the left, so the right, to have the last post and things like that. But here it's really streamlined. It can work with any WordPress theme, but it's better to use this one, perhaps for the menus and things like that. But I think if you use 2021 or whatever, it will work.

JASON: Okay, great.

ALEXANDRA: But yes, we have videos. We have WPGraphQL. We have the code blocks and we're good.

JASON: Nice. So not a lot required on the WordPress site. It's a lot of kind of -- what you've done is taken away some boilerplate work, but there's not magic here. We're installing the required plug-ins, making sure they're done properly. As a developer, if I wanted to use your theme without using this WordPress backup, I would just have to install these plug-ins.

ALEXANDRA: Yes, totally. It can be very useful for people who already have their blog and they want to pass it on Gatsby. They just have to install these plug-ins. They obviously don't want the demo. They can install our theme also, our WordPress theme. That's in the download. And then they can just connect and have their blog running on Gatsby immediately.

JASON: Great. Okay. So we're making killer time here. We've effectively built this site. Now there's something that I think is kind of interesting here. Before I talk about this, let me ask, is there anything that you definitely want to make sure we cover before I start off on a rabbit hole?

ALEXANDRA: Everything is in the doc. We have really taken care of the doc to make it very clear. Obviously, more of our users are developers, but it can be also for people who are not developers or people who have never used Gatsby or JavaScript or whatever. So we try to make sure that it can be usable by anybody. Of course, they have to install Gatsby and all the things, but even a non-coder, if they're smart enough to follow step-by-step documentation and not be afraid of writing in the console and things like that, they can do it. For developers, I think it's quite easy to get it.

JASON: So here's something that I think is really exciting about this approach. And this is where I think the Jamstack value started to really sink in for me. How much of a security and cost-control measure the Jamstack can be. So there are a couple things to note here. The first is this blog is not running on WordPress. These are two separate instances, right?

ALEXANDRA: Yes.

JASON: So this WordPress instance is running locally. That's the .local happening there. And this is also running locally. We're just using local host this time. But I don't need the WordPress site to be deployed. I can actually build the site and send it up to Netlify or whatever for hosting. And never actually need to make the WordPress site accessible from the internet. Now, granted, that's going to -- you know, comments won't work. Anything where you would write to WordPress clearly is not going to work. But if I'm a developer and I want to write my blog and I'm not going to turn on comments, I can theoretically only have WordPress running locally. So I never have to figure out, you know, where am I going to host this thing, what do I have to pay to host my WordPress blog. There are a lot of caveats that come with that, but it's exciting to me because the WordPress instance is completely disabled, but the site itself is still live.

ALEXANDRA: Totally. And one thing, because it was in a podcast. I said, okay, you can have your WordPress site down, but your front end is live. Oh, yes, that's what talks to people.

JASON: Yeah, it makes such a big impact. And when you talk about things like the security of WordPress, WordPress security has gotten better, but WordPress is also one of the biggest targets for hacks and people trying to brute force passwords and different things like that. It runs so much of the internet. It's, what, 40% of the internet now powered by WordPress. That's wild to think about. Granted, when you have a unified log-in system, people are going to try to find vulnerabilities so they can go take over websites. So you hear about WordPress sites getting hacked a lot. If you use this Jamstack approach, your WordPress site is decoupled from the front end of your website, which means people won't actually be able to hit WP admin from your site, which cuts off a huge brute force, like, robo hack vector and helping you just kind of immediately avoid one of the bigger problems, which is people sending out robots to sniff around and see if they can find your WP admin page and try to brute force attack it. They see if they can get in with default log-ins and see if they can find ways around your security. If the WordPress site isn't accessible at your published domain, the sniffers won't be able to do that. You can keep it at some private domain or secret domain that somebody would just have to know. And that's the only place you can edit your site. Then your public site is not accessible as a WordPress site. It's only this Gatsby deployed front end. That's a huge benefit from a security standpoint without having to learn much about security or locking down WordPress or any of those things. Granted, you should figure out how to lockdown WordPress, but you know. So, okay. What else should we look at here? Should we try to just build this locally and take it live? Or how do you -- what do you think we should do with our remaining time?

ALEXANDRA: I think we should go in the files and see how we structure it and see what we can do. We can change the fonts. We can style it. We can build custom themes. Yes.

JASON: Absolutely. Let's do it. So I'm going to take this. Let's put these side by side. I'm ready. Let's mess with this blog.

ALEXANDRA: So, we can change the fonts, for example. For that, we go to config. You can see you have fonts here. So we can choose some fonts on Google fonts and change it. So here we have the headers and body.

JASON: So let's change it to something very obvious. Let's try comforter brush.

ALEXANDRA: I tried this the other day, just to prepare for the show. I have tried this one. So now we have to change that also in the config.

JASON: Okay.

ALEXANDRA: So we save that. As we have changed something in the config, we have to restart. This time we have to really restart. Now we are cleaning the cache.

JASON: Ah, I see.

ALEXANDRA: It's a small site. It's okay. It goes fast. I have put all the colors, so we can change the colors. What I have done, I have named each part of the blog. So for example, header background, header color. I don't remember all. So we can really go in the colors. You see header, footer, everything. We have the dark and light part so it makes it easy for people if they want to change the colors of every part. It's really organized to make it easy and consistent. And at the top, I have made a color palette. So you can go crazy.

JASON: Oh, yeah. Then we've got polished here so we can mess with the colors. That's always nice.

ALEXANDRA: Yeah, if you change the primary color, you're going to change everything.

JASON: Okay. So this should kind of update on the fly. I'm going to take that out for now so we don't do that again. Let's see here. While we're waiting for this to build, chat, how many of you have worked with headless WordPress? How many of you have tried it? If so, what was your experience? How have you liked working with headless WordPress? Then Alexandra, for you, have you worked with other headless CMSs?

ALEXANDRA: Not really. Actually, we are planning to expand the theme to other platforms. We realize there is not a lot of themes, premium themes available. So with that, I think we'll be able to plug in the starters quite easily. For example, we are thinking about Strappy, Contentful. I have tried Contentful but not a big project. We'll see which one makes more sense, but I think Strappy and Contentful are used. The other day I saw a video. It seems really, really great. Basically, you can build components that make a builder, and you developer first the admin and for the front end at the same time. You can use it to go to Gatsby. I want to try it. It seems really great. I want to try them all, but I don't have time.

JASON: I feel the same. I mean, I was mentioning earlier, we've done 250 episodes of this show, and I still feel like I haven't even scratched the surface of all the things I want to learn and try. So you know, by the time we -- and then there's the other part, which is by the time we get three months from now, a bunch of the things we've learned before, they've all had improvements and more things I want to try. So I spend a lot of time -- I spend a lot of time reminding myself that, you know, our goal as web developers is not to know every tool. It's to find ways to connect people to solutions. There are lots and lots of ways to solve problems. So it's not about finding the best tool. It's about finding the one that, you know, solves the right problem in the right length of time, not about doing -- you can't drink the whole ocean, right.

ALEXANDRA: No, no, no. I see questions. It's our next step to work on e-commerce, and not only e-commerce but Shopify. So making a theme for e-commerce as soon as we have time. Then, I don't see the attraction of using headless WordPress. Is it just so content editors are familiar with the interface? Yes, and it's 40% of the web, so many people will already have the content on WordPress or the team working on WordPress. So it makes the transition to Jamstack easier. But for other cases, that's why we want to expand to Strappy, Contentful, and others.

JASON: Yeah, I think -- I mean, the thing that seems interesting to me is that, you know, we did the Jamstack survey. We had thousands of developers weighed in and what we found was that developers who used WordPress, like most developers, many developers have worked with WordPress at some point. Their satisfaction with using WordPress was low. But when they used headless WordPress, their satisfaction was high. So I think what I find exciting about WordPress is that when you use it as a headless CMS, it's one of the more full-featured headless CMSs available. Because it's such a mature content management system. If you leave behind its opinions about front end and instead steer into what it's good at, which is content management and not website creation and then use a modern stack to build your website with WordPress powering them as the headless layer, it's a much different, much more pleasant experience that I think is really powerful and really fun. Okay. So I got -- the site -- it looks like it hung there for a minute.

ALEXANDRA: Beautiful font.

JASON: Look at this thing go.

ALEXANDRA: And you see the buttons have changed. We have the hot pink as primary color now.

JASON: Yeah, this is pretty slick too. Look, it even incorporated it into these gradients. This font is really hard to read, though. Maybe we want to switch it out to something else. Actually, you know what, I'm not.

ALEXANDRA: Oh, I have a really nice website for finding fonts. It's built my Paulina, my fellow developer. It's named goofonts.com. Yes. They have all the fonts on the right.

JASON: Oh, this is fun. Let's go with medieval. Oh, that's fun. Okay. How about signature. That's too hard to read. Let's go with movie.

ALEXANDRA: That's nice.

JASON: That looks pretty good. Look at that.

ALEXANDRA: I was using the Baumans.

JASON: Yeah, let's go with Audiowide.

ALEXANDRA: You can show more and it will open other fonts.

JASON: Oh, wow. Yeah. That's great. This is super useful. Okay. So this is super useful. So let's go back out here. We'll go into the config. And we'll swap out for Audiowide. Here, we'll also swap out for Audiowide. And I will stop and restart.

ALEXANDRA: Yes, without cleaning the cache.

JASON: Without cleaning the cache this time. Whoops, what are you doing? There we go. So no cleaning the cache. Just running Gatsby develop. Should be nice and snappy. Yeah, much faster.

ALEXANDRA: Yes.

JASON: There we go. It's doing the thing. People running Contentful/Gatsby. How well is the built-in WPSEO tool set integrated when running headless? That is a good question.

ALEXANDRA: There's a plug-in named WPGraphQL. And we have built a Gatsby plug-in that integrated. If we go into the files, you'll see that we have this plug-in. It brings the image, schema, and all this stuff. Out of the box.

JASON: I think I --

ALEXANDRA: Yes, I think upper case was not a good idea.

JASON: Oh, no. Okay. We're going to fix it. Here and here. And here. And it's going to be fast.

ALEXANDRA: And we can look at the files.

JASON: Let's do it. I'm going to here. Somewhere in here?

ALEXANDRA: Yes, go to components. Templates.

JASON: Templates.

ALEXANDRA: So if you go to page, you see we have this SEO component there that we import for Gatsby plug-in. We have everything here. If you go to the page, you will see we have all the SEO. That's a question I ask to myself. Okay, if I want to transition to another platform, I will not have that. It's entered automatically. So doing the SEO on another platform, I have to create everything from scratch. So that's one of the biggest advantages. Nice!

JASON: Yeah, so we got our font working. And I can see here's all this -- all the open graph tags and the SEO work that needed to be done.

ALEXANDRA: And the schema.

JASON: Yeah, and even this bit, the JSON LD for like Google structure data. Schema.org, is that where it's all defined? I think. Yeah, here it is. And this is all stuff that will -- like when you see in a Google search result how it'll show the navigation or it shows upcoming events or like these rich results. That's typically getting pulled out of data like this, which is really nice. So all this is coming in. Is this what Yoast is inserting?

ALEXANDRA: Yes, Yoast is bringing this data. It is from GraphQL. We have built this plug-in to make it available in the right place and well done out of the box for people using the themes. If you have to include that or the Twitter image, et cetera, it takes time. With this component, it's done.

JASON: Yeah, that's really nice. That's definitely one of those things that's always on my list. I want to go fix it. I've got a lot of things I need to go take care of, and I just don't have the time to like really do a good job. So I copy/paste over an open graph image thing so it works when I share on Twitter. I'll come back and do this structured data later. Then I usually don't.

ALEXANDRA: Yes. And first we had this plug-in, but we didn't include the schema. As I was work on a project, because I used that for my project. It saved me a lot of time to have the theme. So we included it inside the plug-in. Now it's available for all our themes.

JASON: That's really nice. So this looks great. We were starting to do a little bit of a code tour here. We're inside the page here. I can see we've got templates for categories, pages, posts.

ALEXANDRA: Go up. First, I think, I can explain -- yes, you have this folder, Gatsby WP themes. Here's the shadowing of this data plug-in. Here we are putting our components, you know, the meat, around this data. We have the fragments too because, for example, we changed the format of the image in the fragment. And we have this fragment inside our post. So this is shadowing. We're bringing the components from the Gatsby to change it and bring the front end.

JASON: Okay. And so to make sure that I'm understanding correctly, let's just step through how this works. So what this starter does is it installs the Gatsby WP themes Gatsby theme blog data light.

ALEXANDRA: Yes.

JASON: When I install that, it has these components, and a lot more that's not referenced here, inside of it.

ALEXANDRA: Yes, those are components from the Gatsby block data. We need to shadow them. If not, they will display only data, only JSON.

JASON: So the way the Gatsby -- like, Gatsby's theming under the hood works, is it installs this theme, which means it will treat the components of the theme as if they're built into the site. Then if we create a source folder with the name of the theme package, which in this case is the node package that's installed, then we can go into the source directory and just replace something. So inside of Gatsby WP themes, Gatsby theme blog data light, in the source direct toy, there's a components page. Because we've created this page, Gatsby is saying when I load this theme, I'm just going to replace the page.js file in this theme with this replaced file. Because we've done that, now we can pull in the page that we wrote down here in components, in templates. We get the data that came out of the theme, but we can pass it into our custom code. This right here is like the strength of Gatsby themes. We didn't have to rewrite all of this code that gets the data. And the theme doesn't need to care what this component is. But we're able to use them together in a really seamless way. And if we update this theme, right, as long as these two props don't change, we don't have to care. Like, we don't have to do manual migrations of code, which we would have had to do in a starter. So yeah, this is really exciting. So what do you have -- like, what else do -- is there anything else you want to show in the theme?

ALEXANDRA: Yes, so the page and then we have post and posts. We have all about the blog. It's really well organized so people can find and modify things. It's organized for me.

JASON: Yeah, and I'm looking in here. We can see here's the tail wind styling so we can drop in and make changes without having to learn a custom styling system. So that's portable. That's nice. As we jump in, each of these things looks to be pretty fairly straightforward. We've got a title. Then we've got a description. So we can go and swap out any one of these things.

ALEXANDRA: And in the index, we have all the components.

JASON: They all get put together. Oh, these are conditional on having a name and a description. That's really nice. Here's our post list. Good.

ALEXANDRA: Pagination.

JASON: Yeah, header and footer. So we can just go in and look and see. We have a nicely styled header. Put our branding in. Go ahead.

ALEXANDRA: Yes, a mobile menu.

JASON: Nice. And then we've got -- yeah, this is the mobile menu. Is this dynamically generated from the WordPress menu as well?

ALEXANDRA: Yes, yes.

JASON: That's slick. So if I go back and look in here and look at -- is it appearance menus?

ALEXANDRA: Yes, appearance menus.

JASON: Then this is what's showing up on the site. If I change this, it'll change.

ALEXANDRA: Yes, you can try it.

JASON: That's really slick. Okay. So let's do it. I'm going to make a new page, which I will do by --

ALEXANDRA: Or you can create a custom link if you want.

JASON: Am I missing the thing where I just get to create a new one?

ALEXANDRA: No, you cannot create a new page from there, but you can create a custom link.

JASON: Oh, oh. It's over here. Geez. I was looking right at it. I was going to just link to our --

ALEXANDRA: Oh, yes. Or you can link one of the posts.

JASON: Yeah, let's link to one of the posts. This is an experiment, so let's experiment. If I save this and save our menu, then what we should see out here is this will update here in a second. There it goes. Here's the experiment. And it links right to it. So that is also very slick because, like, when you showed me -- if you showed me here's a mobile menu and here's a top nav and things like that, I start to -- I'm like, oh, I don't want to update all those files every time the nav changes. But knowing this makes it easier. So here's what I like about this. With very low effort -- we had to write zero code. We were able to come in, get a site set up. We have editing capabilities. We were able to change the homepage. We were able to set up a custom blog page. We were able to mess with the nav. And we were able to come in and play with typography as well. This is kind of the dream when you're talking about -- people are saying I really wish I had a blog. Then they'll spend weeks or months trying to build the blog and none of the time writing. You have all that energy for blogging. Just blog. Get out there and create the thing. Don't worry about making the blog perfect. You can make it better over time. First, get into the habit of writing.

ALEXANDRA: Yes.

JASON: And I love that you've just kind of removed the barrier to entry here. You can just start writing.

ALEXANDRA: Yes, and you can have code snippets.

JASON: Yeah, we've got those code highlighting snippets here. It shows the language, which is really nice. Yeah, there's a lot to like in here. So what else should people look at here? So we've got the starter, and it sounds like you've got a whole bunch of premium themes. Here are the demos, I assume.

ALEXANDRA: So we have two. Basically, the ginger is the same theme. We call it the same starter. We have different variants. In the future, we are going to use custom and include it. If you click on the image, it will open too.

JASON: Oh, nice.

ALEXANDRA: You can make these galleries, and they look like that out of the box. This is no coding. This is just in the WordPress editor. And this is basically the same design, but we have the option for comments, side bar, search. So I have the base starter and the base gradient. It's the same theme with two different variants in terms of design. You make something nice but simple that you can build on.

JASON: Yeah, I mean, this is nice because, again, I can see very quickly you need to get a business set up or a website set up for a business. This puts you miles ahead of just opening a blank screen. That's really nice. And it's something you can hand off to a client. People tend to -- if you're a business owner, there's a really decent chance that you have used WordPress and that it's not terrifying to you, which is less the case when you are trying to hand off something more advanced, something that involves code or if you're trying to get somebody to write markdown. There's a lot of things that can make that an intimidating process for a client or for somebody who's not comfortable with development. Then the other thing that's kind of interesting here, too, is that when you're dealing with a template like this, a lot of times you're trying to get something up online, and figuring out the hosting for some of the headless CMSs can be challenging if they're self-hosted. WordPress has hosted options. It has one-click deploys. It has super locked down things. We're using Flywheel. WP Engine has a completely one-click deploy of WordPress. It's relatively cheap. I don't know their monthly.

ALEXANDRA: It's $25 or 23 euros, I think. It's in the 20s. And as it's headless, we don't need an expensive hosting.

JASON: Right. You don't have to pay for the ultra high-performance CDN or the ultra high bandwidth or extra servers because the people who hit your website aren't hitting WordPress. They're hitting your site that would be hosted on -- you know, you can deploy this to Netlify or Cloud Flare or whatever platform you want and you get the CDN and don't have to -- like, WordPress doesn't have to hand that will load. Jamstack hosts are kind of built for load. They're going to scale for you. So yeah, this is pretty powerful stuff. I'm excited to see what you've been working on here. It's very powerful. It looks like you're doing some really cool stuff. Is there anywhere else you want people to go if they want more resources?

ALEXANDRA: We are going to do more resources because what happens, we have launch on the 30th of June. After that, we have been overwhelmed with other personal work, with clients and all that. For the moment, we have to run everything together. But now we are going to build a lot more things. E-commerce, other platforms. Other themes, you know, for, I don't know, portfolio, agency, cooking, all the common things you can find. So we are planning to do that, of course. So, many, many things to do. And yes, also we are planning to make video tutorials. Paulina will do the writing part, and I will do the video. We're also thinking of do a live show every week with office hours to ask me anything.

JASON: Oh, cool.

ALEXANDRA: Yes, I'm thinking about that.

JASON: And should people follow you on Twitter to get those updates? Where should somebody go to see when those go live?

ALEXANDRA: Oh, so subscribing first. We'll put it on Twitter. Also, we have this support community. We built it on a platform and they can subscribe here too. But yes, first, subscribing to the site. We'll send the info. We have a lot to do, but as soon as possible I want to put that in place.

JASON: Great. Well, I think you've done a lot of school stuff here. This theme is very -- like, this is a great theme. It was easy to customize. I think it gives us a lot of opportunities to build and expand and make it our own. So I'm excited to see how you continue to grow and develop the business.

ALEXANDRA: Yes, I hope that -- one thing, we launched that, and I had a lot of work with clients. But I spent most of my time developing that. As much as I can. I think the product is really nice, so I hope to grow it. That's my idea.

JASON: Great. Well, everybody in chat, you've got a list of links to go and check out. And this episode, as all episodes, was live captioned by Rachel. She's here from White Coat Captioning. Thank you very much, Rachel, for being here. That's made possible through the support of our sponsors, Netlify, Fauna, and Auth0, all of whom are kicking in to make the show more accessible to more people, which I really appreciate. While you are clicking things on the site, make sure you head over and check out the schedule because we got a lot of good stuff coming up. There's no Thursday episode this week because it is Thanksgiving in the United States. I'm going to be eating food instead of livestreaming. But we're coming up next week with Ryan Carniato, teaching us about Solid JS. I'm excited about this one because it does things differently. It's kind of getting into reactivity without a virtual dom. I think that's -- I'm very interested to see how that goes. We're going to get into building our own design system. We've got Georges coming on. Then we're going to look at distributed databases on the Jamstack. That's just next week. So make sure you get subscribed. You can do that through Google Calendar. You can do that by following on Twitch. Or you can always find me on YouTube if you want to watch the replays. With that being said, I think we're going to call this one good. Alexandra, any parting words for the chat?

ALEXANDRA: It was super nice to be there, and time has been flying.

JASON: It really has.

ALEXANDRA: And perhaps I will come back with e-commerce next time.

JASON: Great. Well, it was super fun to have you. Thank you all for watching. We're going to go find somebody to raid. We'll see you next time.