How to Create Template Parts and Block Templates for Your Theme: A Complete Guide

Why Use Template Parts? 

1. 1. 1. They keep your theme modular
         
      2. They let users customize sections without editing code
         
      3. They improve consistency across the site
         
      4. They integrate tightly with the Site Editor
         
      5. They reduce repetitive structure in templates 

Common template part examples include: 

1. 1. 1. header.html
         
      2. footer.html
         
      3. sidebar.html
         
      4. Custom template parts like hero.html, newsletter.html, etc. 

What Are Block Templates? 

Block templates define the structure of an entire page or post type using blocks. A template may include: 

1. 1. 1. Header block 
      2. Content area 
      3. Query loop 
      4. Sidebar block 
      5. Footer block 
      6. CTA section 
      7. Custom template parts 

You can create block templates for: 

1. 1. 1. Pages 
      2. Posts 
      3. Custom post types 
      4. Archives 
      5. 404 pages 
      6. Search results 
      7. WooCommerce templates 

Block templates live in your theme’s /templates directory and are written using block markup in .html files.

Folder Structure for Templates and Template Parts 

To build block templates and template parts, ensure your theme follows this structure: 

your-theme/ 

 ├─ templates/ 

 │   ├─ index.html 

 │   ├─ single.html 

 │   ├─ archive.html 

 │   └─ page.html 

 ├─ parts/ 

 │   ├─ header.html 

 │   ├─ footer.html 

 │   └─ sidebar.html 

 └─ theme.json 

If your theme does not have these folders, you can create them manually.

How to Create Template Parts 

Creating template parts is simple once you understand the block markup approach that Gutenberg uses. 

1. 1. Create Your Template Part File

Inside your theme, navigate to: 

• /parts/ 

Create a file such as: 

• header.html

1. 2. Add Block Markup Inside the File

Block themes use HTML files that contain block comment markup, like this: 

This file now becomes a template part that can be reused anywhere in your theme. 

1. 3. Register Template Parts via theme.json

To enhance flexibility, register template parts using the templateParts section:

1. 4. Include Template Parts Inside Templates

In your template, such as index.html: 

That’s it—your template parts are now dynamic and editable. 

How to Create Block Templates for Your Theme 

Block templates define the structure of entire pages. They replace legacy PHP templates. 

1. 1. Create a Template File inside /templates/

Example: 

• single.html 

1. 2. Add Your Page Layout Using Blocks

Sample block template for single posts:

This defines the entire layout of your single post template. 

1. 3. Create a Custom Template for Pages or CPTs

If you have a custom post type like portfolio, create: 

• templates/single-portfolio.html 

Then add layout: 

WordPress automatically assigns the template to your custom post type. 

Using theme.json to Control Template Behavior 

The theme.json file is the heart of block theme configuration. It controls: 

• Layout 

• Colors 

• Typography 

• Spacing 

• Borders 

• Template parts 

• Custom templates 

Register Block Templates via theme.json :  

You can tell WordPress about your templates like this:

Now this template shows up in the Page Template dropdown.