The header and footer are the most-visited parts of any website. They frame every page, carry your navigation, establish your brand identity, and often contain critical calls to action. In WordPress block themes, headers and footers are implemented as template parts — HTML files in your theme’s parts directory that can be edited directly in the Site Editor without touching a single line of PHP. This guide covers how to build, customize, and extend header and footer template parts in block themes: from the basics of what a template part is to advanced patterns like sticky headers, transparent overlays, mega navigation, and multiple header variations for different page templates.
What Are Template Parts?
Template parts are reusable sections of a page layout, defined as HTML files in your theme’s parts directory. They are included in block templates using the Template Part block, which references the part by its slug attribute. When WordPress renders a template, it replaces each Template Part block with the contents of the corresponding file from the parts directory.
The most common template parts are header.html and footer.html, but you can create as many parts as your design requires — sidebar.html, post-meta.html, comments-section.html, newsletter-signup.html, or any other reusable section. Every template part is a self-contained piece of block markup that can be included in multiple templates throughout your theme.
Template parts are registered in theme.json under the templateParts array. Each registration entry includes a name (matching the filename without extension), a title (displayed in the Site Editor UI), and an area property. The area property is important because it determines the HTML wrapper element and how the Site Editor displays the part. Header parts use area “header” and get wrapped in a semantic header HTML element. Footer parts use area “footer” and get a footer element. Other parts use area “uncategorized” and get a div wrapper.
Users can edit template parts through the Site Editor (Appearance → Editor → Patterns → Template Parts). Their changes are saved in the database as wp_template_part posts, which take priority over theme file versions. This means user customizations survive theme updates — the same override behavior that applies to full templates applies to template parts.
Building the Header Template Part
A well-structured header template part typically contains three core elements: the site logo or title, the primary navigation menu, and optionally a search form, social links, or call-to-action button. These elements are arranged using the Row block (a Group block with flex-row layout) for horizontal alignment.
The basic header structure uses a Group block as the outermost container with a constrained layout to respect the content width defined in theme.json. Inside, a Row block arranges the Site Logo block and Navigation block side by side. The Row block’s justification is set to space-between, which pushes the logo to the left and navigation to the right — the most common header layout pattern.
Header Layout Patterns
Logo left, navigation right is the standard pattern used by the majority of websites. It uses a single Row block with space-between justification. The Site Logo block sits first in the row, followed by the Navigation block. This pattern works well for sites with 5 to 7 primary menu items and is the easiest to make responsive because the Navigation block’s built-in overlay handles the mobile transition.
Centered logo with split navigation places the logo in the center with navigation items split on either side. This requires two Navigation blocks — one for left-side items and one for right-side items — with the Site Logo block between them in a Row block. This pattern is popular for restaurant sites, fashion brands, and portfolio websites. The challenge is keeping navigation balanced on both sides and handling the mobile transition gracefully, since two separate Navigation blocks each generate their own mobile overlay.
Stacked header puts the logo and tagline on one line with the navigation on a separate line below. This uses a Stack block (Group with flex-column layout) containing two Row blocks. The top row holds the Site Logo and Site Tagline, the bottom row holds the Navigation block with a contrasting background color. This pattern works well for news sites and content-heavy websites that want prominent navigation without competing with the logo.
Transparent overlay header positions the header over hero content with no background color. The Group block wrapping the header has no background, and the header is positioned absolute or sticky via custom CSS. Menu items use light text colors that contrast against the hero image below. This pattern requires careful z-index management and should include a scroll-triggered background color change so navigation remains readable as users scroll past the hero section.
Adding a Search Form to the Header
The Search block can be placed inside the Navigation block or alongside it in the header Row block. When placed inside the Navigation block, the search form appears as part of the menu and collapses into the mobile overlay. When placed alongside the Navigation block, it stays visible independently of the mobile menu state. Most themes place a compact search icon (using the Search block’s “button only” variation) inside the navigation for a clean header design.
Adding Social Links to the Header
The Social Links block provides a set of icon links for social media profiles. Place it in the header Row block after the Navigation block for a common layout pattern. Style the icons to match your header color scheme using theme.json presets. Keep the number of social icons limited — three to five is ideal for a header. More social links belong in the footer where space is less constrained.
Building the Footer Template Part
Footer template parts typically need more layout complexity than headers because they contain more content — multiple columns with navigation links, contact information, social media links, a newsletter signup form, legal links, and a copyright notice. The footer is also the natural place for secondary navigation that does not fit in the primary header menu.
Multi-Column Footer Layout
The most common footer pattern uses a Columns block to create a multi-column layout. A typical four-column footer includes: column one with the Site Logo and a brief site description, column two with a Navigation block for important pages, column three with another Navigation block for support or legal pages, and column four with social links and a newsletter signup. Below the columns, a full-width row contains the copyright notice and legal links.
Use a Group block as the footer’s outer container with a dark background color (contrasting with the main content area). Set the Group’s layout to constrained to respect the content width. Inside, the Columns block handles the multi-column arrangement, and a separator or spacer block divides the main footer content from the bottom copyright bar.
Footer Navigation
Footer navigation menus are separate from the header navigation. They use their own Navigation blocks with independent wp_navigation posts. Footer menus typically include pages that do not belong in the primary navigation: Privacy Policy, Terms of Service, Accessibility Statement, Cookie Policy, Sitemap, and other legal or utility pages. Some footers also duplicate the primary navigation for convenience, which improves internal linking and helps users who scroll to the bottom of a page find their way around the site.
Copyright and Legal Section
The footer’s bottom section typically contains the copyright notice and legal links in a single row. Use a Paragraph block for the copyright text and a Navigation block for legal links, arranged in a Row block with space-between justification. For the copyright year, you can use a Shortcode block with a custom shortcode that outputs the current year dynamically, or simply update the year manually during your annual theme review.
Sticky Headers
Sticky headers remain fixed at the top of the viewport as users scroll down the page. They keep navigation accessible without requiring users to scroll back to the top. In block themes, implementing a sticky header requires CSS because the block editor does not have a built-in sticky option for template parts.
The CSS approach targets the header template part’s wrapper element with position: sticky and top: 0. Add a z-index high enough to keep the header above all page content (z-index: 100 is usually sufficient). Include a background-color to prevent page content from showing through the header as users scroll.
For a more refined experience, consider a shrinking sticky header that reduces in height after the user scrolls past a threshold. This can be achieved with scroll-driven CSS animations (using the animation-timeline: scroll() property) or the Interactivity API for more complex behavior. The shrinking effect reduces the header’s padding and logo size to give more space to the content while keeping navigation accessible.
Performance consideration: sticky headers trigger paint operations on every scroll frame because the browser must composite the sticky element above the scrolling content. Keep your header template part lightweight — avoid complex box shadows, backdrop-filter effects, or large images in the header to minimize the performance impact of sticky positioning.
Multiple Header and Footer Variations
Many themes need different headers or footers for different contexts. A landing page might need a minimal header with just the logo and no navigation. A blog post might need the full header with search and social links. An e-commerce checkout page might need a distraction-free header with only the logo and a security badge.
Block themes support multiple template part variations by creating additional files in the parts directory with descriptive names: header-minimal.html, header-landing.html, header-checkout.html, footer-minimal.html. Register each variation in theme.json’s templateParts array with a descriptive title.
Then create custom templates that reference different header parts. Your default template uses the standard header, while your landing page template uses header-minimal, and your checkout template uses header-checkout. Users assign custom templates to specific pages through the page editor, which automatically selects the appropriate header and footer variation.
This approach is more maintainable than trying to handle all header variations in a single template part with conditional logic. Each variation is a clean, independent file that is easy to understand and modify. For guidance on how templates and template parts work together, see our template hierarchy guide.
Responsive Design for Headers and Footers
Headers and footers must work across all viewport sizes. The Navigation block handles its own mobile responsiveness through the overlay menu system, but the rest of your header and footer layout needs responsive consideration.
For headers, the Row block that arranges logo and navigation will stack vertically on narrow viewports by default when using the flex-wrap property. However, the better approach for most themes is to keep the logo and hamburger toggle on the same row at mobile sizes, with the full navigation appearing in the overlay. This happens automatically when using the Navigation block with overlayMenu set to “mobile”.
For footers, the Columns block automatically stacks columns vertically on narrow viewports. A four-column desktop footer becomes a single-column mobile footer, with each section stacking in source order. Test this behavior to ensure the stacking order makes sense on mobile — the most important footer content should appear first in the source order so it appears at the top of the mobile footer.
Consider reducing footer content on mobile. A desktop footer with four columns, 20 navigation links, social icons, a newsletter form, and a copyright bar can become overwhelming on a small screen. Use CSS to hide less important footer sections on mobile, or create a footer-mobile.html template part that provides a simplified mobile footer experience.
Accessibility for Headers and Footers
Headers and footers carry significant accessibility responsibility because they appear on every page and contain the primary navigation elements that assistive technology users rely on.
- Use semantic HTML areas. Register header parts with area “header” and footer parts with area “footer” in theme.json. This ensures WordPress wraps them in semantic header and footer elements, which screen readers use to identify and skip to these landmark regions.
- Include a skip navigation link. Add a “Skip to content” link as the first element in your header template part. Style it to be visually hidden but visible on keyboard focus. This lets keyboard users bypass the entire header and jump directly to the main content area.
- Ensure the navigation is keyboard-accessible. The Navigation block handles keyboard accessibility natively — Tab moves between menu items, Enter activates links, Escape closes submenus. Do not add custom JavaScript that interferes with these built-in keyboard behaviors.
- Test color contrast in both header and footer. Headers often use different background colors than the main content, and footers commonly use dark backgrounds with light text. Each combination must meet WCAG 2.1 AA contrast requirements (4.5:1 for normal text, 3:1 for large text).
- Do not rely on hover for important content. Any content revealed by hovering (dropdown menus, tooltips) must also be accessible via keyboard focus and touch. The Navigation block handles this for dropdown menus, but custom hover effects you add need the same treatment.
Styling Template Parts with theme.json
theme.json provides styling controls for template parts through the styles section. While you cannot target template parts directly by name in theme.json, you can style the blocks within them using styles.blocks settings. The Navigation block, Site Logo block, Social Links block, and other blocks commonly used in headers and footers all accept per-block styling in theme.json.
For the header’s overall appearance, set background colors, padding, and border styles on the Group block that wraps your header content. Use theme.json color presets so users can modify the header’s color scheme through Global Styles without editing template files. The same approach applies to footer styling — define the footer Group’s background, text color, and spacing through theme.json presets.
For navigation styling within the header, use the styles.blocks.core/navigation section in theme.json to set default colors, font size, font weight, and spacing for menu items. This ensures all Navigation blocks in your theme start with consistent styling that users can customize through the Site Editor. For a complete guide to building design systems in theme.json, see our design system guide.
Performance Best Practices
Headers and footers load on every page, so their performance impact is multiplied across your entire site. Every byte in your header template part affects every single page load.
- Minimize block count. Each block in your template part adds parsing and rendering overhead. A header with 15 nested blocks is noticeably slower to render server-side than one with 8 blocks. Flatten your block hierarchy where possible — do you really need a Group inside a Group inside a Row?
- Avoid images in the header. Use the Site Logo block with an optimized SVG logo rather than a large PNG or JPEG. SVG logos are resolution-independent and typically much smaller in file size. If you must use a raster logo, ensure it is properly sized and compressed.
- Keep footer content reasonable. Footers with embedded maps, Instagram feeds, or complex widget areas add significant weight to every page load. Move heavy content to a dedicated page and link to it from the footer instead of embedding it directly.
- Use native blocks over custom blocks. Core blocks are optimized for performance and cached effectively. Custom third-party blocks in your header or footer may add JavaScript bundles and CSS files that load on every page. Audit your template parts periodically to identify and remove unnecessary third-party blocks.
Frequently Asked Questions
Can I use different headers on different pages without custom templates?
Custom templates are the recommended approach for page-specific headers. However, you can also use the block visibility features of some plugins to conditionally show or hide elements within a single header template part. The native block editor does not support conditional visibility, but plugins like Block Visibility let you set conditions on individual blocks. This approach works for simple variations (hiding the search form on the homepage) but becomes unwieldy for significantly different header layouts.
How do I add a top bar above the main header?
Create a separate template part (parts/top-bar.html) containing announcement text, contact information, or secondary navigation. Include both the top-bar and header template parts in your templates, stacked vertically. The top bar typically uses a narrow height, small font size, and a distinct background color. Register it in theme.json as a separate template part with area “header” so it gets proper semantic wrapping.
Why do my header changes not appear on all pages?
If header changes only appear on some pages, check whether those pages use different templates that reference different header parts. Also check whether some pages have been assigned custom templates through the page editor. Additionally, if you edited the header through the Site Editor, the changes are stored in the database and apply globally — but if some templates reference a different header part (header-minimal.html vs header.html), those templates will not reflect the changes.
How do I make the footer stick to the bottom on short pages?
A sticky footer (one that stays at the bottom of the viewport when page content is shorter than the viewport height) requires CSS on the page layout, not just the footer. Set your page wrapper to min-height: 100vh with display: flex and flex-direction: column. Set the main content area to flex-grow: 1. This pushes the footer to the bottom regardless of content height. In block themes, target the .wp-site-blocks class (the page wrapper) and the main element with these flex properties.
Summary
Header and footer template parts are the foundation of your block theme’s layout. They appear on every page and establish the visual framework that users experience throughout the site. Build your header with a clean layout using Row blocks for horizontal arrangement, include the Navigation block for primary navigation with proper mobile overlay behavior, and keep the block count minimal for performance. Build your footer with Columns blocks for multi-column layouts, separate Navigation blocks for footer-specific links, and a clear copyright section. Use multiple template part variations for different page contexts, ensure accessibility through semantic HTML and proper contrast, and style everything through theme.json for maximum user customizability. A well-built header and footer template part set elevates the entire theme experience.