How to Edit WordPress Header: 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 WordPress header editors 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 WordPress header using the Customizer 🔧

The Customizer is a built-in WordPress header editor. Well, it lets you do a lot more than that, but that’s one of its many features. In addition to letting you edit the WordPress header, you can also use it to edit the footer, typography, menus, and other key components of your website.

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

⚠ 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’ll 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:

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:

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 – depending on your theme.

To check if you have access to it, open the Appearance menu and look for the Editor option. If you don’t see it, then you’ll need to install a block theme such as Raft, Jaxon, or Riverbank.

Hover your mouse over that Editor option, click it, and the templates editor will open. You’ll quickly realize that it looks and functions identically to the Block Editor that’s used for editing posts and pages.

By default, the editor will open to the home page template. However, you can easily navigate to the Header element by clicking on Template Parts.

This will open up another sub-menu, where you’ll select Header, which will serve as your WordPress header editor when using this method.

⚠ The first time you open the header editor, you’ll be shown a popup window offering you an orientation. Feel free to use it or just click X to get out of it and continue.

There is a lot you can do here to customize your header, the full scope of which is beyond the capacity of this tutorial. However, to get you started, we’ll go over the three most common components that users typically want to edit in their WordPress header.

Edit the site title in the header

If you want to edit the appearance of the site title in your header, first click on the title block. In our example, that’s “THIN BIRTHDAY”. Once it’s highlighted, click on the icon on the top right corner of your screen. It’s shown with a red border around it in the screenshot below.

A sidebar will pop up. That sidebar will contain a brief description of whatever block you have selected inside of the header template (in this case “Site Title”).

Below that you’ll see two icons: a small gear ⚙️ and a half moon 🌓 looking symbol. By default, it will be set on the small gear, but that’s not the one you want. Click on the half moon one, which will open up a slew of customization options.

Now you’ll be able to change the color, font, and size of the site title to your liking:

Add blocks to your header template

You can choose to add or remove blocks from the header as well.

To add a block, you can either click the + sign on the bottom right of the header itself (shown below), or the + sign on the top left of the template parts editor. Both options will give you a popup window where you’ll be able to search for and insert whatever blocks you’d like to be a part of your header.

Edit header menus

Another useful feature of the Full Site Editor is that you can edit menus visually. Much like with adding a new block above, you are also given two options here for doing it. Although the two options only have partial overlap, as you’ll see in a moment.

Begin by clicking on the specific menu item you want to edit (in our example “Patterns”). This will automatically open up the sidebar on the right, which will give you a list of editing options. Alternatively, you can click the paperclip looking icon. This will open up a drop down menu that will allow you to change the text of the menu item and put whatever destination link you want it to go to.

If you’d like to add submenus, it’s also very easy – just click the icon to the right of the paperclip.

Overall, using the Full Site Editor to edit the WordPress header method is very easy and straightforward. It’s even more so if you’re already used to using the Block Editor, since it functions exactly the same way. The above examples and screenshots covered the basics and they’re enough to get you started. Feel free to play around with it so you can get your header looking just the way you want it.

When you’re happy with the changes, click on Save on the top right of your screen. This will save the changes to the theme’s header template, and they’ll be reflected on your website automatically, across all of your pages and posts.

3. Edit WordPress header using a WordPress page builder ⚒️

Some WordPress page builder plugins offer options to edit headers. 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 WordPress header editor, 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:

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:

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:

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:

Unless you’re already paying for a premium Elementor license, the Theme Builder tool may not justify the purchase on its own. It is a good option for a WordPress header editor, but at the same time, Full Site Editing accomplishes the same thing without the additional cost. The main difference is that with the Elementor premium license, you get access to Elementor’s wider array of other modules. If you’re already using Elementor, this makes it easier to ensure that your header design is consistent with the rest of your site.

4. Add custom code using a plugin to edit the header in WordPress 🐱‍💻

Typically, using plugins is the easiest way to implement customizations in WordPress. However, for whatever reason, that’s not the case when you want to edit 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.

If you’re up for it though, then one fantastic 😎 example of such a plugin is Header Footer Code Manager. This WordPress header editor enables you to add custom JavaScript snippets, HTML and CSS 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:

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 🎨

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