Generally there are two methods to register a pattern: manually or automatically. Manual registration requires us to create the pattern and register it in the functions.php file, while automatic registration consists in creating a separate pattern file and place it under the patterns theme’s folder e.g. patterns/name-of-pattern.php. However, it is not clear which method is better. In this post we will explore both methods and leave it up to you to decide.
Manual pattern registration via functions.php
We’ll use codes example from Anne McCarthy’s pattern file for the PHP registration method. We only need to insert this script into our functions.php file in order to register the pattern.
function register_block_patterns() {
if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
$content = '<!-- wp:cover {"dimRatio":70,"customGradient":"linear-gradient(135deg,rgb(255,255,255) 20%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(253,253,253) 80%)","isDark":false,"align":"full","lock":{"remove":false,"move":true}} -->
<div class="wp-block-cover alignfull is-light"><span aria-hidden="true" class="has-background-dim-70 wp-block-cover__gradient-background has-background-dim has-background-gradient" style="background:linear-gradient(135deg,rgb(255,255,255) 20%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(253,253,253) 80%)"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","style":{"typography":{"lineHeight":"1.2"}},"textColor":"grey","lock":{"remove":true,"move":true}} -->
<h2 class="has-text-align-center has-grey-color has-text-color" id="book-your-next-adventure" style="line-height:1.2">Book your next adventure</h2>
<!-- /wp:heading -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"},"lock":{"remove":true,"move":false}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","style":{"border":{"radius":"10px"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-text-color" href="#0" style="border-radius:10px">Find yours</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontStyle":"italic","fontWeight":"200"}},"textColor":"grey","lock":{"remove":false,"move":true}} -->
<p class="has-text-align-center has-grey-color has-text-color" style="font-style:italic;font-weight:200">Create moments you will remember forever</p>
<!-- /wp:paragraph -->
<!-- /wp:cover -->';
register_block_pattern(
'custompattern/call-to-action-adventure',
array(
'title' => __( 'Call to Adventure', 'textdomain' ),
'description' => _x( 'A call to adventure.', 'Block pattern description', 'textdomain' ),
'content' => trim($content),
'categories' => array( 'buttons' ),
'keywords' => array( 'cta' ),
'viewportWidth' => 1400,
'blockTypes' => array( 'core/buttons' ),
)
);
}
}
add_action( 'init', 'register_block_patterns' );
Automatic pattern registration using /pattern folder
However, we can add and register the same block above directly into the theme’s patterns folder by creating a separate PHP file for it. In this example I convert the above script, name it cta-call-to-adventure.php, and place it under theme’s /patterns folder.
<?php
/**
* Title: Call to Adventure
* Slug: avant-garde/call-to-adventure
* Categories: buttons
*/
?>
<!-- wp:cover {"dimRatio":70,"customGradient":"linear-gradient(135deg,rgb(255,255,255) 20%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(253,253,253) 80%)","isDark":false,"align":"full","lock":{"remove":false,"move":true}} -->
<div class="wp-block-cover alignfull is-light"><span aria-hidden="true" class="has-background-dim-70 wp-block-cover__gradient-background has-background-dim has-background-gradient" style="background:linear-gradient(135deg,rgb(255,255,255) 20%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(253,253,253) 80%)"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","style":{"typography":{"lineHeight":"1.2"}},"textColor":"grey","lock":{"remove":true,"move":true}} -->
<h2 class="has-text-align-center has-grey-color has-text-color" id="book-your-next-adventure" style="line-height:1.2">Book your next adventure</h2>
<!-- /wp:heading -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"},"lock":{"remove":true,"move":false}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","style":{"border":{"radius":"10px"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-text-color" href="#0" style="border-radius:10px">Find yours</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontStyle":"italic","fontWeight":"200"}},"textColor":"grey","lock":{"remove":false,"move":true}} -->
<p class="has-text-align-center has-grey-color has-text-color" style="font-style:italic;font-weight:200">Create moments you will remember forever</p>
<!-- /wp:paragraph -->
<!-- /wp:cover -->How to use the pattern
To use the resulted pattern block. Navigate to the block inserter -> select Pattern tab -> Explore, and then search for a pattern name “Call to adventure.” You will see that both ways deliver the same result.
When to use between the methods
But what’s the difference between the two methods, and how do you choose one way over the other? This discussion suggests that it is better to use the /patterns folder method as it is easier. In fact, if you are a block theme builder, you should choose this way. However, the resulting patterns will only be available in WordPress 6.0 and above.
On the other hand, the functions.php registration method is preferable if you are creating and distributing plugins for patterns. This video tutorial by Daisy Olsen will show you the necessary steps to create such a patterns plugin. Alternatively, you can read the textual guidelines in this handbook for a deeper explanation on the topic.
Updated (May 3, 2024)
Since WordPress 6.5 patterns are available to classic themes as well (#5201). Use functions.php to register your patterns and a new patterns management menu will show up under Appearance > Patterns.
What do you think? What is your choice of method for adding patterns to your site?
Leave a Reply