[00:00:00] **Dustin:** On today's episode, we are going to talk about how to create a pattern in WordPress and if you have a website that has a very repeatable content, maybe like show notes for a podcast like I have or just your blog posts follow a similar style than a pattern and setting those up is going to be perfect for you.

We'll learn all about that on today's show, right here on your website engineer podcast, episode number 538.

Hello and welcome to another episode of your website engineer podcast. My name is Dustin Hartzler and I'm excited to be with you today because today we're talking about patterns and I've been using patterns quite a bit in the last week or so we'll dive into why that is and what I'm using them for.

But first I have two announcements and a plugin to share. The first announcement is about a brand new learning hub. If you want to learn more about WordPress and who doesn't want to learn more about WordPress, if you're listening to a WordPress podcast, but you can find out more over at wordpress.com/learn.

Yes, I did say that this was on wordpress.com, but I went through and not everything there is [00:01:00] specific to wordpress.com. A lot of it is all about the block editor and how to use patterns and how to use some of these things that we've been talking about for the last few weeks, how to switch themes. There is a upcoming webinar in October about picking the perfect plugin for your site.

And there's one in September for fearless theme switching to let you know how to switch themes and how to do that customization and whatnot. Plus there's courses. There's a getting started course. There's a membership 101 course. There's newsletter 101 and these courses are perfect for both self hosted users and wordpress.com users.

And honestly, the whole self hosted in wordpress.com, I mean, it's, it's a very confusing thing, but for the most part, any of the content that you watch can be used on any style of WordPress site that's out there. So I wanted to highlight that as a new resource or a place to go and find great WordPress information.

The other thing that's coming up in the news is WOOSESH 2023. This will be broadcast live on October 12th. This year's theme is next generation commerce. So registration isn't quite open yet. I have a link to the [00:02:00] WP Tavern article, but it will be coming up soon over the course of three days.

WUSESH will feature 31 speakers across 23 sessions. And if memory serves me right, WooSesh in the past has been free to register and free to watch the day of, plus maybe up to a week afterwards.

And then after that, then it is a paid for content. So I wanted to let you know about that. It is coming up and I will share when that registration is live and available. So you can make sure that you register and see some of those sessions.

The event will start off with a State of the Woo address by the CEO of WooCommerce and then have other product leaders directly from the WooCommerce brand and they'll talk about different things like taxes and accessibility and block themes and security and AI tools and automation and case studies and workshops and all this kind of stuff that will all be included in WooSesh 2023.

So make sure that you mark your calendars for October 10th, 11th, and 12th. Put those on the schedule and then make sure that you watch some of those replays.

And I know that I just said that there was two announcements, but as I was talking about who says I was reminded that the human made [00:03:00] conference, the AI, the next chapter was released. It's all on YouTube. Now that conference happened on September 14th. And so if you haven't had a chance to check out those replays, I have a link in the show notes for the playlist on YouTube and you can go and you can watch all of those sessions are very well done.

I started to watch the very first one in the presentation quality is really, really good, and I'm excited to learn more about AI and how the future of WordPress is looking with AI. So those are the three announcements today.

The fourth thing that I want to share today is about a plugin, and this plugin has one of the longest names on the WordPress repository, but it is a perfect plugin for things that we've been talking about recently. And it is called FSE theme design, import, export templates, template parts, and global styles. That is a mouthful, but basically the plugin will allow you to import and export your block based full site editing theme design templates, template parts, custom styles, everything. You can easily move your full site editing theme design from one website to another, or from a local installation to a live site. It is ideal for developers, [00:04:00] designers working in the site editor on a block based full site editing theme who have edited their full site block based templates, template parts, custom styles, and now need to copy that design over to a new WordPress installation.

It allows you to export and import, all with minimal fuss and you can use to make regular backups of your block theme as well. And so that is a plugin that really scratches a need. It only has 100 active installs as of right now, but I think that this is going to be the plugin of the future because, as I was saying in the past couple episodes, when I'm building this local site, it's like, how do I move this to a live site, especially if there's a bunch of template design and different things.

And so this is a plugin to put in your toolkit to use in the future because I know that it will be necessary and I know that it'll be very, very beneficial when you deploy these new full site editing themes. So there's a link in the show notes for that. Or you can just search for FSE theme design, import, export, and you'll find that in the WordPress repository.

All right. Today, we're going to talk about [00:05:00] patterns and how we can use them, how we can create our own patterns, how we can use patterns that are already built into WordPress, and just talk a little bit about the terminology so we can understand and we can all be on the same page on what a pattern is.

So I think in the last version of WordPress, we've we kind of changed some terminology they used to be called reusable blocks that used to be the term that we use. And so that would be to create a block and then we could reuse it in different places. But now we've called them patterns and there are two types of patterns.

There are synced patterns and there are unsynced patterns and a sync pattern means that when you update a pattern or when you update a block, it happens everywhere. It's a global change that anywhere the pattern is inserted on your site, it will update everywhere. And then the unsinked ones means basically you can add a pattern to a site and then you can make all the changes that you want and it's not going to affect any, it's not going to affect where you use that pattern elsewhere on your site.

So those are two different distinctions. So we have synced patterns and we have unsync'd patterns.

A really good example of where this is perfect [00:06:00] and I mean, I think there's lots of examples and that's why they created it. But a reusable block or a pattern, a synced pattern is really good for the section on my website that is for every show notes. That is, is there a plugin for that?

There's a section that I've created a reusable block, or I guess a synced pattern that I have in there. It says with more than 50, 000 plugins on the WordPress repository, it's hard to find the perfect one. There's a little blurb about it and then you can sign up for an email list or whatever.

So I have that. And in the past, when that number has changed, because, of course, the number is a dynamic thing, and it's not always going to be right in sync with, you know, there's gonna be 60,000 plugins or 70,000 plugins or whatnot. And in the past, I used to have to go in and write a script and do a find and replace in the WordPress database for that number.

So if I wanted to change from 45, 000 to 50, I would have to do that. Now, with a synced pattern, all I have to do is go in and I can edit the pattern either from the patterns database or the patterns section of our site or from a post itself and then it updates and then it updates across the entire site.

It [00:07:00] is one of those like magical things. It's just like, wow, this is really, really cool. And so I wanted to talk a little bit about where this came into play this week and why I thought that creating patterns is going to be a very crucial thing that's really going to be helpful for us with our WordPress sites.

So this week I was updating the Functional Medicine CE website that my wife and I run and I was basically trying to create. a page with every course on how to redeem their CE instructions. Basically, there's some steps. There's like seven steps that you have to follow, but then right in the middle of it, it's like, once you get to this step, you're going to enter this code.

And this code was different for every different course that we have out there. So I couldn't make it a fully synced block because every time I would change it, then it would change it across all the pages. But I wanted to keep all of the instructions similar and by similar, I mean exactly how I wanted all the instruction to be exactly the same because I found that over the course of the site, you know, sometimes I didn't have the right classes on them or sometimes they were the font wasn't quite the same or the [00:08:00] spacing wasn't right and I wanted to keep them all exactly the same.

And if for some reason the CE Redemption website URL changed or maybe the instructions changed and because they redone their site, like I didn't want to have to go into 15 different courses and make the change. So I wanted to create a synced pattern so that I could keep my content in sync.

And what I ended up doing was I created two synced patterns. I called one CE top and I called the second one CE bottom. And it has basically like all of my instruction. Because I wanted code in the center. I wanted two paragraphs in the center where I could put custom information for that specific C. E. Redemption.

So for example, like you have to enter a different code for each individual redemption. So I wanted to make sure that I could keep the top in sync, the bottom in sync, and then the middle part would be different based on the different session that they are watching.

So in order to do exactly what I needed to do, I had to create three different patterns. I created a synced pattern [00:09:00] for the top. I created a synced pattern for the bottom instructions And then I created a non synced pattern for the whole thing. The top is instruction number one, number two and number three.

And it says enter the following registration code at the bottom of the page. And then the number four, five, six and seven are in the CE bottom synced block. And if I need to make a change anywhere in those instructions, whether that's the top or the bottom, it's in a synced block and it's going to change across the site.

Finally, I have created one Unsynced pattern and I call that blocks for ce redemption. So what that looks like is I have a synced pattern at the top for the top instructions. I have a paragraph which has the code that they're looking for.

I have a paragraph for the description of the session they're looking for. Then I have the synced pattern for the bottom instructions and then I have a paragraph for, it just has the text of full PDF instructions for CE Redemption. So all of my text is exactly the way that I want [00:10:00] it. And so the workflow is when I go to add one of these CE Redemption details, I will go and I'll create a new section inside of the course itself and then I will add the pattern blocks for CE redemption.

It's going to pull in all of this information and then I just have to change the code. I have to change the title of the presentation and then I have to highlight the last paragraph and then make that a hyperlink to go to PDF instructions, which is like basically all the instructions that I have on the page, but it's a PDF form in case people want to print it out and then fill in the redemption certificate or whatnot.

So that is how I've utilized using synced and unsynced patterns to set up quickly and efficiently the content that we need on our site. So what I would do maybe for YourWebsiteEngineer.com and I haven't done this yet and I think this is a really good example to talk through is to create a pattern and this could be an unsynced pattern that basically will have like The heading of announcements and then I can list my announcements and then I can put the synced pattern.

Is there a plugin for that [00:11:00] inside my unsynced pattern for the show notes. And then I can, you know, like I can just basically put all the blocks and then when I start a new podcast and I'm ready for a new podcast, then I can say I can hit the plus arrow in the top. And then there is a whole, there's a whole section called patterns.

There's featured patterns or whatnot, but then there's also a little icons called synced patterns. And you can see all of those right on the side. Basically, I could start to search for what I want. It's automatically going to fill in all the information with the unsynced pattern. And then I can start putting in my information.

And I think the power comes by creating an unsynced pattern and using synced patterns inside of an unsynced pattern. So you're getting, you're getting the best of both worlds. You're not keeping the entire pattern in sync because that would be impossible because every blog post is different and it has different content in it, but you can use the synced patterns inside of an unsynced pattern as a group. Remember, a pattern is basically a grouping of blocks. And so that is how that works.

Before we talk about how to [00:12:00] create a pattern and that part will be really simple. That's the application part. It doesn't take a whole lot to build a pattern whether it's synced or unsynced. But first let's look at what patterns are already built into WordPress or maybe into your theme or your your plugins that you have installed.

So everyone's site will look a little bit different. But if you go up to the upper left hand corner, there is a blue plus, if you are on a post or a page and you're in the block editor itself, it's right next to the logo that's in the upper left hand corner, but you'll click the plus button and then there are patterns and you'll see a list of featured patterns or posts or text or gallery.

If you go into like the post section, for example, it will show you different ways that your posts can be laid out. The featured will be different based on, you know, the theme that you have installed and whatnot. There's a testimonials one. So you can say, Oh, I want to add this quote right here and it'll add that right to your site.

If you want to have a call to action, maybe you want to social links right there or schedule a visit or different things. You can just go ahead and add these directly to your site and you can see what a pattern is like I'm going to add a let's see what else I could add [00:13:00] here. I could add a banner, and so you can see that when you go in there, you can change the text. You can change the background image. You can change the font, like you can change everything. So these are unsynced patterns are basically a starting point, a place for you to get started for creating content on your site.

And so, like I said, you can go up there to the patterns, you can explore them, you can use them, different themes will have different patterns, sometimes different plugins will have different patterns, and they're all built in right there.

While we're up there, let's go ahead and look at, so there's a little block section, and we're pretty familiar with what blocks are, then patterns, that is going to be what we just talked about, these pre configured, pre installed patterns on your site. The next tab there is images or media. So you can find images right from your media library or from the audio library or from open verse, which is a place where you can get free images to use.

And there's a search box. And so you can search right there. And then the last thing is kind of like a diamond. It's I don't know how to exactly explain it, but that is where the synced patterns are. So if you've created any synced patterns on your [00:14:00] site, they're going to be right there. So I can see the thank you one that I have.

And is there a plug in for that section? I can see those patterns right there. Now, what happens if we want to create our own pattern. Like how do we do that? And basically what we can do is we can just highlight like say 345 blocks and then there are then the toolbar comes up across the top. And again, there's those three vertical dots.

We click the three vertical dots and we say create pattern slash reusable block. And that is going to open up a new dialogue box and it says reusable blocks are now synced patterns, a synced pattern will behave exactly in the same way as a reusable block. It's just a notice there just so you know the difference and then you give it a name.

So for example, I highlighted like two paragraphs and a testimonial. And so I could say, this is my testimonial block and I'll keep it synced. If you want it to be the same on every site and unsynced, if you want it to be one of those patterns where we just drop in. So if you're creating show notes, that would be a perfect use for a unsynced block.

Okay, so we've created this block whether it's synced [00:15:00] whether it's unsynced and then the only other thing that needs to happen is you need to be able to manage that and I find That this is probably the most confusing part of where these live inside of WordPress itself but the easiest way to do it is you can Add one of the blocks to your site, and then there is again, those three dots in the toolbar above your block, and then you can go to a link that says manage patterns, and that's going to open up.

It looks like it is a custom post type, and it is a WP underscore block, so it will add a URL there, and then you can see all of your patterns there, and you can edit them. You can make changes there, but there is no visible place to get there from the left hand sidebar, the left hand menu. So that's how you add it.

So if you're like, oh, I really need to update that again. I also said, like, if you just go and you change something inside of the block itself, then let's say, for example, I changed 50, 000 to 60, 000. Now, when you go up to the Publish button in the upper right hand corner. You see the publish button, but there's a little circle next to the publish.

It [00:16:00] appears to the left of the P in publish. And when you click that button, it's going to say, are you ready to save? And You can save the pattern and you can save the post itself. And so that's really, really handy that we don't actually need to go to the pattern section to update a pattern. If you see a typo, you see something that's out of place inside of a synced pattern, you can go right there from where you are, you can immediately see what you're looking for and use it right from there.

So I think that is really cool and a really handy, handy feature.

So that's the explanation of synced patterns and unsynced patterns. Synced patterns are really great for called actions or areas to sign up for an email newsletter or, you know, affiliate links inside of a post or a page or something along those lines, like things that you want to be able to update across the site.

If something would change, those would be perfect for synced patterns. And then you can use a unsynced pattern to create show notes or outlines or here's how my blog post is going to go or things along those lines. And again, an unsynced pattern is just a collection of blocks and you can have synced blocks [00:17:00] and just regular blocks in there to create an unsinked pattern.

The call to action today is to go out and create a synced pattern in an unsync pattern and spend some time just figuring out the differences of them and how you can start to incorporate those to help speed up that content creation.

It's kind of like a couple episodes ago when we talked about chat. Gbt helping us to create content a little bit faster. Patterns are going to help us create our content on our websites a little bit faster as well. And so that's what I want to share with you today. Take care and we'll talk again soon.

For more great WordPress information head on over to your website engineer dot com