ThisCalculator

Everyday

How to Edit Header in WordPress: Full Guide

Updated · Standard formula, shown below

To edit the header in WordPress, you can use the built-in Site Editor (for block themes), the Customizer (for classic themes), or a page builder plugin. This guide covers each method, plus how to change the header text, logo, menu, and styling.

Understanding WordPress Headers

A header is the top section of your website that typically contains your site title or logo, navigation menu, and sometimes a search bar or social icons. In WordPress, headers are controlled by your theme. There are two main types of themes:

  • Block themes (introduced in WordPress 5.9) use the Site Editor to edit all parts of the site, including the header.
  • Classic themes use the Customizer and PHP template files (like header.php) to define the header.

Knowing which type you have is the first step, because the editing interface differs significantly.

Method 1: Using the Site Editor (Block Themes)

If your theme is a block theme (most modern themes like Twenty Twenty-Four), you can edit the header using the Site Editor. Here’s how:

  1. Go to Appearance → Editor in your WordPress admin dashboard.
  2. In the Site Editor, click on the header template part (usually at the top of the page). You can also navigate to Patterns → Template Parts and select the header.
  3. You’ll see the header as a block. Click on any element (logo, site title, menu) to edit it. Use the block settings on the right to change text, colors, typography, and spacing.
  4. To change the logo, click on the logo block, then in the block settings click “Replace” to upload a new image.
  5. To edit the menu, click on the Navigation block. You can add, remove, or reorder menu items directly.
  6. When you’re done, click Save to apply changes.

If you don’t see the header as a separate template part, you can also edit the header directly on the page template (like the front page or blog index) by clicking the header area and editing it there.

Method 2: Using the Customizer (Classic Themes)

For classic themes (like older versions of Twenty Seventeen), you’ll use the Customizer to edit the header:

  1. Go to Appearance → Customize.
  2. Look for a section called “Header”, “Site Identity”, or “Header Image” (the exact name varies by theme).
  3. In “Site Identity”, you can upload a logo, set the site title and tagline, and sometimes add a header image.
  4. To change the menu, go to “Menus” in the Customizer, select the menu assigned to the header location, and edit its items.
  5. Some themes allow you to change header background color or text color under “Colors”.
  6. Click Publish to save changes.

If your theme doesn’t have a header option in the Customizer, you may need to edit the header.php file directly (see Method 4).

Method 3: Using a Page Builder (Elementor, Beaver Builder)

Page builder plugins like Elementor or Beaver Builder let you create a custom header visually, without touching code. This is popular for those who want full control over design.

  1. Install and activate a page builder plugin (e.g., Elementor).
  2. Go to the plugin’s theme builder section (in Elementor: Templates → Theme Builder).
  3. Create a new template and choose “Header”.
  4. Design your header using drag-and-drop widgets (logo, menu, buttons).
  5. Set the display conditions (e.g., entire site, specific pages).
  6. Publish the template. The header will replace the theme’s default header.

This method is ideal if you want a sticky header, transparent header, or a completely custom layout.

Method 4: Editing header.php (For Developers)

If you’re comfortable with code, you can edit the header.php file directly. This is the most flexible but also the riskiest method because mistakes can break your site.

  1. Access your site files via FTP or your hosting file manager.
  2. Navigate to /wp-content/themes/your-theme/ and open header.php.
  3. Make your changes to the HTML/PHP code. For example, to change the header text, find the line that outputs the site title and modify it.
  4. Save the file and check your site.

Important: Always use a child theme when editing theme files directly. If you edit the parent theme, your changes will be lost when you update the theme.

Common Header Elements and How to Edit Them

Logo

To change the logo, use the Site Editor (block themes) or Customizer (classic themes). In the Customizer, look for “Site Identity” and upload a new logo. For block themes, click the logo block and replace the image.

Site Title and Tagline

These are usually set in the Customizer under “Site Identity”. In block themes, click the site title block and edit the text. You can also hide the tagline if you don’t want it.

Navigation Menu

Menus are managed under Appearance → Menus (classic themes) or directly in the Site Editor (block themes). You can create a new menu, add pages, and assign it to the header location.

Header Image or Background

Some themes allow a header image. In the Customizer, look for “Header Image”. In block themes, you can add a cover block in the header and set a background image.

Styling (Colors, Fonts, Spacing)

In block themes, use the global styles (Style book) to change colors and typography site-wide. In classic themes, you may need to add custom CSS under Appearance → Customize → Additional CSS.

Frequently Asked Questions

Why can’t I edit my header in WordPress?

If you don’t see the header in the Site Editor or Customizer, your theme may not support header customization. Try switching to a block theme (like Twenty Twenty-Four) or use a page builder plugin to create a custom header.

How do I make my header sticky?

In block themes, you can enable the “Sticky” option in the header block’s position settings. In classic themes, you’ll need to add custom CSS (e.g., `position: sticky; top: 0;`) or use a plugin.

Can I edit the header in WordPress without coding?

Yes. Use the Site Editor (block themes) or a page builder plugin like Elementor. Both allow drag-and-drop editing without touching code.

Why did my header disappear after updating my theme?

If you edited the header.php file in the parent theme, the update may have overwritten your changes. Always use a child theme for customizations. If you used a page builder, check that the template is still assigned.

How do I add a phone number or email to the header?

In block themes, add a paragraph or button block in the header and type the contact info. In classic themes, you may need to edit the header.php or use a widget area if your theme supports it.

What is the difference between the header and the header.php file?

The header is the visual section at the top of your site. header.php is a template file that generates that section for classic themes. Block themes don’t use header.php; they use template parts stored in the database.

Conclusion

Editing the header in WordPress is straightforward once you know your theme type. For block themes, use the Site Editor; for classic themes, use the Customizer; and for full design freedom, use a page builder. Always back up your site before making major changes, and test your header on mobile and desktop to ensure it looks good.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.