[00:00:00] **Dustin:** On today's episode, we are going to talk about why 2023 is the year of block themes right here on Your Website engineer podcast, episode number 524.

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 as we kick off this new year and we're gonna talk about something that I've just been putting off and putting off, and that is block themes. But before we do that, I want to.

A few announcements, and I've gotta plug in this week to share.

The first thing that I wanna share with you today is something called wpcode.com, and this is part of the Awesome Motive team, and they're the ones that are behind WP Forms, Optin Monster, Monster Insights, et cetera, et cetera. They've got tons of different products that they work on, tons of different plugins in the WordPress space, but this is called WP Code, and this allows you to extend and improve your WordPress site without a bunch of high costs involved.

This is a product or a service, I guess, or I think it's a plugin, but it is a way [00:01:00] to, to easily find and use WordPress snippets. It's a way to organize them. It's a way to, to find ones that have been vetted by a custom developers. And there's a ready library that you can grab from, and it's got custom snippets for PHP or JavaScript or CSS or html.

It's got smart logic. There's a ton of stuff. I'll put a link in the show notes so you can go and look at it. But basically it is a premium service, but it is a way that you can go in and you can use other people's codes for snippets to do things in WordPress. And it's got a lot of cool features.

Again, it's something that just came up this, this past week when I was, uh, browsing and reading news stories on the web. But that is one of the first things that I wanna share you today.

The other thing that is super, super exciting to me and is something that is probably long, long, long overdue. Is Contact Form 7 gets a huge overhaul. So if you've ever used Contact Form 7, it's usually the first contact plugin that's ever installed on your site because it's free and it allows you to get up and running with a contact form. But, It is a [00:02:00] very archaic, it was a very archaic way to build a form.

Basically you had to build it in text. You're creating the labels, you're creating the form fields you're creating. It's, it's not a very good user experience. Now, when it was developed 15 years ago, when it started, like this was a perfect way to do it, but now Contact Form 7 has reached the year 2023 and now has a block section.

You can build a contact form with blocks. Like I said, the developer of the plugin started 15 years ago and he's been slowly making increments in improvements.

It's got more than 5 million active installs and there's hundreds and hundreds and hundreds of integrations and extensions for Contact Form 7 because users found it very easy to build forms with that super simple interface. And so it is gone modern, I guess you could say, and it is now available in the WordPress repository.

The updates are there and it's really, really cool. So that is something that if you're interested check that out.

The next thing on my list today is the team over for WordCamp US 2023 is looking for putting [00:03:00] together an organizing team. So if you are interested in helping out, then this means that you get a free ticket to WordCamp US. You get a couple volunteer t-shirts and you get to go to the, the organizer's

they have like a little, um, reception beforehand and whatnot, and you just get to be behind the scenes of helping and seeing what goes on at a WordCamp. You can sign up to be on the organizing team. Usually there's like a lead organizer for different divisions, and then there's a handful of people that help.

So like last year I was on the organizing committee for the volunteers. There was a lead, a volunteer organizer, and then there was like four or five of us that did miscellaneous tasks. Then we usually met once a month from about four or five months before the event. And then we got to every other week as we got closer and closer to the event.

But the link is in the show notes for you to go and sign up, if you're interested, head on over to yourwebsiteengineer.com/524. And it's got some super simple questions. Basically the, your contact information, your name, et cetera. And then they wanna know if you've been involved with WordCamps before, whether that be an attendee or a speaker, et cetera, and then what roles have [00:04:00] you played at those WordCamps?

And then if you're available to do Zoom meetings like it says once a week, starting in February of 2023. That's probably not 100% accurate. Like I said, it's usually about once a month or so. And then the next question is, would you be able to attend live in Maryland in 2023?

And again, those dates are August 24th, 25th, and 26th in 2023. So that is another announcement today.

The next interesting thing that's on my list is there is a plugin called MailChimp for WordPress, and it's in on sale. You can buy it if you need something to do for 1.6 million euros. It is the most popular MailChimp solution for WordPress, and even though it's unofficial in the fact that it's not developed or affiliated with MailChimp, it's got more than 2 million active installs and has been downloaded more than 42 million times.

And this is a developer who started this plugin about 10 years ago, and it says that the monthly revenue is 36,000 euro. And I thought this is just kind of a really cool example.

This is the main reason why I wanted to [00:05:00] highlight it. Any of us are gonna wanna buy this plugin. But it's really cool that he basically started this because he had appendicitis and then he was hospitalized because of the appendicitis and then extra time on his hands. And then he started kind of building this out and he's an accidental entrepreneur.

And it was, it's one of those cool things and cool stories that the free plugin leads to upsells where he sells premium versions of the plugin. And I believe there's probably some affiliate relationships. So like every person that uses it, they might get a cut from MailChimp when they sign up and they start paying. And so it's kind of a neat model.

I know that I've talked oh, many, many, many moons ago there was a developer on Benchmark Email that basically had their affiliate link or their, their, yeah, it was like an affiliate link built into the plugin. So the plugin was free, but every time somebody signed up and used Benchmark Email because of the plugin, like they got a revenue share so they could offer the plugin for free, and then were just collecting revenue on the back end.

So I think that's something interesting really to think about over the next year or two years, three years, like if you're trying to get [00:06:00] into the WordPress space and want to be more in the service or just have a product instead of working on site after site after site. I think that is something definitely that's really interesting and a, an interesting model that you can think about.

So unless you wanna go out and buy it, there's an article I've linked to in the show notes for episode number 524.

And then the last thing that I wanna share with you today is a little bit about this website or this thing that I'm working on. I know that I alluded to it just a little bit last time.

And it was about the Jetpack for Agencies. And so I'm on a team. It's, it's working on this, it's a 100% React based place to work. And it is something that is really challenging me right now. And I'm, I'm doing some good things and I'm making some progress and I'm excited about the journey that I'm on, but man, it is hard.

But anyways, besides that, there is a something you can go over to jetpack/for/agencies and I, and again, there's a link in the show notes for this, but this basically is a way that you can sign up to become an agency partner. And you can purchase and manage [00:07:00] your Jetpack licenses on a discount, there's up to a 60% discount with our licensing platform.

And basically you can use the power of Jetpack to bring all of your WordPress sites, all of the sites that you are managing for your clients or for yourself. All of the websites that I managed for my wife, et cetera, are all in this, this dashboard. And you can see which ones have plugins that are updated.

Which ones have security incidents like, oh, I. Old, outdated version of WooCommerce that needs to be patched. You get notifications for all this stuff. And it's a really cool one page interface that you can get all of this information, you can update plugins, and we're building out brand new features to do more and more things as the year goes on.

And so I put a link in the show notes so you can see what it's all about. It's free to sign up. I, I believe there is a vetting process, like you have to fill out the information and then somebody will actually like look at it and then contact you and you can be part of this inaugural group going through and starting managing your WordPress sites.

I think I talked about this years ago, but there is a way that you can manage everything through WordPress. If you go to wordpress.com, I think it's slash [00:08:00] manage slash plugins. You might be able to see all the plugins throughout all of your sites that are connected with Jetpack, but it. Is all kind of like wordpress.com branded, even though it's a Jetpack feature.

So that is what the Jetpack for Agencies has been built for. So it's got all the Jetpack branding, it's all like, you know, green and black and looks like Jetpack and whatnot. And you can get started today, which is really, really cool. So that is the last announcement that I have to start today's show.

All right. The plugin that I wanna share with you today is something called Custom Related Post, and this was in the category of blocks. As we're talking about block themes, I wanted to talk a little bit about a block that you could add to your WordPress site.

This plugin is a plugin that will allow you to add manually related posts to any of your pages or custom post types or posts or whatnot. You have full control over those that are linked, and you can choose where they go or how people can see them. So if you do have something like, I mean, Jetpack has the option, or there's other plugins that just automatically add related posts to the bottom of your page. [00:09:00] Think about that. But this plugin will allow you to actually select those articles.

So say you have an article that you just wrote about Disney World and you want to link to other, your other Disney World posts, or maybe you went to Disneyland and that's a separate post.

Or maybe you, you're, you have a cruise that you're going on that's related or whatnot, whatever the case may be, you have the ability to go in and create those links to those things right in a block right at the bottom of your post. So I think that's really cool. It is something that is not a hugely popular plugin. It's only got 3000 active installs, but it is tested up to the latest version of WordPress, 6.1.1.

So I want you to check that out if you're looking for a plugin for custom related posts.

All right, in today's episode we are going to talk about 2023 as being the year of themes. And this is the prediction that I'm making. This is the thing that I think most people are gonna latch onto with this new version of WordPress. So way back in WordPress, 5.9 was when the full site editing themes came out, and that was about the time when 2022, the [00:10:00] theme came out, and that was the very first block theme that was kind of out into the wild.

And as we think about what the future holds for WordPress themes, I think that this is going to be the big thing. We're gonna be talking about these full site editing themes for a long time to come because 2023, the this year's version of the theme is also a full site editing theme, and there's a whole bunch more out there in the WordPress space.

I'll put a link in the show notes for the ones that you can find on the WordPress repository. You can actually go in, search for themes and then then filter by block themes and it. All the ones there but the big ones are 2022 and 2023. And I think that more and more people are adopting WordPress and they are starting out with these default themes, and they're gonna see how easy it is to build an entire website from these themes.

Now, before we ta dive in too deep, I want to talk about some related terminology just to make sure we're all on the same page. When I'm talking about the block editor, that is basically the WordPress editor, that's what we, we see when we try to edit a [00:11:00] post or a page or a custom post type. It's where you can go in, you can add any block to a page, and that's like paragraphs and all the things, you know, everything headings and bullets and all of those things.

Even like there's custom blocks based on plug-ins that you have installed. So if you have WooCommerce installed, you're going to have the ability to add product blocks or feature category blocks, or you can add just a single product or whatever. You can all do that in the block editor.

The Block Editor is kind of in, in three sections or three panels.

The left one is all the blocks that you can add. The center is where you write your content and create blocks. And then the right hand side is where there are block attributes where you can set different parameters for blocks. You know, if you're adding a paragraph block, you can say that if you wanted the top first letter to be a drop cap, they call it.

So a very big letter. Or if you wanted to change the color, the styling, you can do that in the settings panel on the right hand side. So that's what the block editor is.

The next word that I wanna define, or the next term is block themes. And what this is based on the WordPress documentation is a block theme is a WordPress theme, [00:12:00] which templates are completely composed of blocks so that in addition to post content of the different post types, like posts and pages, the Block Editor can also be used to edit all areas of the site headers, footers, sidebars, et cetera.

So a block theme is that it is exactly that. It's a theme that's built up of blocks, and you can do everything that you need in those blocks. You can add more blocks, you can remove blocks. You can create blocks. You can say like you want to. The such and such block to appear on every single page, and then it will show up on every single page.

The next term is site editor, and this is the crown jewel of WordPress 5.9. While officially it's being called will the WordPress site editor. It's basically being referred to as FSE or full site editing. And it is basically the kind of the definition, there is a cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options and more.

There's a lot there, and we're gonna walk through an example here real quick in just a second. So that is the [00:13:00] site editor. And so basically that is like the old Customize area. So if you remember the Customize area and the Customizer is still around. You can still do some things in there, but if you have one of these block themes installed, you're not gonna be able to do much under the appearance and then Customize option anymore.

You're gonna want to go to Appearance and then Editor. And then Editor is got a beta flag next to it, or basically a little notification beside it that says beta. But that is where we're gonna do all of this work. And I wanna say, first off, that I am very novice when it comes to these block themes, but I have a heavy redesign for a couple of my wife sites that I work on on a regular basis.

And so it's like, well, I could redo this with all the legacy code that I have written, the PHP and and whatnot. But it might be a better option to just use one of these block themes. And actually Sensei, which is the plugin that we're using for our courses, actually came out with a theme called Course and that Course theme is a, is a block [00:14:00] theme.

And so I wanted to kind of dive in and figure out how it could be used and how it works. And so yesterday I, I actually started recording this show just with kind of coming off knowledge of what I know about the block editor. And it came off terrible. It was a very, very bad recording cuz I didn't know what, what to even look for and how to use it.

So last night I spent some time going through the editor itself and just kind of figuring out what happens and what you can do within this editor. So we're gonna jump in. I'm gonna kind of describe what I'm doing here on my computer, and you can get an idea of how these block themes work.

So I'm gonna go under Appearance.

I'm going to go to the editor section, and it's going to open up this whole editor experience, and it's going to kind of look like WordPress, but it's going to kind of look like a new experience. And I'll explain it here in a second. So there is a section, there's again, three sections. The left section is what's called them.

It basically says editor, and you can edit the site. You can edit the templates, and you can edit the template parts. And we'll talk about that. In the center is a [00:15:00] post or a page or whatever template that you're looking at. You'll get to see that and design that right there in that panel. And then on the right we still have the ability to edit blocks and things along those lines.

There's some settings, panels, there's a color, that you can make adjustments for and whatnot. But we're gonna go through and look at the site. And so site is pretty simple. It's basically you navigating across different pages of your website and you can customize that. Now the next section is templates. And so templates can be added by the theme itself or by plugins.

So for example, looking at this, this template for this Course theme, it has a bunch of different, it has like single column title only is a Course template. We have a single, which is a default template for displaying a single poster attachment. We've got a page template, we have an index template, we have a 404 template.

We have a wide no feature image, no title. We have a blank. We have a single column, no featured image, no title. There's a bunch of these that templates have added and, and they're basically like the custom templates that we would set up in [00:16:00] WordPress. But then there's also other ones that come from plugins.

So there is a single product page that, that's brought in by WooCommerce. There is a product, search results, there's a product category, there's a product tags, and then those are templates that are there. And then Sensei has a couple templates. There is a lesson, a learning mode, large video or a quiz learning mode, large video that are added and you can customize those as well.

And then underneath templates on the left, and we've got template parts. And so this would be part of your website that you can customize to make it look exactly like you, you want. And this is exactly the same. It says the template, what type, type of template it is down the left hand side of this table, and then the right hand side of the table, it shows what it's been added by.

So we've got the header, the footer, and post meta. So that's like all the stuff that appears underneath a blog post or a page. All of that is added by the Course, which is the, the theme itself. And then we've got the mini cart, which is a template used to display the mini cart drawer they call it. So if you have an e-commerce store up on the top, [00:17:00] there's like a shopping cart icon, and when you click on that, it shows what's in your cart and that is added by WooCommerce and you can completely customize those things.

So just as an example, as we're going through here for the show, I'm going to go into the header and it basically will pull up your website and only show you the header. All that's all you can see is just the header information. On my site here, it's got the logo in the upper left-hand corner, and then it has a menu and then it's got the background of what this whole header section looks like.

And it was kind of confusing at first of how to actually customize this and work through it. And so basically there's different sections. So if you click on the icon or click on the logo itself, it's going to pull up on the right hand side all of the features of that block. And so that is a block for an image and, and basically it's called the site logo.

That's the block itself, and so you can set up different styles. So you can say what your image width is. You can link to homepage, you can open that in a new tab. You can use the site icon. So if you had a site icon set up in WordPress, it can go ahead and just pull that in for there. [00:18:00] You can set the dimensions.

So that's another option in some settings, you can set the padding, the margin around that image, and so you can add the correct spacing that you want. Now, if you click on the menus, you can, basically, it says a page list displays all your pages, so that's which menu it's using. You can switch that to a different menu, and you can say that this is the menu that we want to use on this page.

Now what's confusing and where I didn't quite understand in grasp the concept was sometimes these themes come with different color schemes and there was nowhere I could figure out where you could pick one of these other color schemes and start customizing it. It was until up in the very upper right of this new full site editing mode, there is a, it's a circle and then half is filled in.

So like the left half is filled in, the right half is empty, and it's just a circle, and that's where the styles are. So if you click on that, it gives you the option to browse the different styles. So it shows that there's four different styles for this particular theme. So you can pick one of those. And then you have typography, colors, and layout [00:19:00] sections.

So if you go to the typography fee section, you can say what, what type of font that you want for your text, what you want for your links, what you want for your headings, what you want for your buttons. You can click and you can customize those. You can, you can make 'em as crazy as you want.

You can make 'em as boring as you want. And then there's colors. And so the colors do background text, links, headings and buttons, so you can customize all of those. And then the layout has the ability to set dimensions of the main content area. So if you want the content area to be 1000 pixels wide by 1200 pixels long, you can do that.

You can say what the, the margins and the padding are on each side, and do all of the layout there. And then you can also customize what blocks show up in this area. So if you wanted to have a audio button in your menu, you could drag that in. If you wanted to have a cover image that was in there, you could do that.

When you're in the style section and you click on blocks down towards the bottom, this will actually customize things for your whole site. So if you type on the the social icons, you'll get the ability to select the colors, and [00:20:00] so it will have a palette of 19 different colors. That's what this theme has.

And then you can set what the background color is that you'd like for your social icons, or if we go back to code snippets. You can say what typography that you want, what colors you want, what line spacing that you want, the layout that you want, how many, how much padding do you want on each side?

And this is where you set it up to be the same for everything on your entire site. Which I think is really neat. It's one place that you go and you kind of customize it and then it's gonna show up everywhere. And the cool thing about full site editing is that it shows up the the right way, both on the back end where you're editing and on the front end where your visitors are seen.

And so both places is gonna have exactly the same thing, which is really valuable. And it makes this development or it makes building things so much cooler. I've been working on a little bit of a project myself that on this specific site that I'm working on is the continuing education website for my wife, and I wanted to show that there's a speaker for each of these sessions that are recorded, and I wanted those to show up on the [00:21:00] dashboard.

Like, so somebody sees the video, they see who's speaking, it's got all their social links. I have all of this information programmed. It's already saved in a custom post type for the professor itself, or the, the speaker, I guess. And I wanted to be able to have a, basically a dropdown menu that says like, pick the speaker, you pick their name, and then it shows their picture, it shows their title, it shows all of their social icons all in one kind of like square box.

And then that way if somebody is interested in, oh, the speaker is really good, I wanna follow them on different social platforms, they can do that. And so I could have built a widget or a short code that just exported and shared all that information, but building it in a block, in a JavaScript block, actually, it gives me the ability to see that on the back end, and I can see it on the front end when I publish.

And so that's what this whole experience is all about when it comes to WordPress. So I am really impressed on what you can do here in how you can customize a theme. I think next week we can talk about how save some of those custom colors, you know, is, is a child theme [00:22:00] really what you need to do when it comes to creating different color schemes for a theme like 2022 or 2023, what exactly does that look like?

So that's what I'm gonna be exploring over the next week, trying to figure out and trying to learn how this new technology works. Cuz I feel like I'm way behind the scenes. This, this has been out. Probably eight months or more. Plus if you count the betas and whatnot. It's been out for more than a year, and this is the first time I'm actually like stepping in and trying to figure out how it works.

I'm a little ashamed, I have to say, but I have been really busy with learning different aspects of PHP and then how to build blocks and now how to program and React. So there's been a lot going on, but I think this is the, this is the year 2023.

I think I should take dustin.blog. Turn that into 2023 and just always keep that as the the newest theme that's out there. And then just take some time learning, figuring out how this works and build some themes with these full site editing themes.

So that's on my plate for 2023. I've got a lot of website work to do on top of all of my stuff that I'm learning for development. What's on your plans for this year? Are you [00:23:00] looking to kind of get into this world? Are you looking to start an agency or to build websites for clients? Let me know. You can always send an email to Dustin@YourWebsiteEngineer.com.

Let me know what your plans are and what you've got going on this year.

I'd love to hear what you're doing and excited for this year. Excited to see what we can create in WordPress itself over the coming 12 months. That's all I've got for you this week. Take care, and we'll talk again soon. Bye-bye. For more great WordPress information, head on over to your website engineer.com.