The header is your site's handshake—logo, navigation, and often the only element visible on every page. WordPress themes make basic changes easy until you want sticky bars, dual menus, or a signup button. Touch the wrong template and updates wipe your work. This guide keeps header edits safe across classic themes, block themes, and page builders.
Customizer first: the no-code path
Open Appearance → Customize → Header (labels vary). Most themes let you upload a logo, assign menus, toggle taglines, and adjust colors with live preview. Publish when satisfied—you haven't edited PHP, so parent theme updates stay safe.
- Upload SVG logos when supported for crisp retina display
- Set site icon (favicon) in the same panel
- Assign a Primary menu location under Menu Settings
Classic menus vs block theme headers
Traditional themes use Appearance → Menus. Block themes (Twenty Twenty-Five and similar) edit headers under Appearance → Editor → Template Parts → Header. You're moving blocks, not drag-and-drop menu rows—more flexible, easier to break site-wide if you publish without previewing.
Child themes when Customizer isn't enough
Need a second row, phone icon, or conditional promo banner? Copy header.php into a child theme and edit there. Never modify parent files directly.
- Create
/wp-content/themes/parent-child/ - Add
style.csswithTemplate: parent-folder-name - Copy and customize
header.php - Enqueue child styles in
functions.php
Hooks for lightweight injections
Many themes support wp_body_open for announcement bars without cloning templates:
add_action('wp_body_open', function () {
echo '<div class="promo-bar">New WordPress guide published weekly</div>';
});For CSS-only tweaks, use Customize → Additional CSS and inspect header classes in DevTools.
Page builders and duplicate headers
Elementor, Divi, and Bricks often replace theme headers. Disable the theme header in builder settings to avoid doubles. Document which layer controls mobile hamburger menus—builders hide padding controls deep in widget settings.
Performance and Core Web Vitals
Headers load logos, fonts, and mega-menu JavaScript. Compress logos (WebP where supported), limit font weights to two, and defer non-critical scripts. Sticky headers must keep identical height on scroll to prevent CLS spikes—test iOS Safari carefully.
Schema and SEO plugins
Yoast and Rank Math pull logo URLs from Customizer for Organization schema. After logo changes, revalidate in Google's Rich Results Test. Broken logo URLs in structured data hurt silently.
Troubleshooting quick list
- White space or twin headers: theme header + page builder header both active
- Menu missing on mobile: check separate mobile menu location
- Changes invisible: purge host cache, Cloudflare, and caching plugins
- Broken layout after update: diff child theme header against parent changelog
Accessibility matters
Skip links, keyboard-focusable menu items, and sufficient contrast on CTA buttons support WCAG and improve UX for all readers—AdSense reviewers notice polished navigation.
My recommended timeline
Week one: Customizer only. Week two: child theme for small markup. Week three: block template parts if you're on FSE. Document every custom change so future you survives theme updates without panic.