Global Settings and Styles

Theme Patterns

Welcome to this lesson on the basics of how to create a pattern from scratch and register patterns within your theme.

With this lesson, we will:

  • list and describe the sources of patterns available within WordPress,
  • add the Patterns property to theme.json and list the patterns to include in your theme from the Pattern Directory, and
  • describe the process of building a pattern from scratch in order to bundle it with your theme.

Sources of patterns

What are the sources of patterns available within WordPress? When the end user uses the inserter within a page, post or template, they will have access to patterns available within the currently active block theme, which includes the WordPress pattern directory. They will also have access to the WordPress core patterns, as you can see in this example.

Pattern directory

Now let’s use theme.json to list patterns from the pattern directory. Not to be confused with the patterns that are listed within the patterns folder. These patterns you create yourself to add to your theme and they’re automatically registered as long as they’re in that folder. But if we were to go into theme.json, we would see the comma separated list of the slugs of the patterns that you find within the official WordPress pattern directory.

Creating patterns

Now let’s create a pattern from scratch in order to bundle it with your theme. So again, you would create your file within the patterns folder. The file is PHP, however, it has block markup and it also has a file header, which is essentially a comment placed at the top of your file.

The most common metadata that you will find there is title, slug and categories. The HTML markup code of the blocks you need can be generated within the Site Editor. Go into the Site Editor and you can always go into the code editor in order to find your code to copy and paste it over into your patterns PHP file.

Next steps

As always, you can refer to the theme handbook on WordPress.org and note we will cover more details for building and registering patterns in future lessons.

This is a preview lesson

Register or sign in to take this lesson.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.