Patterns: custom patterns, theme patterns, and template part patterns

Introduction

Patterns, first introduced in WordPress 5.5, are a collection of blocks that make it simple to add complex layouts and designs to any WordPress site without starting from scratch. You are able to arrange blocks in unlimited ways and save them as patterns for use throughout your site, directly within the editing experience.

Using block patterns

Here is a reminder of what we learned at the start of the course about the patterns area in the Site Editor:

Below Patterns in the Site Editor awaits a library of patterns. When you access the patterns area, you’ll be able to 1) craft and manage your custom synced and non-synced patterns, 2) explore patterns provided by your theme, and 3) produce and manage header, footer, and general template parts. Template parts essentially function as patterns – reusable components that can be employed across your site.

Synced and Non-synced Patterns

Creating custom patterns

Creating a custom pattern is simple. Click the inserter next to Patterns, choose ‘Create Pattern’, assign a name, and then opt for syncing or not. A synced pattern, previously referred to as a Reusable block, applies changes to all instances of the pattern on your site. Non-synced patterns can be edited independently. In your custom patterns area, synced patterns are indicated by a purple icon, while non-synced patterns lack this icon.

Managing your own custom synced and non-synced patterns.
Managing your own custom synced and non-synced patterns
Creating a synced pattern
Creating a non-synced pattern

Adding a synced or non-synced pattern to a page

Non-synced patterns are available to insert into a page via the Inserter below Patterns and synced patterns are available below the ‘Synced Patterns’ icon next to media.

Adding a non-synced and synced pattern to a page

Watch this helpful online workshop to learn more:

Theme Patterns

Underneath My patterns, you can find regular patterns that come bundled with your theme. These patterns cannot be edited directly. Instead, you can click on the Actions (ellipsis) button and click Copy to My patterns to create an editable copy of that pattern. This copy will be listed under My patterns.

Viewing patterns that come with your theme.
Patterns that come with your theme and the ability to copy a pattern to My patterns

Template Part Patterns

Using template parts (WordPress version 6.2)

You’ll find template part patterns near the bottom of the patterns area. You can create custom headers and footers or tailor template part patterns inherent in your theme. To create a template part, click the plus icon next to Patterns at the top. When creating a new template part, choose between general, header, and footer template parts. General template parts aren’t linked to specific areas; remember to assign descriptive names.

You can edit and modify template parts in Template Editing Mode without any distractions or from within a template.

Header, footer and general template part patterns.
Header, footer, and general template part patterns

Adding a template part or selecting an existing template part

You can add templates to edit templates directly. After adding a template part, you can choose from existing parts or create a new template part. You also have the option to add a header or footer block and select one of the existing template part patterns from there:

Template part block provides two buttons: "choose" and "start blank".
Adding a Template Part block
Adding a template part from within a page

Managing and creating template parts from within the Site Editor

You can also create new template parts from the template part list in Administration Screen > Appearance > Editor > Patterns > Template Parts. Click on the Create patterns icon to find Create template part:

Template part list area also provides an option to create template part.
Creating template part from Patterns area

When you select the Create template part, a modal appears where you can add a name and select the area for the template part. You must provide a name in order to create a new template part:

Upon clicking on create template part, a pop up appears with the title "Create a template part".
Creating a template part

Managing template parts and patterns

At the bottom of the patterns screen is an option to manage template parts.

Managing template parts

Customizing template parts

After adding or selecting a Template Part block, you can customize in various ways by adding additional blocks within it. To make it easier to find current template parts to edit, it’s recommended that you use one of the following options:

  • Use List View when you’re editing a template to quickly identify the Headers and Footers in your content to edit.
  • Use the template part focus mode described below.

Template part focus mode

To make it easier to focus specifically on editing a single template part, like a Header or Footer, you can use a dedicated mode that only shows an individual template part. There are a few ways to access this mode:

  • Select the template part in List View > Select “Edit Header”. 
  • Go to Patterns > Navigate to Template Parts > Select the template part you want to customize.
Editing a template part in focus mode

Replacing one template part with another

If the theme has more than one template part for the same area, you can use the Replace option in the block toolbar to replace the current template part with another. If you don’t see this option, this is because the theme hasn’t provided multiple template parts for the same area.

Replacing a header template part

Conclusion

The most common template parts you will come across in most themes are the header and footer. Some themes will include a sidebar as well.

Once you have created a template part, you can use it, reuse it or edit it.  When you change blocks inside a template part, the Editor updates the blocks on every template that includes the template part. So, if you change a template part in one place, it will change everywhere it has been used.

Reflection

The purpose of template parts is to offer users the ability to add reusable sections to their site, like the header and footer.

Congratulations, you are now ready to start using full site editing to turn your ideas into reality.  All the best on your journey ahead as you use all these new features and the extendability of blocks to build out all parts of your site. 

Your feedback is important to us

Found a mistake or outdated information in the course? Have an idea to improve a piece of content? 

Report Content Feedback | Learn WordPress

Suggestions

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