The header is the first thing visitors see and the first thing you break when you edit the wrong file. WordPress makes header changes feel simple because themes expose a logo upload and menu picker—but once you want custom layout, sticky behavior, or a CTA button, the path splits fast.
Start with the Customizer (safest for beginners)
Go to Appearance → Customize → Header (exact labels vary by theme). Most modern themes let you:
- Upload a logo and site icon
- Assign a primary menu
- Toggle tagline visibility
- Adjust header width, background, and colors
Changes preview live. Publish when it looks right. You haven't touched PHP, so updates are unlikely to wipe your work—unless the theme stores layout in theme mods that reset on theme switch.
Editing menus without code
Under Appearance → Menus, build your header navigation. Drag items to reorder. Use custom links for CTAs. If the menu doesn't show, assign it to the "Primary" or "Header" location in the Menu Settings tab.
Block themes (Twenty Twenty-Four and similar) use Appearance → Editor → Template Parts → Header. You're editing blocks, not a classic menu panel. It's more flexible but easier to accidentally publish a layout site-wide.
Child themes: when you outgrow the Customizer
Need a phone icon, second row, or conditional banner? Copy your theme's header.php into a child theme and edit there. Never edit parent theme files directly—updates will overwrite you.
Typical child theme steps:
- Create
/wp-content/themes/yourtheme-child/ - Add
style.csswith Template header pointing to parent - Copy
header.phpfrom parent, modify markup - Enqueue child stylesheet in
functions.php
Header hooks for developers
Many themes call wp_head() and wp_body_open(). Use actions to inject scripts or banners without cloning entire templates:
add_action('wp_body_open', function () {
echo '<div class="site-notice">Free shipping this week</div>';
});For CSS-only tweaks, use Appearance → Customize → Additional CSS or the child theme stylesheet. Target your theme's header class—inspect with browser DevTools to find it.
Full Site Editing (FSE) headers
Block themes store headers as template parts in the database. Export them before major edits (Tools → Export or copy template part JSON). Patterns and reusable blocks help keep logos and nav consistent across templates.
Performance and Core Web Vitals
Headers often load large logos, Google Fonts, and mega-menu scripts. Compress logos (WebP if your stack supports it), limit font weights, and defer non-critical scripts. A heavy header hurts LCP because the logo or hero sits above the fold.
Troubleshooting checklist
- White space or duplicate header: check if both theme header and a page builder header are active
- Menu missing on mobile: look for separate mobile menu location or hamburger block settings
- Changes not showing: clear cache (hosting, Cloudflare, caching plugin)
- Broken layout after update: compare child theme header with parent changelog
What I'd do on a new site
Week one: Customizer only. Week two: child theme for small markup changes. Week three: block template part if I'm on FSE. Skip hardcoding unless you document it—future you will thank present you when the theme updates.
Logo sizing and retina displays
Upload SVG logos when your theme supports them—crisp at every size. For PNG, export at 2x the display height (e.g., 80px header → 160px file) and let WordPress or CSS scale down. Oversized 4000px logos in the media library slow admin and sometimes front-end if the theme outputs full resolution.
Sticky headers without jank
Sticky navigation improves UX on long tutorials but adds CLS if the bar height changes on scroll. Keep sticky and non-sticky heights identical. Test on iOS Safari—address bar show/hide triggers more layout bugs than desktop Chrome.
Schema and header markup
Many SEO plugins inject Organization schema using logo URL from Customizer. After changing logo, revalidate in Rich Results Test. Broken logo URLs in schema are a silent SEO footgun.
Working with page builders
Elementor, Divi, and Bricks often replace theme headers with template kits. Disable the theme header in builder settings to avoid doubles. Document which layer controls mobile menu—builders hide it under hamburger widgets with separate padding controls.
Accessibility notes
Skip links, keyboard-focusable menu items, and sufficient color contrast in header CTAs matter for WCAG and indirectly for SEO. Don't rely on color alone for active menu states—add underline or bold.