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.
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 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.
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.
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.
Template Part Patterns
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.
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:
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:
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:
Managing template parts and patterns
At the bottom of the patterns screen is an option to manage 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.
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.
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?