How to Create a Reusable Theme Template Using Gutenberg Patterns

Dec 17, 2025 |

26 minutes read

Gutenberg Pattern Power

Building WordPress pages should be simple, fast, and consistent. But if you work with WordPress regularly, you already know the reality of designing the same hero section again… and again… and again for every new page quickly becomes boring and time-consuming.

This is where Gutenberg Patterns (also called Block Patterns) can completely change your workflow. You only need to build a layout once, and patterns let you use it again wherever required. And when you combine patterns with theme templates, you get a powerful, reusable design system built directly inside WordPress.

In this easy, step-by-step guide, you’ll learn:

What Gutenberg Patterns are

Why are they better than reusable blocks

How to create a reusable theme template using patterns

How to save, register, and organize your patterns

How to use patterns inside theme files

How to build full landing pages using patterns

Best practices and real examples

Mistakes to avoid

By the end, you’ll be able to create a reusable theme structure that saves time, improves consistency, and works across any WordPress site.

Let’s start with the basics.

What Are Gutenberg Patterns?

Gutenberg Patterns are pre-designed block layouts that you can insert with one click into any page or post.
You can think of them as mini templates.

A pattern can include:

Headings
Paragraphs
Images
Cover sections
Columns
Buttons
Lists
Gallery
Any block from your theme or plugins

Here’s the best part:

When you insert a pattern on a page, it becomes a normal block.
You can modify it however you want – it won’t affect the original pattern.

This makes patterns perfect for reusable layouts that still allow content changes.

Why Use Gutenberg Patterns for Theme Templates?

Here are the main reasons:

Build Once, Use Everywhere

Design your hero, footer block, and testimonial section once.
Then reuse it across the entire site.

Saves Hours of Work

No more creating the same layout for every new page.

Helps Clients Edit Easily

Clients don’t need coding knowledge.
They can insert your templates from the block inserter.

100% WordPress Native

No extra plugins or page builders needed.

Perfect for FSE (Full Site Editing) Themes

Modern block themes fully support patterns inside:

Templates

Template parts

Page layouts

Great for Developers

You can include patterns inside your theme or plugin, like:

my-theme/patterns/

WordPress auto-detects them.

Difference Between Patterns, Templates, and Reusable Blocks

Understanding the differences helps you choose correctly:

Feature	Patterns	Templates	Reusable Blocks
Editable after insertion	Yes	Yes	No (syncs everywhere)
For full pages	Yes (if created big)	Yes	No
For sections	Yes	Yes	Yes
Saved inside theme	Yes	Yes	No
Best use	Reusable layout sections	Structure of a page	Repeat exact same content

Patterns = Flexible layout you can reuse anywhere
Templates = Page structure for entire post/page
Reusable blocks = Same content on many pages (syncs)

Why Gutenberg Patterns Are Perfect for Theme Templates

When you use patterns inside templates, you can:

Build a full-page layout

Insert header/hero sections

Add standard content areas

Use CTA blocks

Maintain consistency

The template sets the structure, and the pattern sets the design.

Example:
Display a hero section with a background image and title at the top of every blog post.
You create:

Pattern → Hero layout

Template → Adds the pattern to every post

Super simple and powerful.

Step-by-Step: How to Create a Reusable Theme Template Using Gutenberg Patterns

Let’s go through every step in easy language.

Step 1: Design a Section or Layout in Gutenberg Editor

Open any page or post → Go to the Gutenberg editor.

Now design the section you want to reuse.
Examples:

Hero Section

Cover block

Background image

Title

Subtitle

Buttons

Features Section

Three columns

Icons

Short text

Call-to-Action (CTA)

Heading

Button

Background color

Once the layout is ready, select the entire block group.

Click “Copy”.

This copies the complete HTML structure.

Step 2: Convert the Layout Into a Pattern File

To use the layout as a theme pattern, you need to store it inside your theme.

Go to:

/wp-content/themes/your-theme/patterns/

If the patterns folder doesn’t exist, create it.

Now create a file:

hero-section.php

Inside this file, you must add pattern headers:


/** 
 * Title: Hero Section 
 * Slug: mytheme/hero-section 
 * Categories: hero, banner, featured 
 * Inserter: yes 
 */

After adding this, paste the copied Gutenberg HTML below it.

Example pattern file:


/** 
 * Title: Hero Section 
 * Slug: mytheme/hero-section 
 * Categories: hero, banner 
 * Inserter: yes 
 */

/**    
 * Title: Hero Section 
 * Slug: mytheme/hero-section 
 * Categories: hero, banner 
 * Inserter: yes 
 */


<?php
/**
 * Title: Simple Hero
 * Slug: mytheme/simple-hero
 * Categories: hero
 */
?>

<!-- wp:cover {"dimRatio":50,"overlayColor":"primary"} -->
<div class="wp-block-cover">
    <div class="wp-block-cover__inner-container">

        <!-- wp:heading {"textAlign":"center"} -->
        <h2 class="has-text-align-center">Your Title Here</h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph {"textAlign":"center"} -->
        <p class="has-text-align-center">Write your short introduction here.</p>
        <!-- /wp:paragraph -->

        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons">
            <div class="wp-block-button">
                <a class="wp-block-button__link" href="#">Click Here</a>
            </div>
        </div>
        <!-- /wp:buttons -->

    </div>
</div>
<!-- /wp:cover -->

Save the file.

Now you have created a custom pattern.

Step 3: Your Pattern Appears Automatically in Gutenberg

Go to:

Block Inserter → Patterns → Theme

You will see your pattern listed with the title:

Hero Section

You can now insert it anywhere.

Step 4: Use Your Pattern Inside a Theme Template

This is the main step to create a reusable theme template.

Go to:

/wp-content/themes/your-theme/templates/

Select any template, for example:

single.html

page.html

archive.html

index.html

Now add the pattern like this:

<!– wp:pattern {“slug”:”mytheme/hero-section”} /–>

This means:

Every page/post using this template will automatically display your hero pattern.


Example: inside single.html 

wp:template-part {"slug":"header"} 
wp:pattern {"slug":"mytheme/hero-section"} 
wp:post-content
wp:template-part {"slug":"footer"}

Step 5: Create Multiple Patterns for Different Sections

You can create patterns for:

Hero Section

Full-width header layout.

About Section

Two-column layout.

Features Section

List of features with icons.

Testimonials

Client reviews.

Pricing Table

Plans with prices.

Footer CTA

Big call-to-action block.

Blog Post Intro

Stylish title + description.

Store them in the patterns folder:

patterns/

hero.php

features.php

pricing.php

testimonials.php

cta.php

Now you can mix and match them inside templates.

Step 6: Build a Full Landing Page Using Patterns

You can create a complete landing page template using only patterns.

Example:

landing-page.html

Add:


wp:pattern {"slug":"mytheme/hero-section"} 
wp:pattern {"slug":"mytheme/features"}
wp:pattern {"slug":"mytheme/testimonials"}
wp:pattern {"slug":"mytheme/pricing"} 
wp:pattern {"slug":"mytheme/cta"}

This will generate a professionally structured landing page instantly.

Step 7: Register Pattern Categories (Optional)

You can register custom categories so your patterns appear organized.

Add this to functions.php:


add_action('init', function() { 
   register_block_pattern_category('mytheme-sections', [ 
       'label' => __('My Theme Sections', 'mytheme') 
   ]); 
});

Now assign this category in your pattern header:

Categories: mytheme-sections

Step 8: Create Dynamic Patterns (Advanced)

You can create patterns with PHP logic.

Example: Automatically display latest posts:


$posts = get_posts(['numberposts' => 3]);

<div class="latest-posts">
    <?php foreach ($posts as $post): ?>
    <p>
        <a href="<?php echo get_permalink($post->ID); ?>">
            <?php echo esc_html($post->post_title); ?>
        </a>
    </p>
    <?php endforeach; ?>
</div>

This pattern updates itself automatically.

Step 9: Export and Reuse Patterns in Other Projects

To reuse your pattern:

Open the editor
Select the block
Click “Copy as HTML”
Paste into a new pattern file in another theme

You now have a portable library of reusable designs.

Common Mistakes to Avoid

Adding heavy inline CSS

makes patterns hard to edit.

Forgetting categories

Patterns become difficult to find.

Using actual content

Patterns should be layout-based.

Hardcoding URLs

Use relative paths or placeholders.

Creating too many patterns

Start with the essential ones.

Example: Simple Beginner-Friendly Pattern File



/** 
 * Title: Simple Hero 
 * Slug: mytheme/simple-hero 
 * Categories: hero 
 */ 



  

    Your Title Here

    Write your short introduction here.

    
      Click Here

This is clean, simple, and user-friendly.

Complete Workflow Summary

Here’s the entire process in 10 steps:

Design a layout in the Gutenberg editor
Copy the block HTML
Create a pattern file in /patterns
Add pattern header
Paste the HTML
Save and check under Patterns in Gutenberg
Insert pattern anywhere
Use patterns inside theme templates
Create multiple sections for full pages
Build reusable, scalable theme templates

Start Building Reusable Gutenberg Templates Today

The Way Forward

Creating reusable theme templates using Gutenberg Patterns is one of the most powerful and time-saving workflows in modern WordPress development.

With patterns, you can:

Build designs once and reuse them anywhere

Maintain consistent layouts across your site

Offer clients an easy editing experience

Build full landing pages in minutes

Make your theme more professional

Reduce page-building time significantly

Even if you are a beginner, creating patterns is simple and incredibly useful. After you begin using them, you won’t want to recreate the same layouts by hand again.

You may also like this: How to add custom patterns in Gutenberg