Adding a Pattern From the Pattern Directory to Your Theme

In this session, we will learn how to make a minor tweak to our theme.json file to add a pattern from the Pattern Directory to our list of patterns when clicking on the Inserter.

Learning outcomes

1. Inserting a pattern from your theme as well as the Pattern Directory.
2. Copying the slug of a pattern in the Pattern Directory.
3. Adding a code snippet to your theme.json file to add an individual or multiple patterns from the Pattern Directory to your theme.

Comprehension questions

1. What are the advantages of using patterns?
2. Are there patterns in the Pattern Directory that you would like to reuse or prioritise for clients?

Resources

• Taking Block Patterns to the Next Level
• Using Block Patterns
• How to Build Low-Code Block Patterns
• Submitting Block Patterns to the Directory

Transcript

Good day and welcome to Learn WordPress. In this session, we are going to look at how to add a pattern from the Pattern Directory to your theme. Patterns, of course, allow you to add beautifully designed ready-to-go layouts to any WordPress site, which you are able to modify and change as you please.

There are various patterns that come with your theme and can be found when clicking on the Inserter, and next to blocks, you will find patterns. And when you click on the dropdown arrow, you will see all the pattern categories, and when you click on Explore, you will get an overview of all the categories and available patterns that come with your theme.

If you want to explore other patterns, you need to make your way to the Pattern Directory and here are loads of patterns that you can easily just copy and paste into your page, and then start modifying. But what if you want to have one of those patterns available on your site when you click on the Inserter? Maybe you want to reuse a pattern multiple times, or you’re working with a client and want to prioritise certain patterns for them from the Pattern Directory. Well, then you are in the right place.

I’m going to show you how you can make a minor tweak to your theme.json file to add a pattern from the Pattern Directory to your list of patterns when clicking on the Inserter. Please remember to use a child theme to ensure that these changes are not lost when updates are made.

So if you find a pattern in the Directory that you want to add to your theme, you first have to open it and then merely copy the slug of the URL, which is basically the name of the pattern and then make your way to your theme.json file. I’m using Visual Studio code to make the changes. When I’m in my theme.json file, I will add the code snippet below the version.

Firstly, I will add double quotes and type patterns followed by a colon and then add a space, square brackets, press Enter to start a new line, add double quotes again and then inside paste the slug that you just copied from the pattern. And don’t forget to add a comma after the closing square bracket. Then it’s time to save, and in my case, I’m going to press on command S.

Then we can head back to our WordPress site. I’ve opened a blank page. So the first thing I’m going to do is refresh the site and then click on the Inserter and make my way to patterns. We added a buttons pattern to our theme.json file, so I’ll use my categories, go to buttons, and when you scroll down, you will now see that this pattern is part of your theme, and you can insert it into your page.

The last thing I wanted to show you is that you can, of course, add multiple patterns to your theme.json file. So to do that, find a new pattern that you like, open it up, copy the slug, return to your theme.json file and then add a comma after your first pattern, press Enter, add double quotes and paste the slug of your second pattern. Once we save we can go back to our WordPress site. When you have refreshed your page, you can click on the Inserter again, Patterns, Buttons, and now you will notice the first pattern we added as well as the second.

So as you have seen, you can add any pattern from the Pattern Directory to your theme. Visit Learn WordPress for more tutorials and training material.