How to show the “Choose a Pattern” modal by default on new pages

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.

Receive my new posts and videos in your inbox, along with some links and thoughts from the web dev world. No more than once a month. Browse the archive.

2 responses to “How to show the “Choose a Pattern” modal by default on new pages”

  1. Joe Avatar

    Thanks for this Brian! I have a couple questions.

    1. Will this still work if you register a pattern using the register_block_pattern() function? I need to add patterns in a plugin.

    2. Will this work with custom post types?

    I’m using both of these and am not having any luck with this. Thanks!

    1. Brian Coords Avatar
      Brian Coords

      It seemed to work for me. I just used a sample from the documentation but when I added the proper fields to the second attribute (the pattern_properties array) it seemed to work:


      'blockTypes' => array( 'core/post-content' ),
      'postTypes' => array( 'book' ), // Change this to your post type

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.