ivanova
Helena Ivanova
Content Writer
Updated on
Useful Resources

5 Ways to Edit a WordPress Header

When talking about editing the WordPress header, it’s essential to determine what exactly we mean here:

  • a header.php as a container for code snippets (to enable or disable specific functionality);
  • a header as a front-end template.

Let’s look at both cases. 

Table of Contents

Inserting Code Snippets to the header.php File

I’m talking about the first case if you need to insert a Google Tag Manager or other custom scripts that have to be placed in the header. For that, it’s better not to modify the header.php file directly via the theme editor. Consider installing a plugin that adds custom code snippets to the template parts. There are many advantages to using such plugins, and here are some of them:

  • you eliminate the risk of messing up with the initial header code and occasionally deleting something;
  • all the custom code (as a rule, most of it is for the third-party analytics or integration services) is stored in one place, so it’s easy to see what’s going on without digging into theme files;
  • you can give access to editing this code to SEO or marketing specialists while they can’t access the theme files, which is an essential measure for security reasons.

There are plenty of plugins for doing that, such as WP Code – Insert Headers and Footers or Header Footer Code Manager

Editing the Header Template Part of the Theme

There are several methods of editing the header part of a WordPress theme. Some work for any theme, while others would not be the best option.

Manual editing of header.php and its template parts

This method works for any theme, but some coding skills are required. Yet, it might be the best option if you need to make only minor changes. 

Also, one of the most classic ways of adding a custom content block to the header is creating a custom widget and inserting its code into the right HTML container in the header structure. Using this method, you can easily edit the content inside that widget without digging into the raw code each time. 

The header.php file can be found here: Dashboard > Appearance > Theme File Editor > {Theme} Header. Alternatively, this file can be modified using the FTP client in wp-content > themes > {you active theme’s folder} > header.php. 

Header of Hestia WordPress theme
Header file of Hestia theme

Many modern themes have a nested header structure, and the header.php file works more like the main container that refers to other template parts located in a specific folder (as a rule, it’s called “template-parts”). That’s why you first need to understand this structure and find the right template part that requires modifications.

It’s better not to edit the header.php and its nested templates’ code if the theme already has a header editor available from Customizer because the structure might be even more complex than it seems at first sight. Hence, it’s quite easy to leave something out and get errors. In this case, the best way to edit the header is by using the theme editor and custom CSS if needed. 

Using theme header editor

Some themes have a great header builder that gives many editing options that cover almost any need. Go to Customizer > Header Builder, and you will see the panel with editing options as well as rows and columns of the header where you can add widgets, blocks, or custom code and customize those rows and columns. Usually, such builders use the Gutenberg interface for adding widgets.

Astra theme header builder
Astra theme header builder

Some Elementor themes, for example, Phlox, use Elementor to modify headers and footers and allow you to choose from premade or saved template parts.

Header editing with plugins

Using plugins for the header editor is the most all-purpose and user-friendly way of customizing this part of the website. Plugins like Elementor Pro or JetPlugins let you visually customize the whole website. JetThemeCore (which works both with Elementor and Gutenberg) also gives a lot of freedom in creating dynamic headers that can be changed depending on different conditions, from the user role to the URL. 

Full site editing feature (as of 2022) 

Full site editing (FSE) is a new feature released in WordPress 5.9 update. It’s a big breakthrough, yet at the time of writing this article, it’s still in Beta, so various features are missing. Even so, it already allows you to edit and create theme templates and reusable template parts. 

There are two main bottlenecks when it comes to FSE:

  • Only a few themes still support this feature. And the fact that they do so doesn’t guarantee that they are the most optimized, fast, and well-coded, especially considering the fact that the FSE itself is still in Beta. 
  • Restrictions imposed by Gutenberg itself. There is still a discussion about Gutenberg’s custom block generation and this editor’s overall flexibility. 

Despite everything, it’s a great feature and a remarkable milestone in WordPress history. Even now, FSE can work great for small sites without risking anything, according to many supporters.

To use the full site editing feature, install the FSE theme (e.g., Twenty Twenty-Two), and go to Dashboard > Appearance > Editor. You will see templates and template parts to be edited using a standard Gutenberg interface.

WordPress full site editing

Note that in FSE themes, Theme File Editor and Plugin File Editor are moved from Appearance to the Tools menu

FAQ

What is a WordPress header?

A header is a top section of the website that usually contains a menu, logo, and other blocks, such as search or login icons, brief contact information, etc. 

Is it possible to have multiple custom headers on a WordPress website?

Yes, it’s definitely possible. The easiest way of doing it is by using a plugin. This method is described above in this article. 

Conclusion

Editing a header can mean inserting custom code or customizing the header template, and these things need to be differentiated. 

The easiest way to customize a WordPress header template in any theme is to use a plugin. For doing it manually by editing the template code, a good knowledge of HTML, CSS, and PHP is a must. The full site editing feature is also a good option, but it’s still in Beta and works for a very limited number of themes. Yet, many themes have a header and footer editor that lets users customize almost anything inside these sections.