If you’ve spent any time messing around with the TwentyTwentyFour default WordPress theme, then you might’ve noticed a cool new feature: when you start a new page, the first thing you see is the option to choose a full-page pattern to start off with.
There’s nothing more intimidating than the freedom of a blank landing page, so why not offer a few scaffolds to start with. While this may not be perfect for every use case, it might be something you want to include in your custom themes, especially for clients who require a more curated editorial experience.
So, how do you do it? It’s fairly simple, if a little hard to find in the code/documentation. (Unless I missed something!)
First, create a new pattern in your theme. For our example, we’ll use the “Portfolio home with post featured images” pattern from TT4. This pattern is in the theme folder underpatterns/page-home-portfolio.php
Note that the pattern is a PHP file:
<?php
/**
* Title: Portfolio home with post featured images
* Slug: twentytwentyfour/page-home-portfolio
* Categories: page
* Keywords: starter
* Block Types: core/post-content
* Post Types: page, wp_template
* Viewport width: 1400
*/
?>
<!-- wp:pattern {"slug":"twentytwentyfour/hidden-portfolio-hero"} /-->
<!-- wp:pattern {"slug":"twentytwentyfour/posts-images-only-offset-4-col"} /-->
Code language: HTML, XML (xml)
Let’s call out a few important things:
The Block Types
header– For the “Choose a pattern” modal to show up, it’ll be running a query for patterns with the core/post-content
block type, meaning the pattern can be used as post content.
The Post Types
header– When it queries for those patterns, it’ll also be filtering for patterns that are allowed to be used with the current post type. In our example, we’ve enabled this for page
and wp_template
post types. That said, I could also imagine offering different starting templates for different post types.
The wp:pattern
blocks– So once you’ve defined your headers, you’ll just need to include the actual content of the pattern. Technically you can use any type of block content here, it doesn’t have to be pattern blocks. That said, I love making page templates out of patterns, especially if I want to be able to edit the original pattern and have my updates show up everywhere else.
That’s it! That’s literally all you have to do for each pattern you want to show up. When you open the new page editor, WordPress checks for any registered patterns that have the correct Block Types
and Post Types
headers. If the query is not empty, then the “Choose a pattern” modal will appear.
Leave a Reply