To edit the header in WordPress, go to Appearance > Editor if you use a block theme, or Appearance > Customize if you use a classic theme. Block themes let you modify the header as a template part using the Site Editor, while classic themes rely on the Theme Customizer panel.
Your WordPress header is the first thing visitors notice. It holds your site logo, navigation menu, and branding elements that set the tone for your entire site. But customizing it can be confusing because the process depends on your theme type, and WordPress offers several different methods.
In this guide, you’ll learn how to edit header in WordPress using the Site Editor, the Theme Customizer, page builders, and code. Whether you’re adjusting your logo, rearranging menu items, or building a completely custom header, you’ll find the right method for your setup below.
Disclosure: Some links in this article are from WPZOOM, the company behind this blog. We recommend our products where they’re genuinely relevant, and we’re transparent about that relationship.
Table of contents
- What Is the WordPress Header?
- How to Identify Your Theme Type Before Editing
- How to Edit the Header in a Block Theme (Site Editor)
- How to Edit the Header in a Classic Theme (Theme Customizer)
- How to Edit the Header with a Page Builder
- How to Edit header.php Directly (Code Method)
- Common Header Customizations
- Frequently Asked Questions
- Wrapping Up
What Is the WordPress Header?
The WordPress header is the top section of your website that appears on every page. It typically contains your site logo, site title, navigation menu, and sometimes additional elements like a search bar, social icons, or a call-to-action button.
Think of it as your site’s welcome mat. It tells visitors who you are, helps them find what they need, and reinforces your brand with every page load.
A well-structured header usually includes:
- Site logo or site title for brand recognition
- Navigation menu linking to your main pages
- Optional elements like a tagline, search bar, social media icons, contact information, or buttons
Important: The WordPress header (the visible top section) is different from the HTML <head> section. The <head> is invisible code that contains meta tags, scripts, and stylesheets. They’re edited differently, and this guide focuses on the visible header. If you need to add code to the <head> section (like tracking scripts or meta tags), jump to the code method section.
How to Identify Your Theme Type Before Editing
Before you start editing, you need to know which type of theme you’re using. This determines which tools are available to you, and choosing the wrong method will waste your time looking for options that don’t exist.
Go to Appearance in your WordPress dashboard and check what you see:
- Editor means you have a block theme. You’ll edit the header using the Site Editor.
- Customize (without an Editor option) means you have a classic theme. You’ll use the Theme Customizer.
- Theme Options panel means your theme has built-in header settings, which are typically the simplest to use.
Here’s a quick comparison to help you pick the right method:
| Method | Best For | Access Path | Flexibility |
|---|---|---|---|
| Site Editor | Block themes (Twenty Twenty-Five, UniBlock PRO, etc.) | Appearance > Editor | High: full block-based editing |
| Theme Customizer | Classic themes (Inspiro, Astra, GeneratePress, etc.) | Appearance > Customize | Medium: limited to theme options |
| Page Builder | Any theme with Elementor, Beaver Builder, or Divi | Plugin-specific menu | High: visual drag-and-drop |
| Code (header.php) | Any classic theme needing structural changes | Theme File Editor or FTP | Maximum: requires PHP knowledge |
Now that you know your theme type, follow the matching section below.
How to Edit the Header in a Block Theme (Site Editor)
If your theme supports Full Site Editing (FSE), your header is a template part: a reusable block-based section that appears across your entire site. The Site Editor, powered by the Gutenberg block editor, lets you modify it visually, the same way you’d edit a page or post.
Accessing the Header Template Part
- From your WordPress dashboard, go to Appearance > Editor.
- In the Site Editor, click Patterns in the left sidebar.
- Scroll down to the Template Parts section and click Header.
- Select the header you want to edit, then click the Edit (pencil) icon.
Alternatively, you can open any page in the Site Editor, click directly on the header area, and select the Edit button that appears. This opens the header template part for editing.
Editing Header Elements
Once the header template part is open, you’ll see the blocks that make up your header. Click the List View icon (three stacked lines) in the top toolbar to see the full block structure. This makes it easier to select and rearrange elements.
You can add, remove, or rearrange any block in the header. Common blocks to use include:
- Site Logo to display your logo image
- Site Title to show your site name as text
- Navigation to add your menu with links to pages
- Social Icons to link to your social media profiles (you can also add social media icons to WordPress using a dedicated plugin)
- Button for a call-to-action like “Contact Us” or “Subscribe”
- Search to add a search bar to the header
To style any block, select it and use the Settings and Styles panels on the right side. You can change colors, typography, spacing, and dimensions for each block individually. Keep in mind that your site’s Global Styles (set in the Styles panel at the top level of the Site Editor) also affect header blocks, so any site-wide font or color choices will apply unless you override them at the block level.
Using Header Patterns
If you don’t want to build a header from scratch, WordPress offers pre-designed header patterns that you can apply in one click.
To browse header patterns:
- While editing the header template part, click the three-dot menu (⋮) next to the header in List View.
- Select Replace Header.
- Browse the available patterns from your theme and the WordPress pattern library.
- Click a pattern to apply it, then customize the blocks as needed.
This is the fastest way to get a polished header without designing every element yourself. For a video walkthrough of this process, the official Learn WordPress header tutorial is a helpful resource.
Creating Different Headers for Different Pages
One of the strengths of block themes is the ability to use different headers on different pages. For example, you might want a minimal header on your homepage and a more detailed one on blog posts.
To create an additional header:
- Go to Appearance > Editor > Patterns.
- Click Add Pattern and select Add Template Part.
- Name it (e.g., “Homepage Header”) and set the area to Header.
- Design your new header using blocks.
- Open the template where you want to use it (e.g., the Front Page template), remove the current header, and insert your new template part.
Keep in mind that editing a shared template part changes it everywhere it’s used. If you only want to change the header on one page type, create a separate template part first.
How to Edit the Header in a Classic Theme (Theme Customizer)
Classic themes use the Theme Customizer for most design changes, including header modifications. The options available depend on your specific theme, but the general process is the same.
Using Built-In Theme Header Settings
Many classic themes include dedicated header options within the Customizer. Here’s the typical process:
- Go to Appearance > Customize in your WordPress dashboard.
- Look for a Header Options, Header & Navigation, or similar panel in the left sidebar.
- Adjust the available settings: header layout, logo position, sticky header toggle, search form visibility, and more.
- Preview your changes in real time on the right side of the screen.
- Click Publish when you’re satisfied.
For example, Inspiro Premium provides complete header layout control within the Customizer. You can select from multiple header layouts, toggle a sticky header, show or hide a search form and cart icon, and preview everything live before publishing.
The specific options vary by theme. Some themes offer extensive header controls, while others provide only basic settings. If your theme’s options feel too limited, consider the page builder method or the code method.
Editing Site Identity (Logo, Title, Tagline)
Every classic theme supports basic site identity settings:
- Go to Appearance > Customize > Site Identity.
- Upload or change your site logo.
- Edit your site title and tagline.
- Choose whether to display the site title alongside the logo.
- While you’re here, you can also set your site icon (favicon).
Customizing the Navigation Menu in the Header
To change which pages appear in your header menu:
- Go to Appearance > Customize > Menus (or Appearance > Menus from the dashboard).
- Select the menu assigned to your primary/header location.
- Add, remove, or reorder menu items.
- Assign the menu to the correct header menu location if it’s not already set.
For a deeper walkthrough on creating menus with submenus, custom links, and conditional items, check out our WordPress navigation menu tutorial.
How to Edit the Header with a Page Builder
If your theme’s built-in options aren’t flexible enough and you want full visual control over every element, a page builder plugin can help.
Elementor Theme Builder is the most popular option. With Elementor Pro, you can design a completely custom header:
- Go to Elementor > Theme Builder in your WordPress dashboard.
- Click the Header section, then Add New.
- Choose a pre-designed header template or start from scratch.
- Use Elementor’s drag-and-drop editor to add elements: logo, menu, search, social icons, buttons, or any other widget.
- Click Publish and set display conditions (all pages, specific pages, specific post types, etc.).
Other page builders like Beaver Builder and Divi offer similar header-building features through their theme builder components.
When a page builder makes sense: You need precise layout control that your theme doesn’t offer, you want different header designs for different sections of your site, or you’re already using a page builder for the rest of your site’s design.
The trade-off: Page builders are third-party plugins. They add flexibility but also add a plugin dependency. If you ever switch away from the plugin, you’ll need to rebuild your header.
How to Edit header.php Directly (Code Method)
For structural changes that go beyond what visual tools can do, you can edit the header template file directly. This method applies to classic themes only (block themes don’t use header.php in the same way).
When to Use the Code Method
- Your theme’s Customizer options are too limited for what you need.
- You need to add custom code to the HTML <head> section (analytics scripts, meta tags, verification codes).
- You need to change the actual HTML markup of your header.
Editing header.php Safely
The header.php file controls the HTML output of your header area. Before editing it, always create a WordPress child theme first. Any changes you make to a parent theme’s header.php will be lost when the theme updates.
To edit header.php:
- Create a child theme if you don’t have one.
- Copy the parent theme’s header.php into your child theme folder.
- Go to Appearance > Theme File Editor and select your child theme, then open header.php. Alternatively, access the file via FTP or your hosting file manager.
- Make your changes and save.
Common edits include modifying the logo markup, changing the header HTML structure, or adding elements that your theme doesn’t support through the Customizer.
Warning: If you edit the parent theme’s header.php directly (without a child theme), a theme update will overwrite all your changes.
Adding Code to the Header Without Editing Files
If you just need to add tracking scripts, meta tags, or custom CSS to the <head> section, you don’t need to edit header.php at all. A safer approach:
- Use a code snippets plugin like WPCode (Insert Headers and Footers). It lets you paste code into the <head> section through a simple interface, and the code survives theme updates.
- Use the wp_head hook in your child theme’s functions.php file. Add a function that hooks into wp_head to output your custom code.
- Use your theme’s built-in hooks if available. Some themes (like Astra and GeneratePress) offer action hooks that let you inject content into specific header locations.
Common Header Customizations
Regardless of which method you use, these are the most frequently requested header changes.
Changing Your Logo
- Block theme: Open the header template part in the Site Editor, select the Site Logo block, and click to replace the image.
- Classic theme: Go to Appearance > Customize > Site Identity and upload a new logo.
Making a Sticky Header
A sticky header stays fixed at the top of the screen as visitors scroll down the page.
- Block theme: Select the outermost header group block, open the block settings, and set Position to Sticky.
- Classic theme: Check your theme’s Customizer settings for a sticky header toggle. If your theme doesn’t offer one, you can add position: sticky; top: 0; z-index: 999; as custom CSS targeting your header element.
Changing Header Colors and Background
- Block theme: Select the header group block, then use the Styles panel to set a background color, gradient, or background image. You can also adjust text and link colors from the same panel.
- Classic theme: Look for color settings in Appearance > Customize > Colors or within your theme’s header options panel. For more control, add custom CSS targeting the header’s class name.
Editing the Header Menu
- Block theme: Select the Navigation block in your header and use the block settings to add, remove, or rearrange menu items directly.
- Classic theme: Go to Appearance > Menus, edit the assigned menu, and save.
For a complete walkthrough on menus, submenus, and mobile navigation, see the navigation menu tutorial linked in the classic theme section above.
Customizing the Mobile Header
On mobile devices, your header typically collapses into a hamburger menu (three horizontal lines that expand to show the navigation).
- Block theme: The Navigation block handles responsive behavior automatically. You can adjust the mobile overlay menu settings in the block’s settings panel.
- Classic theme: Mobile header behavior depends on your theme. Most modern themes automatically create a responsive mobile menu. Check your theme’s Customizer for mobile-specific options like mobile logo size or menu toggle style.
If you’re also looking to update the bottom section of your site, our guide on how to edit the footer in WordPress follows a similar process.
Frequently Asked Questions
Block themes use the Site Editor (Appearance > Editor) where you edit the header as a template part made up of individual blocks. You can add, remove, and rearrange any element. Classic themes use the Theme Customizer (Appearance > Customize) with pre-defined settings panels. Block themes offer more layout flexibility; classic themes are simpler but more limited in what you can change.
Go to Appearance in your WordPress dashboard. If you see an “Editor” option, you have a block theme. If you only see “Customize” (without Editor), you have a classic theme. Some themes fall in between, offering both options, but the presence of the Editor menu is the clearest indicator.
Yes, in block themes. You can create a new header template part, then assign it to specific templates (like Single Post, 404, or a custom template). Classic themes generally display the same header everywhere unless you use a page builder like Elementor, which lets you set display conditions per header template.
In block themes, select the outermost header group block and set its Position to “Sticky” in the block settings sidebar. In classic themes, check your theme options for a sticky header toggle. If there isn’t one, add custom CSS: position: sticky; top: 0; z-index: 999; targeting your header’s CSS selector.
If you edit a shared header template part in a block theme, yes: changes apply everywhere that template part is used. The same applies to Customizer changes in classic themes. To use different headers on different pages with block themes, create multiple header template parts and assign them to different templates.
Duplicate title tags happen when your theme’s header.php hardcodes a <title> tag while an SEO plugin (like Yoast or Rank Math) also generates one. The fix: make sure your theme uses add_theme_support(‘title-tag’) in functions.php and remove any hardcoded <title> tags from header.php. Most modern themes handle this correctly, but older themes may not.
The WordPress header is the visible top section of your site containing your logo, menu, and branding. The HTML <head> section is invisible code between <head> and </head> tags that contains meta tags, scripts, stylesheets, and other technical elements. To edit the visible header, use the Site Editor or Customizer. To add code to the <head>, use a code snippets plugin or the wp_head hook.
Yes. Use a code snippets plugin like WPCode (formerly Insert Headers and Footers) to add tracking scripts, meta tags, or custom CSS to the <head> section without touching header.php. This approach is safer because the code persists through theme updates and doesn’t require a child theme.
Wrapping Up
Knowing how to edit header in WordPress doesn’t have to be complicated. It comes down to identifying your theme type and picking the right tool:
- Block themes give you the most flexibility through the Site Editor and template parts.
- Classic themes keep things simpler with the Theme Customizer and built-in settings.
- Page builders like Elementor add visual design control for any theme.
- Code editing (header.php) handles structural changes that other methods can’t.
Start by checking Appearance in your dashboard to identify your theme type, then follow the matching method in this guide. If you’re looking to customize your WordPress theme beyond just the header, that guide covers the full range of customization options available to you.
