Step-by-Step Guide to Automatically Create Patterns in WordPress

Step 1: Create the patterns Directory in Your Theme

Create the patterns Directory: In the root directory of your theme, create a folder named patterns if it doesn’t already exist. This folder will hold all your patterns.

Step 2: Create Patterns for Different Content Types

Create pattern files in the patterns directory for various content types.

Pattern for Pages (page-pattern.php):

<?php
/**
 * Title: Page Hero Section
 * Slug: mytheme/page-hero
 * Categories: hero
 * Keywords: hero, page
 * Block Types: core/post-content
 * Post Types: page
 * Viewport width: 1400
 */
?>

<!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/images/hero-bg.jpg","dimRatio":50} -->
<div class="wp-block-cover">
    <span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
    <img class="wp-block-cover__image-background" alt="Hero Background Image" src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hero-bg.jpg"/>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"align":"center"} -->
        <h2 class="has-text-align-center">Welcome to Our Website</h2>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center"} -->
        <p class="has-text-align-center">Here’s a brief description of what we do.</p>
        <!-- /wp:paragraph -->
    </div>
</div>
<!-- /wp:cover -->

Pattern for Posts (post-pattern.php):

<?php
/**
 * Title: Blog Post Layout
 * Slug: mytheme/post-layout
 * Categories: blog
 * Keywords: post, layout, blog
 * Block Types: core/post-content
 * Post Types: post
 * Viewport width: 1400
 */
?>

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column {"width":"70%"} -->
    <div class="wp-block-column" style="flex-basis:70%">
        <!-- wp:heading -->
        <h2>Blog Post Title</h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph -->
        <p>Start writing your blog post here...</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->

    <!-- wp:column {"width":"30%"} -->
    <div class="wp-block-column" style="flex-basis:30%">
        <!-- wp:paragraph -->
        <p>Sidebar content goes here.</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Pattern for Custom Post Type (portfolio-pattern.php):

<?php
/**
 * Title: Portfolio Item Layout
 * Slug: mytheme/portfolio-layout
 * Categories: portfolio
 * Keywords: portfolio, project
 * Block Types: core/post-content
 * Post Types: portfolio
 * Viewport width: 1400
 */
?>

<!-- wp:heading -->
<h2>Project Title</h2>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/project-image.jpg" alt="Project Image"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Project description goes here...</p>
<!-- /wp:paragraph -->

Step 3: Verify the Patterns

After adding patterns to the patterns directory, WordPress will automatically register them. To check:

Create a New Page or Post:

• Go to the WordPress admin panel and create a new page, post, or custom post type (e.g., “Portfolio”).
• WordPress will automatically display a modal window to select from the available patterns if they are registered for the current post type.

Conclusion

WordPress simplifies working with patterns by automatically registering them and showing a pattern selection modal when creating new content. You only need to properly format and place patterns in the patterns directory of your theme. This feature speeds up content creation by providing users with predefined templates for various scenarios.