4 Easy Methods (3 With No Code)

The header is the first element of your website that most visitors see. Typically, this is where your site’s logo and menu are placed, and it’s part and parcel of every page. If you don’t know how to edit the WordPress header, you’ll have a difficult time ⏱️ making a strong first impression.

WordPress enables you to edit your site’s header in several ways. Just about every theme comes with a unique header design, which you can customize manually. Alternately, you can use an array of tools provided by the larger WordPress community.

👉 In this article, we’re going to show you four ways to edit the WordPress header, both with and without plugins. Let’s get to work!

📚 Table of contents:

  1. Edit the header using the Customizer
  2. Use Full Site Editing (and a compatible theme)
  3. Edit the header using a WordPress page builder
  4. Add custom code to the header using a plugin

1. Edit the header using the Customizer

The WordPress Customizer is a built-in tool that enables you to edit global elements of your website. You can use the Customizer to edit your site’s header, footer, typography, menus, and other key aspects.

To access the Customizer, go to your dashboard and click on Appearance > Customize. The Customizer will display a menu of options to the left and a preview of your website to the right:

The WordPress Customizer

⚠ Note that if you don’t see the WordPress Customizer option in your dashboard, you might be using a block-enabled theme. To edit the header for this type of theme, you need to use Full Site Editing, which we’ll cover in the next section.

In the Customizer, you should see an option related to your header. Sometimes this might be visible right away, as in the example above. Other times, you might need to go to a sub-menu. For example, some themes put the header options in the Layout options or something similar.

Once you’ve found your theme’s header options, the choices that you see now will depend on what theme you’re using. For example, our Neve theme includes options for changing your logo, the header color, and which menu displays in this section:

Customizing the header using the Neve theme

Neve also offers a selection of elements that you can add to the header using drag-and-drop functionality. Select any of the elements under Available Components and drag them into the header rows at the bottom of the Customizer. Neve enables you to add up to three rows of elements for a header and place elements in any position you want:

Placing header elements using the Neve theme in the Customizer

When you’re happy with the configuration of your header, save the changes to your theme by clicking on the Publish button at the top of the Customizer.

⚠ Note that any changes that you make using the Customizer will only apply to your active theme. If you change themes, you’ll need to edit the WordPress header again.

2. Use Full Site Editing (and a compatible theme)

Full Site Editing is a newer feature that enables you to edit theme templates using the Block Editor. This only works for block-enabled themes, so it may or may not be available on your site.

To see if your theme supports Full Site Editing, open the Appearance menu and look for the Editor option:

Accessing Full Site Editing in WordPress

Select that option and the Block Editor will open. However, you’ll be editing your theme templates rather than your individual pages or posts.

By default, the editor will open to the home page template, which should include a Header element:

Using Full Site Editing in WordPress

⚠ Note that some blocks will only appear as placeholders when you’re using Full Site Editing. That’s because this tool isn’t for editing individual blocks, but entire layouts.

When editing the header, you do get full control over what blocks and elements to include. If you open the List View tool, you can see a breakdown of what blocks the header currently contains:

Using Full Site Editing to edit a WordPress header

At this stage, you can choose to add or remove blocks from the header. To remove or edit an existing block, select it and use the contextual menu that appears on the screen when you do so:

Editing a WordPress block

When you select a block, you also get to edit it using the Block settings menu on the right side of the screen. This menu typically contains styling options, and they vary depending on which block you’re editing:

An example of block options.

To add a new block, select the Header element and look for the plus sign icon. That button will open a menu that enables you to select which block to add:

Adding a new block to the WordPress header

Another useful feature of the Full Site Editor is that you can edit menus visually. To do so, just select a menu using the Navigation block. You’ll see the option to add new links, create a new menu, and swap between existing ones:

Editing a menu in the WordPress header

When you’re happy with the changes to your header, click on Save. This will save the changes to the theme’s header template, and they’ll be reflected on your website automatically.

3. Edit the header using a WordPress page builder

Some WordPress page builder plugins offer options for editing the WordPress header. For example, Elementor Pro includes a Theme Builder tool that you can access with a premium license.

If you don’t have access to Elementor Pro, you can use a free third-party extension, such as the Elementor Header & Footer Builder plugin at WordPress.org.

We’re going to show you how to do it using Elementor Pro and its Theme Builder feature, though.

In practice, the Elementor Theme Builder works similarly to Full Site Editing.

To access the Theme Builder, go to Templates > Theme Builder. Select the Header options under SITE PARTS, and look for existing templates to the right. There should only be one header template, and you can click on the Edit button next to it:

Using the Elementor Theme Builder

This will launch the Elementor editor. From here, you can choose to build the header using Elementor blocks or import ready-made templates. If you click on the folder icon within the body of the editor, you can see what header templates you have access to:

Selecting an Elementor header template

If you’re using Elementor, we recommend you take advantage of these templates. This enables you to experiment with multiple header styles, which you can edit by adding or customizing modules:

Adding new modules to Elementor.

If you’re not familiar with using Elementor, this page builder enables you to select modules using the menu to the left. You can drag these modules over to your page, which appears in a preview on the right side of the screen.

When using the Theme Builder, you’re only editing a specific theme template. You still get to use the full array of modules and configuration options that Elementor offers, however.

After you’re done editing the header template, save it using the Publish button. Then, Elementor will ask you to choose on which pages the template should display:

Choosing on which pages to display an Elementor template

Unless you’re already paying for a premium Elementor license, the Theme Builder tool may not justify the purchase on its own. It does precisely what Full Site Editing does, but at a premium cost. The main difference is that you get to use Elementor’s wider array of modules, and if you’re already using Elementor, it will be easier to make sure your header design is consistent with the rest of your site.

4. Add custom code to the header using a plugin

Typically, using plugins is the easiest way to implement customizations in WordPress. However, that’s not usually the case with headers. If you want a plugin that enables you to edit headers visually, you’ll need to use a page builder. Most page builders that offer this functionality come at a premium, as we discussed in the previous section.

Free plugins that enable you to customize the header typically only offer an easier way to add custom code to it. The alternative is to edit your theme files manually using a child theme, which can be intimidating (and risky) unless you have web development experience.

One fantastic 😎 example of such a plugin is Header Footer Code Manager. This tool enables you to add HTML, CSS, and JavaScript snippets to the header and/or footer, and choose on which pages these snippets will load:

Once the plugin is active, go to the HFCM > Add New Snippets page in the dashboard. Here you can select what type of snippet you want to add, where it should be displayed, and whether to add it to the header or footer:

Adding custom code to the WordPress header

If you plan to add new elements to the header, you’ll need to use HTML. To change the style of the header and the elements it contains, you’ll want to use CSS snippets.

The main downside of this approach is that you need to check the header code to see what classes and IDs it uses, in order to add CSS to them. This can be a time-consuming process as you add new code snippets, check to see if the changes work, and tweak the code until you’re happy with the results.

Customize the WordPress header today

Editing the WordPress header is easier than you might expect. That’s because WordPress offers a broad range of options for customizing this element, ranging from your theme’s built-in settings to page builders. All you have to do is find the option you feel most comfortable using, and you can get to work.

Do you have any questions about how to edit your header in WordPress? Let’s talk about them in the comments section below!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Leave a Reply

Your email address will not be published.