Display a block pattern when creating a new CPT entry in WordPress

Learn in this tutorial how to display a block pattern that can serve as a starting point when creating a Custom Post Type post in WordPress.

Block patterns are a fantastic tool when creating new content as they can serve as a starting point.

After WordPress 6.1 release, we have the opportunity to offer one or more block patterns as a starting point when creating a CPT post.

Thanks to this the user is not confronted with a “blank page” but can start from an already created layout/structure.

This is what the user would see right after clicking “Add new”:

The modal window in the example above shows 3 block patterns for the portfolio Custom Post Type, but you can add as many as you want and for the post types you want.

Find out how to do it in both a classic and a block theme (FSE).

Options for displaying a block pattern when starting to create a CPT post in WordPress

Depending on the type of theme in which you want to apply this functionality you have to use one strategy or another.

A. In a classic theme

If you are using a classic theme (with .php templates and so on) add the following code at the end of functions.php or in your functionality plugin:

In the code you use the register_block_pattern function to register the pattern and choose in which content type it should be displayed.

In the function you indicate the name of the block pattern (portfolio-image-center in this case) and an array with the properties of the pattern.

In the example you use the following properties:

• title: title of the block pattern to be displayed in the modal window.
• blockTypes: must contain core/post-content to be displayed in the modal.
• postTypes: the type of post in which it will be displayed.
• content: hTML markup of the blocks that compose the pattern.

In this case, you indicate that it will be shown when creating a new CPT portfolio entry (portfolio), but you can change it to whatever you want.

To achieve this result, 3 block patterns were registered.

Remember that you can create block patterns directly from the block editor.

B. In a block theme

If you are using a block theme, such as Twenty Twenty-Three, you can take advantage of the /patterns/ folder (if it doesn’t exist you can create it) to add a new block pattern.

To do this, create a file called portfolio-image-center.php with the following content:

In this case, it is imperative that the header contains:

• Title: title of the block pattern to be displayed in the modal window.
• Slug: block pattern slug.
• Block Types: must contain core/post-content to be displayed in the modal.
• Post Types: post type in which it will be displayed.

If you want the pattern to be easy to find from the block manager you can also add:

• Categories: categories in which the pattern will appear.
• Keywords: keywords that will be taken into account when searching.

To achieve the result of the example, 3 block pattern files were created.

If you are curious, this is how the complete file would look like for one of them:

---

In both options, for the content part you can use any layout you have made with the block editor. If you have any doubts you can take a look at the tutorial on how to create block patterns in WordPress.

Conclusions

If you want to offer a starting content to your client, getting a modal with block patterns to be displayed when a new CPT entry is created is a very interesting option.

In this tutorial you have seen how you can do it in both a classic and a block theme. As always, you can use this code as a starting point and adjust it to the needs of the project.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉