Title: Adding a Pattern From the Pattern Directory to Your Theme
Author: Wes Theron
Published: 5 October 2022
Last modified: 10 November 2022

---

# 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](https://wordpress.tv/2022/08/19/nick-diego-taking-block-patterns-to-the-next-level/)
 * [Using Block Patterns](https://learn.wordpress.org/tutorial/using-block-patterns/)
 * [How to Build Low-Code Block Patterns](https://learn.wordpress.org/tutorial/how-to-create-low-code-block-patterns/)
 * [Submitting Block Patterns to the Directory](https://learn.wordpress.org/tutorial/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.

 [Practice on a private demo site](https://playground.wordpress.net/?networking=yes)

|  Length |  4 minutes |  
|  Language |  English |  
|  Subtitles |  English |

##  Suggestions

 Found a typo, grammar error or outdated screenshot? [Contact us](https://learn.wordpress.org/report-content-feedback/).

##  License

 [CC BY-SA 4.0 ](http://creativecommons.org/licenses/by-sa/4.0/)