Site icon Hip-Hop Website Design and Development

Press This: Gatsby WP Themes with Alexandra Spalato

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

David Vogelpohl: Hello everyone and welcome to Press This the WordPress community podcasts on WMR. This is your host, David Vogelpohl, I support the WordPress community through my role at WP Engine, and I love to bring the best of the community to you hear every week on press this as a reminder, you can find me on Twitter @wpdavidv, or you can subscribe to press this on iTunes, iHeartRadio, Spotify, or download the latest episodes at wmr.fm. In this episode, we’re gonna be talking about something pretty exciting and that is Gatsby WP themes. And joining us for that conversation is the creator and founder of Gatsby WP themes like to welcome depress this. Alexandria Salado Alexandria, welcome.

Alexandria Salado: Thanks for having me.

DV: So glad to have you here today. Now your your Where are you calling in here for for this show today I Alexandria.

AS: Spanish island of Majorca. Balearic Islands, your visa and it’s a really nice place.

DV: That’s fantastic. I have to make it there. They have heard of a visa. I’ve never been there actually myself. Heard. It’s very beautiful in the areas. That’s awesome. Thank you for joining us here. For everyone else listening. What we’re going to interview Alexander about today is her Gatsby WP themes. Her thoughts on the value of headless WordPress in general. How WordPress developers are overcoming barriers to entry into headless WordPress. And of course, how her Gatsby WP themes are playing a role in helping with that. Well, Alexandria, I’m going to ask you the same question I asked every guest press this, but could you briefly tell me your WordPress origin story? When did you first use WordPress?

AS: Okay, so I began with WordPress 10 years ago, before that, I had no experience as a web recording or whatever. So that was my entry point. And it was great at this time I was using WordPress themes not coding and then went into CSS and then creating custom themes. I learned custom themes with the courses of sand corner and it’s really fun because we began Gatsby web team with Zack a few years later, but it was really my my teacher we didn’t know each other my teacher online. Then I integrate caliber team and and I was really specialized in coding themes from scratch, so people were sending me that design and I was doing WordPress Heigen WordPress theme, elaborate backend from them using a lot of HTML and things like that. And then when they say, Okay, I want to do more things. I’m predictable. So I always need to, to explore new territories and things. And so I decided to do JavaScript first that would come in Barcelona as it goes into southern 18. And this is where I, I learned react and after that I was searched for new things to do. And this is what I discovered Gatsby. And that prepares me to build to port some free theme from WordPress to get visual within just the 2019 10s and tabber themes. And and we can specialize in this niche WordPress and Gatsby headless WordPress and naturally JP accom for making premium themes, of course,

DV: also sounds like you’ve made your journey around the WordPress space. If we could wind the clock back though, do you say years ago is the first time you use WordPress? Yes. And you said you never built sites or coded before what was the reason why did you use it for first time?

AS: I think I was searching I begin with some HTML templates. And I’m a creative so I was really liking that. I never thought I would end up coding to be honest. I was reading my blog. And I think your friend showed me WordPress themes and I realized what I can do with that and I discovered this now I really don’t like working with builders. But when I was beginning it was it was magical. And yes, I begin I began with that and it was great because it allows me to stretch myself. I wanted to be a freelancer and I didn’t need to be employed, even if I didn’t know how to code. I will say to get a theme and delete it for clients because I was working for an agency editor that I have been able to stretch myself alone which is not possible. I think if you start by coding from scratch, it can be much more complicated. So it was really, really a godsend to discover workers and systems.

DV: Awesome. So you’re scratching that creative itch by getting into the lab there 10 years ago, which opened up all these other ventures that you mentioned, though, that you started this new company, I guess Gatsby WP themes, and you’re offering WordPress themes built for headless WordPress? Is that is that the gist of what you offer? I mean, tell me a little bit about what you have going on with Gatsby WP themes.

AS: Okay, so first of all, when we are offering WordPress Gatsby themes we’ve been using WordPress so basically is the meaning of endless it’s the back office to WordPress or the back office that everybody loves them. And we have 14% of the web on WordPress, but from is the couple and Gatsby versus the future. will we do with next year’s I don’t know for some moment I forgot some Gatsby verbs also we will extend to other platforms and WordPress was the backend. But that’s the back office in WordPress and the front in Gatsby basically in react in order to have all these advantages of speed security, SEO, and and many, many, many advantages.

DV: Yeah, so like on the advantages side? You know, I think people have kind of gotten the message you know, there’s speed and security benefits with headless architecture. And I know that there’s still the majority of developers in the WordPress space anyways that aren’t building with headless right. In your view, why should a traditional WordPress developer make that leap and learning how to build with headless and then I guess the second part of that question is, do you think if you’re a freelancer agency, there’s there’s clients out there to sell these types of builds to today? So again, like why should someone you know bother making the leap and learning it and then how do you think that might impact someone with a freelancer agency business?

AS: so yes, Zetlin digits, our speeds website are super fast, we change pages instantaneous. From there, we have SEO because now we go about the core vitals. So SEO is directly depending on speed. So speed is basically the new response here. Like, you know, at the moment, it was generating sites that are not responsive now it’s been everything’s sites that are not fast enough. Flex gives more flexibility because we can take the data from WordPress and build the different things. And of course security as the database is not in the front. So hackers can not have hydrilla basic and AdWords again, defaced the face. So the website which can fix it, a minute after your WordPress website can be can be down and ended front your website will be up. So that’s a big advantage. So from from there, I really think that the stock jam stack in general is the future and it’s becoming very very hard. So a lot of I think it was in WP Engine that there was a report that 64% or something like that of enterprise websites are already on on non decoupled on JAMstack headless, so I think, yes, especially growth opportunity for freelancers and agencies that are basically our target. Our themes are more oriented to agencies and freelancers and to meet yourself people even if you miss it, any people can can use it, but I think our clients are more CC’s type of people because I think there will be more and more websites which are which still use traditional WordPress and we want to go headless, and then this developers will be able to take this website and transfer it because people’s and will not have to learn a new back office to their teams that will not have to transfer the data so it could be a big advantage to us.

DV: If I could try to summarize that it sounded like kind of the traditional benefits of headless right speed, performance, security, the SEO implications and other implications of this kind of benefits, but also the future. He kind of pointed out that the enterprise necessity for WP Engine illustrating that many enterprises that already adopted this technology, and of course, they will often be the early adopters. It sounds like the idea is to get ahead of that. But it also sounds like there there is a demand today from companies building as this experiences so it’s not all experimental. And actually there are there’s clients you can win as a freelancer agency building with WordPress, in a headless capacity also, like how you pointed out the aspect of you know, leveraging a back end that these brands are familiar with right? Being able to embrace the new technology around decouple JavaScript without forfeiting the convenience of the interface that your content creators know and love. So that sounds like is that a good fers? Like high level recap there?

AS: Yes, I think so. It’s so we are just at the beginning of the headless insurance and to present showing the way but positioning ourselves now is a good moment because Oh, yes, there is no no work now. Yes, but we’re gonna be working are going to be crowded and that’s a forward leaning position then.

DV: Exactly. Okay. So I want to talk to you about that forward, leaning hard, though. But we’re going to take our first break and we’ll be right back.

DV: Hello, everyone. Welcome back to press this WordPress community podcast. VMR This is your host David goalball. And interviewing Alexandra of Gatsby WP themes about her headless focus WordPress themes. Alexandra, before the break, we were talking a little bit about your thoughts around why developers should think about starting to build with headless talking about the kind of core benefits of headless but also that kind of future leaning aspect of kind of getting ahead of the curve and taking advantage of opportunities for brands already adopting headless particularly in enterprise. So I’m curious though, like as I think about I ran on, you know this but I ran a WordPress agency for five years. I’m very very familiar with choosing technologies in the context in like one of the barriers of course in adopting new technologies is like we’re using this stuff over here to get work done in the the work is getting done. So you have this kind of adoption curve of like exploring something new starting to build with it. In tools are a big part of helping people get there and I know your Gatsby WP themes play a big role in that, but I’m curious like what other I’m gonna talk to you more about the answer in a minute. I’m curious what other plugins or frameworks you’ve used in your own journey to learn to build decoupled JavaScript with WordPress.

AS: Okay, so, WP graph. QL of course, is the center of all that, and all the plugins that are built around it and that will be built because the community is very active and we have new plugins all the time and more than will be people will be plugged into WP Graph QL and most adoption will be easier

DV: to the audience for those unfamiliar like what WP Graph QL does just just super high level.

AS: Okay, so depending on what WordPress as a REST API and WP Graph QL has built Graph QL API on WordPress, which has been beaten by Jasmine Bowles that was working at Gatsby as assignments at work as WP engine now and but it helps to connect in a really nice way. WordPress with Gatsby next Val to view any other headless JAMstack framework or simply or even pure react. And so it’s this WP graph. QL getting better and better thanks to Jason and it’s open source and many developers are building plugins around data one that I use a lot is WP Graph QL. ACF because it allows me to use ACF that was my number one plugin in the traditional WordPress. And so now I can use all ACF and flexible content in in Gatsby in headless mode and that is great.

DV: That’s such a I’ve asked this question a few people over the years he has headless and started to come on the scene and I’ve never it’s kind of a nice like pathway right? It’s like building these kind of traditional ACF pays WordPress sites. And then I’m going to use something like Graph QL for ACF or you know, in general, as a bridge as part of my bridge, start building with headlights on I’m not sure I know there are tons of developers out there. We’re probably either undergoing that same journey or thinking about the same kind of steps that was really helpful. So I want to kind of shift gears now unless they’re like, is there some other killer tool or framework you find helpful for for the transition who I mentioned?

AS: Again, can plug in for yours. So yours is and we have a Gatsby plugin citation data from the WP Graph QL years to implement SEO directly in the in the Gatsby theme. So that’s super handy because everything is prepared. To be SEO ready and well done. Yeah, certainly all those spirits and everything in mind. We will stay with the Lord. So then what is great is WordPress and it’s working Gatsby.

DV: So but it’s interesting to see more and more plugin developers you know, adopting the headless use case and seeing you know that investment there from yours is I think a good thing. I know they’re my recommended list for headless sem for sure. So let’s kind of shift gears a little bit and talk about your Gatsby WP themes help you understand how they’re different than a traditional WordPress theme. Like what? You know, obviously, I think the listeners of the show are largely familiar with traditional WordPress themes work. But how does the Gatsby web it’s different?

AS: Okay it’s very different because naming themes is not the same thing with WordPress and gets been WordPress theme is mostly presentational and the functionality are meant to be more in brackets. In Gatsby a different theme can be a set of plugins can be a configuration. And now specially we are what we have done is in in a theme, we put for example, set of we put the functionalities of things we want to reuse across different different what we call starters. So the project is it’s a starter, and that’s where he brings the stylings the presentation finally, in the first version of the theme, we were doing the same also with also two component style but we realized not a good idea because if you want to change it you have to pass what is called Shadow budget. You have to copy the component and change it so they okay that’s complicated. So we have keeping the team only what needs to be updated and share across difference in for example, comments, search, comments, a theme search and from there you can in the starter we import the search bar or we import the comment so it’s it’s a different concept in in Gatsby we have a theme and plugins or we create now with for example with ACF elements, some HTML blocks that will not be side end, there will be styled by shallowing inside the starter so I can reuse them across many themes.

DV: Is this construct of themes containing functionality isn’t this part of like the root basis? For what headless is where more of that functionality is handled on the front end? And it’s it’s more of an API relationship to those backends?

AS: Yes, I think so. Yes, it’s for APA style. Yes, we take a female game embodies this component of this functionality from this theme and I can mix Yes Also we can mix several themes together. So there is pregnant themes in Gatsby are quite similar in a way.

DV: So I think for WordPress, like one of the big battles in WordPress like you said it earlier is like themes are supposed to be the front end and plugins are supposed to be the functionality. And of course, tons of theme developers incorporate functionality into their themes without any plugins. So this feels like this was like a path a lot of theme designers probably wanted to take but you know, maybe did take but really weren’t quite unquote supposed to in the traditional WordPress, is that a fair assessment? Can you repeat the question? Yeah, so you mentioned earlier how the WordPress construct functionality in themes is not really what you’re supposed to do. But of course, we know theme developers will add functionality to their themes directly to the theme files, and helper plugins. And so what I’m curious about is with Gatsby WP themes, if that desire to include more functionality in your theme as a theme developer is kind of in a way realized with the architecture of Gatsby web themes versus traditional

AS: I think there are two different things so yes, putting push it in theme in the WordPress is not a good practice. I think plugins and I think is a naming themes. It’s there are two different things in the book to talk to WordPress users. They have more to think about Gatsby themes as plugins we are doing, for example, to do an E commerce theme but basically we bring ecommerce functionality. And when we make new components, and we style them in the starter and thinking about the status or field but the starter we will not be updated, like your child fields, for example. So I think it’s naming is confusing because I don’t represent the same thing but they are more similar to Plugins. Themes. You can do presentational elements and you can put functionality so you can group configurations in into Gatsby themes, and you get a shadow.

DV: That’s very helpful description because I think a lot of people would assume it may be more coming from WordPress space anyways, they were inclined to operate like a WordPress theme does today. But I think that’s a really, really good point of distinction. Thank you for kind of detailing that I was actually okay helpful. We’re gonna take a second break and we’ll be right back.

DV: Everyone welcome back to press this the WordPress community podcast on W EMR. This is your host David Bowie Paul. I’m interviewing Alexandra Squanto of Gatsby WP themes about her Gatsby WP Bates. Alexandria right before the break we were talking a little bit around the differences between the Gatsby WP themes and kind of a traditional WordPress theme that was doing a little research before this interview and I saw on your site for those interested Gatsby WP themes calm that you kind of mentioned that the themes don’t really require coding skills, but as I started to look through some of the implementation details, it seemed like it did require some advanced technical skills to get up and going. So I’m just curious, like, who you think the ideal user is? Or like the lowest level tech person you think might be a good fit for Gatsby web themes? And then if you think like in general if this notion of like assembler or DIY, headless will really be a thing in the future, because it feels like it’s not that right now. But what are your thoughts on that?

AS: Okay, well, first, it doesn’t require very advanced technical skills, but I think it’s more psychological. Because if you follow the documentation step by step. Most complicated brackets, study noted Geat Gadsby on the computer. So it’s I think it’s more complicated on Windows because Windows. There is now a console where I’m a Mac user. That is not so complicated and then not being afraid of opening the code editor of opening the console. But above that is just copy paste and I have been shown again, learn with Jason in 10 minutes you have everything up. But I think for some people, psychologically they can be afraid of seeing code and console. Many people are like like that. It’s complicated, but it’s not it doesn’t need skills.

DV: So if you’ve overcome your fear SFTP you can overcome your fear of setting up an environment with a gap. Exactly.

AS: That’s a good example.

DV: I gotcha. I gotcha. If you’ve opened up a code editor and use code snippets you you’re probably okay walking through the setup instructions. So like WordPress, most WordPress freelancers will probably be okay leveraging this

AS: Absolutely. Especially I think about it has been an inspiration studio present Genesis. I was really a Genesis developer before.

DV: themes. Are you familiar with him? He’s also located in Spain. Oh, yeah. Talk off air.

AS: And so yes, I’m working with Genesis and it was nice. And I realized that people from Genesis was this website griefers. Free that is common goals is recipes. And we are planning to do that to do tutorials to show you can do that. You can do that and you can copy the code and explain how it works. So people like even if they are not called experts, but they like to have the hang a little bit dirty and do things they will love that. I think it’s really really great Frances public is they want to modify the same with taming the CSS and and apply some recipes that we’ve built because we are preparing a lot of things now. That can be really nice and any people can he’s not afraid can be can take their blog and and have it up in Gatsby easier not afraid about all that. But yes, basically what I realize it’s most of our clients are developers, even web developers, that doesn’t come from WordPress. I had I had two cases people that come from WordPress and people that come from react that don’t know WordPress. So yes, it’s so people that come to buy the themes are more agencies developers freelancers. But realize microkey space we have a coop and Cisco has made his website in HTML and CSS and is interested so it’s so there is a people that are not in this field and that can totally use it. If they even say like, it’s not a barrier. It’s not it’s totally open. That’s what I mean.

DV: Yeah, that makes a lot of sense. And I think that’s one of the things that you know, headless WordPress or just in general hasn’t realized yet is, you know, bringing these bridges from the technology further down the sophistication stack, right, starting at the very sophisticated developers coming down into less sophisticated getting into the assembler, or code snippet culture, and then maybe eventually DIY, but like, you know, WordPress, fulfill this role. For PHP development in website and application development since the very beginning, and so to see it now playing a role in tools like Gatsby DVP themes played a role in bridging those gaps. It’s interesting to see how that will contribute to the adoption of headless long term and I agree with you, it is the future and luckily, there’s lots of contributors that are helping to make tools to make that easier. This was super interesting Alexander

AS: I realized WP Engine will bring a solution to make as entry viral easier.

DV: Yes. Actually, in q1, we will be releasing some more things that will make it we have Atlas content, modular house JS Right now, which are three of open source. We have some other stuff coming in q1. We’ll talk more about that later. But thank you for reaching that. Thank you for joining us. Today. Alexanderia. This was really interesting to you. If you’d like to learn more about what Alexander is up to please visit GatsbyWPthemes.com. Thanks, everyone for listening to press this WordPress community podcast and W Mr. And this has been your host David Vogelpohl. I support the WordPress community through my role at WP Engine. And I love to bring the best of the community to you here every week on Press This.

The post Press This: Gatsby WP Themes with Alexandra Spalato appeared first on Torque.