Creating your own custom synced and non-synced patterns

Transcript

Synced versus non-synced

In this lesson, we will learn to differentiate, create, and manage synced and non-synced patterns. When creating a special design you want to keep and reuse, you can save it as a pattern and specify whether to sync it. A synced pattern was previously referred to as a Reusable block, and changes to a synced pattern will apply to all parts of your site where the pattern has been added. As we have seen in this example, when I updated the content in one pattern, it automatically updated in the other because they were synced.

Non-synced patterns are just regular patterns that can be edited independently. They can be used and changed repeatedly without changing or affecting the original pattern. In this example, I have changed the image of a non-synced pattern, and because the patterns are not synced, the image in the original pattern did not change.

Creating a custom pattern

So let’s say, for example, you found or created a special design and want to save it as a pattern. Select the container block, click on the three vertical dots, and then select Create Pattern. Then, we can name it appropriately and add it to the relevant category. Then, we can save it as a synced or non-synced pattern. In this case, I will save it as a synced pattern and then click Create. When you click on the Inserter, top left, and select Patterns, you will see that this pattern has been added to the My Patterns area, where you can find all your custom patterns.

Site Editor

You can also add, edit, and manage your custom synced and non-synced patterns in the Site Editor. So let’s make our way to Appearance and click on Editor. And this will, of course, take us to our Site Editor. If we go to Patterns, we can manage our custom patterns, the patterns provided by our theme, and header, footer, and general template part patterns. If we go to My Patterns, we will see all the custom patterns that we have created.

Synced patterns have a purple icon, and only the names of non-synced patterns will appear. If you want to save one of the patterns that come with your theme as synced or non-synced, navigate to the relevant pattern, click on the three vertical dots, and select Duplicate. Then, we can update the name and save it as a synced or non-synced pattern. In this case, I will save it as a non-synced pattern. Then, we can select Duplicate, and when we return to our My Patterns area, we will see that this pattern is now one of our custom patterns that we can modify and update as we please.

To create a custom pattern, click the plus icon next to patterns and select Create Pattern. After naming it, we can add it to the relevant category. In this case, I will save it as a non-synced pattern and then click Create. Then, we can go ahead and create our new pattern. Once finished, we can hit save, and when we return to our My Patterns area, we can view our new non-synced pattern.

Adding a pattern

To end off, let’s add this custom pattern to one of our pages. So let’s make our way to Pages and select the relevant page, in this case, my About page. Then, I will open up my List View and ensure that I add my content to the Post Content block. To add a non-synced pattern, I will click on the Inserter top left, go to patterns, click My patterns, and select the non-synced pattern of choice.

Conclusion

All the best as you create and manage your own custom templates.

Practical

Use WordPress Playground to test your knowledge.

1. Open the Sample Page.
2. Add a pattern that comes with your theme.
3. Modify the pattern as you please, then save it as a non-synced pattern.
4. Follow the steps as demonstrated in the video.
5. View your custom non-synced pattern below My Patterns in the Site Editor.