WordPress Template Parts: Reusable Components

Template parts are the fundamental building blocks of modular design in WordPress block themes. These reusable components enable consistent design patterns across your entire site while dramatically reducing redundancy and maintenance overhead in theme development.

Understanding Template Parts Architecture

In traditional PHP themes, developers used functions like get_header(), get_footer(), and get_sidebar() to include reusable template sections. Block themes replace this approach with template parts—HTML files stored in the /parts directory that can be inserted into any template using the Template Part block. This architectural shift brings the DRY (Don’t Repeat Yourself) principle to WordPress theming while making these components visually editable.

Template parts exist independently from templates, stored separately in both the file system and the Site Editor interface. When you reference a template part in multiple templates, changes to that part propagate everywhere it appears. This creates a single source of truth for common site elements, ensuring consistency and simplifying updates across your entire site.

Creating and Organizing Template Parts

Template parts are HTML files placed in your theme’s /parts directory. Common template parts include header.html for site headers, footer.html for site footers, sidebar.html for sidebar content, and post-meta.html for post metadata displays. The filename becomes the template part slug used for referencing it in templates.

Each template part file begins with HTML comments defining its metadata. The structure looks like: <!-- wp:template-part {"slug":"header","theme":"your-theme-name","area":"header"} /-->. The “area” property categorizes the template part, with accepted values including “header”, “footer”, “sidebar”, and “uncategorized”. This categorization helps organize template parts in the Site Editor interface.

Inside template parts, you build layouts using any blocks you need. A header template part typically contains Site Logo, Site Title, Navigation, and potentially Search blocks arranged in a Group or Row block. Footer template parts often include navigation menus, social icons, copyright text, and site information organized with appropriate spacing and alignment.

Inserting Template Parts Into Templates

To use a template part in a template, add the Template Part block and select which part to insert. In HTML, this renders as: <!-- wp:template-part {"slug":"header","area":"header"} /-->. The Site Editor provides a dropdown selector showing all available template parts filtered by area when applicable.

Template parts can be nested within other blocks for advanced layouts. You might wrap your header template part in a Group block with a background color, or place a sidebar template part inside a Column block for multi-column layouts. This composability enables sophisticated page structures while maintaining clean, reusable components.

Template Part Variations and Context

Some template parts need variations for different contexts. You might create header.html as your default header, header-minimal.html for landing pages, and header-wide.html for full-width pages. Each variation serves specific use cases while sharing common design language. Templates can choose which variation to use based on their requirements.

Footer variations work similarly. A standard footer.html might include extensive navigation and information, while footer-simple.html contains only copyright text and essential links. This flexibility lets you match template parts to template contexts without compromising on component reusability.

Editing Template Parts in the Site Editor

The Site Editor provides two methods for editing template parts. First, you can edit them directly from the Template Parts section in the sidebar, which opens the template part in isolation. This focused editing environment shows only the template part without surrounding template context, ideal for working on the component itself.

Alternatively, when editing a template that includes a template part, you can click “Edit” on the template part block to switch focus to that component. This approach lets you see the template part within its template context, making it easier to ensure proper integration with surrounding elements. After editing, you can navigate back to the containing template.

Changes made to template parts in the Site Editor are stored in the database as customizations, overriding the theme’s default files. This allows safe experimentation without modifying theme files directly. You can reset template parts to theme defaults using the “Clear customizations” option, discarding all changes.

Block Locking in Template Parts

Block locking becomes especially valuable in template parts that you want to protect from accidental modification. Select any block within a template part and access locking options from the block toolbar menu. “Prevent removal” stops users from deleting the block while allowing content and style changes. “Lock all” prevents any modifications including content, positioning, and deletion.

You can lock entire template parts at the template level using the same controls on the Template Part block itself. This prevents users from removing or replacing the template part while still allowing editing of its contents. Combine this with selective block locking inside the template part to create flexible yet protected component structures.

Dynamic Template Parts with Query Loops

Template parts can contain Query Loop blocks for dynamic content display. A recent-posts.html template part might include a Query Loop showing the latest blog posts, usable in footers or sidebars across multiple templates. This pattern separates content logic from template structure while maintaining reusability.

Similarly, a category-navigation.html template part could contain a Categories List block, a tag-cloud.html part might display a Tag Cloud block, and a search-form.html part could include the Search block. These focused, single-purpose template parts become building blocks you combine to create complex layouts.

Styling Template Parts

Template parts inherit global styles from theme.json but can also have block-specific styling applied within the part itself. A header template part might use a Group block with a dark background color, white text, and specific padding values. These styles are scoped to that template part and travel with it wherever it’s used.

Consider using CSS classes on wrapper blocks in template parts for additional styling flexibility. Add a custom class like “site-header” to the outermost Group block in your header template part, then define styles for this class in your theme’s style.css. This approach provides styling beyond what theme.json offers while keeping template parts semantically meaningful.

Template Parts and Theme Patterns

Template parts differ from block patterns in purpose and behavior. Patterns are templates for content that users insert and then customize independently—each pattern insertion creates a new, disconnected instance. Template parts create references to shared components—editing the template part updates all instances across the site.

Use template parts for site structure elements that should remain consistent: headers, footers, sidebars, and repeated layouts. Use patterns for content templates that users customize per instance: call-to-action sections, testimonial layouts, or feature grids. Understanding this distinction helps you architect maintainable theme systems.

Best Practices for Template Parts

Keep template parts focused and single-purpose. A header should handle header concerns, not include footer elements or sidebar content. This separation makes template parts more reusable and easier to maintain. Name template parts descriptively using slugs that indicate their purpose and any variations.

Document your template parts, especially when building themes for distribution or client handoff. Use descriptive area assignments and consider adding HTML comments within template part files explaining their purpose and usage context. Version control template part files carefully, testing changes across all templates that reference them before deployment.

Template parts represent a cornerstone of modern WordPress theme architecture, enabling the modular, maintainable, and flexible design systems that block themes promise. Mastering template part creation and management is essential for building professional block themes that scale effectively and empower users with visual customization while protecting design integrity.