WordPress patterns are an amazing tool to provide clients with a simple yet powerful site building interface out of the box.
Until pretty recently though, they have been a pain to create.
In this post, I’ll walk through my creation workflow using the new Pattern Manager plugin from WP Engine. Let’s jump into it!
What is Pattern Manager?
Pattern Manager is a developer focused plugin that provides a UI for designing patterns in Gutenberg as well as saving and organizing them.
Prior to Pattern Manager the workflow for creating a library of patterns was not developer friendly at all. It looked something like this:
- Register a new pattern category using PHP.
- Build a pattern with blocks in Gutenberg.
- Copy the block code and paste into a pattern file in your theme.
- Configure pattern options and category by using a comment at the top of a file referencing WP developer docs for available options.
- Download any images used and put them in an images directory in the theme.
- Replace references to images with PHP
get_stylesheet_directory_uriand a path to a local images directory.
If you changed anything later you would have to repeat steps 3-6 once again. Not fun – especially if your pattern has multiple images you have to manually replace the code for.
Let’s take a look at how Pattern Manager makes this 1000% more dev friendly. Here is the same workflow, but using the Pattern Manager plugin to create our pattern library.
- Build a pattern with blocks in Gutenberg
- Configure options in the plugin sidebar
- Click “Save” – Pattern manager will save the pattern file to your filesystem as well as any images used, and replace all the image references with local references instead.
If you have any updates all you have to do is reopen the Pattern in the Pattern Manager plugin, make any changes and hit update!
Pattern Manager Options
Pattern Manager exposes a bunch of pattern configuration options in the sidebar that otherwise would require consulting the WordPress Codex to know of their existence and options.
Let’s run through a few of them:
Pattern Category
This allows you to assign the block to any of the default block categories or create your own. I suggest creating your own categories for any client projects so that the client can easily separate their bespoke patterns from any defaults or plugin created ones.
Block Types
This option is often misunderstood. It allows you to link the pattern to specific blocks, so that when the user inserts a block of that type there is an easy option to transform the block to this particular pattern.
For instance if you have a side-by-side image and text pattern it might make sense to link it to the default media and text block so that users can quickly switch the block to your custom pattern.
Post Type
This lets you restrict your pattern to only be available for certain post types, but it also contains a few extra options as well.
If you select a post type to associate with the pattern, you can also choose to have the pattern show up in a modal when a post of this specific type is created. Allowing users to get a content jump start. Usually I only enable the modal for compound patterns like a pattern composed of a hero, content section, and CTA. That way it basically creates an easy to fill in pre-built page template to work with.
Finally, you can also use this option pane to disable the pattern from showing in the inserter at all. This is handy if you are using pattern manager to build out a header or footer pattern that you only want to use hard-coded into your templates or template parts.
Enjoying the read?
Join 500+ developers and learn modern WordPress, JAMStack, and javascript frameworks with a monthly development newsletter geared towards agencies and freelancers.
Pattern Library Workflow Tips
Pattern Manager makes the creation and organization of patterns a breeze,
Here are some general tips for creating the best experience for clients when working with Pattern Manager to create a pattern library:
- Start by setting up your theme.json file completely before jumping into pattern creation. This will minimize any extra work if your changes end up having any major effects on your patterns.
- Organize patterns into semantic categories like CTAs, Cards, Columns, etc. and create light/dark or primary/secondary variants for each as applicable.
- Build low level section patterns first, then build up larger page-starter patterns composed of your smaller section level patterns.
- Create one or two standard placeholder images and use these exclusively for your pattern design. Because Pattern manager saves images to the filesystem this will avoid bloat and give your library a cohesive feel.
- Link your patterns to block transforms as applicable. This just helps speed up page building for editors since they can quickly insert a block and transform as needed.
I like to start by creating a checklist of patterns I need from whatever design files I am building based on and then just batch them out from there – adding light/dark variants etc. where applicable.
If you find yourself recreating some of the same patterns again and again, it may be worth it to create a starter library you can pull from as well. Pattern Manager works great for this as well.
Once again, I recommend creating a good generic image to use for any image containing patterns, so that you can port them between sites easily without messing with the markup.
Have any of your own tips/tricks for using Pattern Manager? Feel free to share them below.
Leave a Reply