[00:00:00] **Dustin:** On today's episode, we are going to talk about how to create a child theme from a block theme right here on your website, engineer podcast, episode number 525.

Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and I'm excited to be here with you today because we are talking about WordPress and we're talking about what I have with Full Site Editing themes. Today, I've got a couple announcements I gotta plugin to share and then we'll dive into the main topic.

The first thing that I wanna share is a, a video, and this is, there's a link to this in the show notes. It's an 11 minute long video. It is done by Anne McCarthy, and she is the one that did a, a review of how to build a website from WordPress 5.9. to WordPress 6.2, even though WordPress 5.9 was only released one year ago in January of 2022, it seems like ages ago, with the advancements that have been made to building sites over the past year.

So there is the video, like I said, it is a YouTube video. I'll link to the [00:01:00] WT PA Tavern post where it has this video embedded and you can see exactly how the differences are, and it's really, really cool to see how much progress they've the, the WordPress development team has made in just one year. And so this hopefully also will give you some ideas of what we've been talking about with the full site editing theme, cuz you can see some of that edits going on in that video.

So definitely check that out in the coming week.

The other thing that I wanna share with you today is all about Gutenberg. And Gutenberg, as you know, is what we, we typically say is the block editor. It started out as Gutenberg, and this was a plugin that they developed so that they could bring this block editing feature to the WordPress space without impacting core.

Well, in WordPress 5.0, which seems like ages and ages ago, they rolled Gutenberg into WordPress core, and that is what we see when we edit a post or a page. Now, Guttenberg continues to be developed because they keep adding new and new features, and then those features are brought into WordPress core at the appropriate time.

But you can install Gutenberg as a standalone plugin and get some of these [00:02:00] changes immediately, which is pretty cool too.

So Gutenberg 14.9 has some new magic. It says you can push block changes to global style. So I talked a little bit about this last week, but when you are editing a WordPress full site editing theme, you can go in, you can change the header, and you can change the footers, and then you can change those as global settings.

Well, now you have the ability to make some customizations and push these block changes to a global style. Right now, if you do some customizations on a post or page, That is going to stay exclusive on that post or page, but Gutenberg now adds a new button it, it is under the advanced tab on the right hand side underneath the block, and you can push these changes and push these styles to global styles.

And it is important to note that this only works inside the site editor, I guess. So it's not part of the post and pages, it's only part of the site editor. And this gives you a way to quick update blocks across all your site without having to manually edit each and every template or figure out the right CSS to apply.

So that is pretty cool. There's also some [00:03:00] new theme features that are in a Gutenberg of 14.9 and it gives you the ability to add some drop shadows and things to buttons and borders and things like that, which is pretty cool. So they'll be a link in the show notes for episode number 525 on some of these improvements in advancements in Gutenberg.

I think it might be worth installing. If you are still playing with some of those block themes and you're trying to, you know, get your website to quite what I would call the next level, or continue to use those advanced features, I think that using Gutenberg in addition to just the, the block editor that we have is a pretty good idea.

All right. The plugin that I wanna share with you today is called Pagebuilder Gutenberg Blocks Co Blocks. It's got a huge long name. It's by GoDaddy. It's got 500,000 active installs, but this is a huge collection of page building WordPress blocks for the new Gutenberg block editor.

I'm not sure if we should still say new because, well, it's not super new, but you can do a ton of things. So remember, WordPress out of the box comes with blocks. Then you can add [00:04:00] blocks, and so that the blocks. Bullets or headings or just regular text or numbered lists or whatever, and there's a ton of 'em built in.

And then if you add a plugin like WooCommerce or Jetpack or any of those plugins, like any, a lot of plugins in the WordPress repository will add custom blocks. So you can do custom things. Or the other option is you can actually go in and you can add a plugin to add more blocks. . Um, so this one says that it has 50 more than 50 different blocks that you can add.

So if you want an accordion block, so that's one of those like FAQ things where it has the question and then expands down with the answer. That's an accordion block. It has an alert block. So if you wanted something to pop up on your page, that's an alert block. You can do an author profile block, click to tweet, FAQs, events. I'm not gonna read 'em all cuz there's a ton of them here, but you can find the details for this plugin in the show notes for episode number 525, or just search for CoBlocks on the WordPress repository and it'll pull right up.

This isn't the only block plugin that's out there that adds more blocks, but this is definitely one that's got a lot of[00:05:00] steam behind it, and it has a lot of people that are using it. So I would recommend checking that out if you just feel like you're missing some blocks on your WordPress site.

All right. Let's go ahead and talk a little bit about WordPress Child Themes and what they are. I guess we need to start at the high level and what is a WordPress theme, and the theme is basically just the visuals that make your site look like it does, right? There's two pieces of WordPress. There's the, the backhand side, which holds all your data in a database, and then there is the front inside the visuals, the pretty stuff that users see when they are looking at your website.

And so what we do is we, we typically go out and we will find a theme, whether we go to the WordPress repository to find a free theme or if we go to like a, a marketplace like theme forest, or maybe we'll pay a custom designer to build something exclusively for us.

There's tons of different ways to get a theme, and again, it's all just the visuals because you can change those immediately by switching to a different theme. And so that's kind of like in general what the theme are. It's WordPress gives you the ability to have your presentation level separate from your content so you can easily switch and [00:06:00] change and, and I don't know how many site revisions Your Website Engineer has gone through over the years and all my other sites, it seems like every few years it's like, oh, it's time to get a new theme.

It's time to, you know, work on my site or whatnot. So that is what a WordPress theme is, and that those are typically called parent themes if you are buying them or getting them somewhere from some sort of marketplace or on the WordPress repository or whatnot. So that is what a, that's a parent theme, is essentially a complete WordPress theme.

It's template files and assets, all the assets required to make the theme work. And when, so a child theme is a sub theme that inherits the look, the feel, the functionality of a parent theme. You can install it like any other theme, but it relies on the parent theme to control its functionality.

For example, if you wanted to customize the 2020 theme, you could create a 2020 child theme, and so then you can make customizations in that file. You still have to have both of them installed. You have to have 2020 installed, and you have to have your 2020 child theme installed. The cool part is about a [00:07:00] child theme is you can make modifications to the child theme, and they are kept separate from the parent theme's files, so any modifications that you make to the child theme will take precedent over the behavior of the parent.

Which is really nice. So if I wanted to do some styling changes or, oh, on these pages, I don't want to have this data displayed. I can go in and I can edit that in the child theme, and then the child theme will, that's the theme file that would be built when the page is loaded.

There are some, some benefits, of course. Like I said, you can make the customizations that you want. You can modify your, your theme to make it look exactly the way that you want. When you use a child theme, you are not modifying the parent themes files, and so when a theme update comes out, you won't be locked into keeping the old version of your theme.

Say for example, that you are using the Storefront theme now. It's a WooCommerce theme made by Automattic, but you use the Storefront theme and then you make a bunch of edits directly to the storefront theme. You're changing colors, you're [00:08:00] changing layout, you're doing all these things, and then all of a sudden it says, oh, there's an update for Storefront, and you click the button and poof.

All of your custom changes are completely gone. They're all erased because the entire theme is basically when a theme updates, it kind of like deletes the files that are on your server, and then just reapplies them and, and puts the new ones there. And so all of your changes in your custom customizations are gone.

But if you had used a child theme, that child theme would set alongside the Storefront theme. And so the new version of the Storefront comes in. Okay, perfect. And then you have your child theme. Perfect. And then all of those things, all of the customizations, all the changes, everything that you did are now sending in that.

Theme on your server, and they've never been touched, they've never been modified or whatnot. Now, there could be some, some tweaks. You know, maybe sometime a parent theme might have renamed a class or redone a function or something that yours doesn't work exactly the same anymore. But those are small, little nuances that you can go in and fix versus like having a completely site me erased because you updated your theme.

Now when I've [00:09:00] talked about this in the past, I've talked about how to create a child theme, and in general you had to have two files. You had to create a file that had a style.css, so you had to have a functions.php file, and you had to put some data in there just so it would load as a child theme.

Now, things are a little bit different now that we are using and talking through a full site editing theme because honestly, there is not much data in those themes, in the theme itself. And so I, I reached out to one of the folks at Automattic that work for Team 51, which is the team where they, they build websites for, for big name influencers to try to get WordPress through 51% of the web.

That's where their name came from. But they're the team that's in charge of like Seth Godin's blog, moving him over from, I, I forget where he was before over to WordPress and somebody like Tim Ferris, like their website is on there, and just some big name people that we have taken the initiative to reach out to and then build their sites in WordPress.

Anyways, I wanted to ask him, how, how do you make a child theme or, or child themes even a thing with full site editing themes? And he [00:10:00] basically said that with the magic of full site editing, you can quickly build themes with little to no coding.

And here are the steps to build a new theme using the full site editing mode. So you first start by installing the theme that you're gonna start with. So whether that be 2023, whether that be 2022, those are the two that are block themes, from recent WordPress releases, or a whole slew of them that are out there that are block-based themes.

You basically install them and then you have to install a plugin called Create Block theme plugin. And so you activate that plugin. It's another plugin on the WordPress repository that is built by the wordpress.org folks, so that's all good.

They're the ones that created this. But basically, you go in and you activate this plugin, then go to appearance, and then create block theme in the WP admin. So then you'll choose, let's say for example, we're gonna use 2023 as our base option, and then we'll choose Clone 2023. And then you fill in the new theme details, and then you click on generate.

And it is to be noted [00:11:00] that when I tried this on a local install of WordPress, so like running with Local by Flywheel, it didn't work. For some reason, I couldn't generate this new clone file, but I could, if my ho my site was hosted on Pressable, I could just go over there, I could install the plugin and I could generate it.

Just no problem. So I'm not exactly sure why that is. But that's one nuance that I came across. So you install the clone theme and you activate it, and then you start building out your theme. In the site editor, you can modify your templates, your template parts, your settings, your colors, your typography, all the styles that we talked about last week, and then from time to time, go back to the create block theme settings page and save your changes.

And then using to overwrite whatever you named your theme option, and you'll write the changes to the theme files. And that is basically it. And that's what you do. It's really neat. And the fact that you can customize everything from the dashboard and then you can rewrite those settings back into your quote unquote child theme.

And then you can essentially, if you wanted to, like say for example, like you have some very standard colors that you use and you build a lot of [00:12:00] websites that are very similar or you know, there's something that you want to do repeatedly. What you can do is you can create this, you know, customize it once, create the clone of the block theme, and then save the options, and then download that theme and then start building from there.

So I think that's pretty neat and it's pretty cool what you can do. The other thing that you can do once you have this theme created, and I don't know why you do this. This is kinda the way I was experimenting with it a little bit, but I was able to go in and when you're in the full site editing mode over on the colors panel, you can start putting in your own colors.

Like, oh, the primary color is going to be blue or red or green or whatever. Like, you can pick that from the color picker, but you can also open up if you're developing locally. What I did was I opened up vs code and I opened it up to that clone theme that I had created.

There's a file inside there called the theme.json file, and it basically contains all of the data and all of the information for your theme. So you can go in there and you can say what these base colors are gonna be. Like you can set it to be base or contrast, or primary or secondary, tertiary.[00:13:00]

You can go in and you can actually paste in those colors. Like say you work with a design team and they give you all your primary colors, your secondary colors, all that kind of stuff. You can go in and you can save those in your text editor, and then you can refresh and WordPress, and then those colors are already there.

So it's really neat in the fact that you can preload all the colors that you're ever gonna want into your theme. You can either do that via the theme.json or you can go and do that in WordPress and then save it and then clone those and then those will clone in right back to the theme.json file.

So I asked if there was any reason, should we be concerned about like what happens if Twenty Twenty Three updates, you know, like we've been talking about in the past. And honestly they said that it wasn't too big of a deal, that it probably wouldn't happen. And since the theme is basically just laying out a bunch of blocks.

There's not gonna be a lot that's gonna happen inside of a updated theme. The entire code base is essentially like styles.css, which is completely blank, and then theme.json, and it basically goes through and tells you, [00:14:00] sets up the schema, the version, the custom templates, the settings layout, spacing, so basically it says like what all the spacing sizes are for different things.

It says the units, it has typography, so if you want a different font faces in there, you can add those. It's just a bunch of, just like JSON is just a, an area to fill in a bunch of settings. There's really no like custom templates. So then when it looks like when you go into and look at the templates, The 4 0 4 template, the 4 0 5 or the 4 0 5, that's not a thing.

The 4 0 4 template, the archive, the blank, it's basically just an HTML template that is defining what that template looks like. So if I look at the 404 one, it basically just has a main class. And that's it. If I look at the home, it, it has a few more things. So it has a a, a WP Block group, and then it has an align wide, it has a block query, a bunch of different div tags to kind of allow you to make up your homepage.

And so it, it seems like there's never gonna be a reason for like, vulnerabilities on like a security issue because it's all [00:15:00] html. There's no dynamic content whatsoever in these, and the whole thing is built off of html.

The recommendation from my colleague was to just basically pick the one that's got the closest layout and the closest things that you're interested in, or that's the, what you're visioning for your website.

You clone it with the, the plugin that I talked about, the the create block theme plugin. There's a link in the shown. It's for that. And then from there you then you start customizing it, save and overwrite those to this brand new, created like a block theme. And essentially this child theme is not really a child theme.

It's actually a brand new theme on its own, so then you can get rid of 2023, for example. So kind of a click baity, like how do you build a child theme with a full site editing type template? You don't really, there's no way to create a child theme there. You're basically cloning one and then creating your own theme on top of it.

So it makes your WordPress dashboard a little bit cleaner, a little bit nicer. You only have to have one theme in there. And so that's kind of the process that I'm going through right now is customizing and [00:16:00] setting up those things. Okay. What. Where are the fonts? What, you know, what fonts get those custom fonts in, or what fonts do I want?

And like all of just the, the, the setting up of like taking content from my old theme to my new theme. And that's the stage that I'm in right now. That's what I wanted to share with you today. I'm excited about Full Site Editing and all the things that come with it, and I'm excited to continue to learn and continue to, to share my knowledge on this show with just all the things that I'm learning and the things that we're, I'm learning to make WordPress sites easier, better, faster, smarter, cheaper, all those things are gonna be things that we'll explore in 2023.

That's all I've got for now. Take care and we'll talk again soon. Bye-bye. For more great WordPress information, head on over to your website engineer.com.