Building Template Parts

What Are Template Parts?

Template parts are reusable components—headers, footers, sidebars—that can be included in any template.

Registering Template Parts

In theme.json:

{
    "templateParts": [
        {
            "name": "header",
            "title": "Header",
            "area": "header"
        },
        {
            "name": "footer",
            "title": "Footer",
            "area": "footer"
        },
        {
            "name": "sidebar",
            "title": "Sidebar",
            "area": "uncategorized"
        },
        {
            "name": "header-minimal",
            "title": "Header (Minimal)",
            "area": "header"
        }
    ]
}

Template Part Areas

Creating parts/header.html

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"backgroundColor":"dark","textColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-light-color has-dark-background-color has-text-color has-background">
    
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
    <div class="wp-block-group">
        
        <!-- wp:site-title {"level":0} /-->
        
        <!-- wp:navigation {"ref":123,"overlayMenu":"mobile","layout":{"type":"flex","justifyContent":"right"}} /-->
        
    </div>
    <!-- /wp:group -->
    
</div>
<!-- /wp:group -->

Advanced Header with Logo

<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
<header class="wp-block-group">
    
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
    <div class="wp-block-group">
        
        <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
        <div class="wp-block-group">
            <!-- wp:site-logo {"width":60} /-->
            <!-- wp:site-title {"level":0,"style":{"typography":{"fontWeight":"700"}}} /-->
        </div>
        <!-- /wp:group -->
        
        <!-- wp:navigation {"ref":123,"overlayMenu":"mobile","overlayBackgroundColor":"dark","overlayTextColor":"light","layout":{"type":"flex"}} -->
        <!-- /wp:navigation -->
        
    </div>
    <!-- /wp:group -->
    
</header>
<!-- /wp:group -->

Creating parts/footer.html

<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"backgroundColor":"dark","textColor":"light","layout":{"type":"constrained"}} -->
<footer class="wp-block-group has-light-color has-dark-background-color">
    
    <!-- wp:columns -->
    <div class="wp-block-columns">
        
        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:heading {"level":4} -->
            <h4>About</h4>
            <!-- /wp:heading -->
            <!-- wp:paragraph {"fontSize":"small"} -->
            <p class="has-small-font-size">A brief description of your site and what it offers visitors.</p>
            <!-- /wp:paragraph -->
        </div>
        <!-- /wp:column -->
        
        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:heading {"level":4} -->
            <h4>Quick Links</h4>
            <!-- /wp:heading -->
            <!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} -->
            <!-- /wp:navigation -->
        </div>
        <!-- /wp:column -->
        
        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:heading {"level":4} -->
            <h4>Connect</h4>
            <!-- /wp:heading -->
            <!-- wp:social-links {"iconColor":"light","iconColorValue":"#ffffff"} -->
            <ul class="wp-block-social-links has-icon-color">
                <!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->
                <!-- wp:social-link {"url":"https://facebook.com/","service":"facebook"} /-->
                <!-- wp:social-link {"url":"https://linkedin.com/","service":"linkedin"} /-->
            </ul>
            <!-- /wp:social-links -->
        </div>
        <!-- /wp:column -->
        
    </div>
    <!-- /wp:columns -->
    
    <!-- wp:separator {"className":"is-style-wide"} -->
    <hr class="wp-block-separator is-style-wide" />
    <!-- /wp:separator -->
    
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
    <div class="wp-block-group">
        <!-- wp:paragraph {"fontSize":"small"} -->
        <p class="has-small-font-size">© 2025 Your Site. All rights reserved.</p>
        <!-- /wp:paragraph -->
        <!-- wp:paragraph {"fontSize":"small"} -->
        <p class="has-small-font-size"><a href="/privacy-policy/">Privacy Policy</a></p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:group -->
    
</footer>
<!-- /wp:group -->

Creating parts/sidebar.html

<!-- wp:group {"tagName":"aside","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
<aside class="wp-block-group">
    
    <!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search"} /-->
    
    <!-- wp:group {"style":{"spacing":{"padding":"var:preset|spacing|20"}},"backgroundColor":"light"} -->
    <div class="wp-block-group has-light-background-color">
        <!-- wp:heading {"level":3,"fontSize":"medium"} -->
        <h3 class="has-medium-font-size">Categories</h3>
        <!-- /wp:heading -->
        <!-- wp:categories /-->
    </div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"spacing":{"padding":"var:preset|spacing|20"}},"backgroundColor":"light"} -->
    <div class="wp-block-group has-light-background-color">
        <!-- wp:heading {"level":3,"fontSize":"medium"} -->
        <h3 class="has-medium-font-size">Recent Posts</h3>
        <!-- /wp:heading -->
        <!-- wp:latest-posts {"postsToShow":5,"displayPostDate":true} /-->
    </div>
    <!-- /wp:group -->
    
</aside>
<!-- /wp:group -->

Using Template Parts

Include in any template:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- Main content here -->

<!-- wp:template-part {"slug":"sidebar"} /-->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Two-Column Layout with Sidebar

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    
    <!-- wp:columns -->
    <div class="wp-block-columns">
        
        <!-- wp:column {"width":"66.66%"} -->
        <div class="wp-block-column" style="flex-basis:66.66%">
            <!-- wp:post-content /-->
        </div>
        <!-- /wp:column -->
        
        <!-- wp:column {"width":"33.33%"} -->
        <div class="wp-block-column" style="flex-basis:33.33%">
            <!-- wp:template-part {"slug":"sidebar"} /-->
        </div>
        <!-- /wp:column -->
        
    </div>
    <!-- /wp:columns -->
    
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Next Steps

In the next lesson, we'll create reusable block patterns.