How to Edit Header in WordPress – Easy Methods (Complete Guide 2026)

The header of a website is one of the most important sections of the site. It is prominently displayed at the top of the page and appears on nearly every page of your website, so you should personalize it and make good use of it. Many of our users were unsure about how to do this, so we’ve put together this step-by-step guide on how to edit the header in WordPress.

For creating anything you want, self-hosted WordPress is the best and most comfortable Content Management System (CMS) available. When you first start a website, all you need to do is sign up for hosting, install WordPress, and begin writing your content. That is all there is to it. However, if you want to harness all of WordPress’s potential and make the most of it, you should customize it to your needs.

Changing the website header is one of the most straightforward and critical customizations that every user requires. Using this article, we’ll show you how to edit the header of your WordPress website without having to hire a third-party developer.

What’s the WordPress Header?

In WordPress, the header is the element at the top of the web page. This element appears on every single page of the site and usually contains a logo, a menu to access different sections of the site, a search bar, and contact information. In eCommerce stores, it’s also common to see the cart and the products you’ve added to it. For example, at QuadLayers, the header is the top bar that you see on every page.

Why Edit the Header in WordPress?

The header of your website is one of the most important parts of the design. It is the first thing that visitors see when they arrive at your website, and as you are probably aware, first impressions are important. According to a recent study, users decide whether or not they like your website in 0.05 seconds, and as a result, whether or not they will stay on your website. Furthermore, according to research conducted by the Nielsen Norman Group, the average time spent on a website is only 10-20 seconds for a visitor.

It makes no difference if your content is excellent. If they don’t like what they see and leave, they will never be able to access the amazing content. As a result, you must have an eye-catching header that encourages users to stay on your site. In addition, the WordPress header contains important information to assist users in navigating your site, as well as numerous calls-to-action (CTAs). Consequently, to get the most out of it, you must customize the header.

Method 1: Edit Header Using a Plugin

If you prefer WordPress plugins over coding and modifying the core files, this is the best option. In the WordPress plugins repository, there’s a free plugin available called “Insert Headers and Footers“. This simple tool doesn’t need any additional complex configurations. So, let’s see step-by-step how you can edit the header using Insert Headers and Footers plugin.

1. First, log in to your WordPress backend.

Go to Plugins > Add New. From there, you can install new WordPress plugins by searching the repository or by uploading the plugin files. In the search bar, type Insert Headers and Footers.

3. Select the correct option and install it. Then, activate it.

4. Now, we are ready to configure it. Under the Settings section, you’ll see the Insert Headers and Footers Settings as shown below.

There, you’ll see that you can edit three sections:

• Header
• Body
• Footer

If you add a code in the header section, it will be visible before the </head> tag. The same goes for the body and the footer. Codes will appear before the </body> and </footer> tags respectively. In this case, you are editing the header, so look for the </head> tag.

5. In Scripts in the Header section, add the code you want to go under the head tag.

6. Once you have added the code, don’t forget to save the changes by clicking Save.

7. That’s it! The code will be added to your header. All in all, using Insert Headers and Footers is super simple so it’s an excellent choice for those who want to edit their WordPress header without any hassle or coding.

Method 2: Change the Theme’s Header.php File

If you want to have more control over your header and have some basic coding skills, there are other options. If you’re not a fan of using too many plugins to avoid slowing down your website or you simply don’t want to use the Insert Headers and Footers plugin, don’t worry. Here we’ll show you how you can still edit your WordPress header with a bit of coding step-by-step. To do this, you’ll need to modify the theme’s core files. So, before you start, we recommend you create a child theme. You can create one manually or using a child theme plugin. Once you’ve created the child theme, let’s see how you can modify the header file using the WordPress admin dashboard.

1. First, log in to the admin section.

2. Under the Appearance section, you’ll see the Theme Editor.

3. Here you can make changes to the theme’s core files. By default, the editor will pull the current theme’s style.css file to edit and it’ll look something like this.

4. On the right side, you will see all the files and folders available in your current theme’s directory.

5. Scroll down the list until you find the header.php (under the Theme Header).

6. Select the file, and it will open in your editor. To create this guide, we’re using the GeneratePress WordPress theme so it looks like this.

7. Now, the fun begins. While editing the header.php file and adding your custom code, make sure that you add the snippet between the <head> and </head> tags. In this case, we are going to add a sample text right before the </head> tag.

8. Click Update File to save the changes. If you see the File edited successfully message, the changes are saved correctly. You can verify it by going to your site’s frontend and viewing the source.

That’s it! That’s how you edit the header in WordPress via the header.php file. It can also be useful to add some other customizations to the header. Let’s have a look at some of them.

Add Tracking Codes

If you want to add a Google Analytics tracking code, Google AdSense auto ads code/ verification code, Facebook Pixel, or even Google Search Console Verification Code, you should place it right before the </head> tag. If you do this, make sure that you have updated the file after adding the snippets, otherwise, it won’t work.

PRO TIP: Change the Font Size and Style of WordPress Header

In some cases, apart from editing the text, you may want to change the font or style of the WordPress header. Let’s have a look at how you can do it. To change the style of your header, you need to know a bit about CSS. However, here we are going to show you how you can edit the font size in a very simple way.

1. To add a bit of CSS code to your blog, you have to go to the Appearance section, and click Customize.

2. There, you’ll find several configuration options. You can configure your entire website according to your installed theme’s configuration and some premium themes like Divi or GeneratePress also allow you to have custom configurations in the customizer.

3. Even though these configurations might be different depending on your WordPress theme, you’ll be able to understand how to do it with one example. In our case, we are using the GeneratePress Lite WordPress theme so we click Additional CSS.

4. Here, you can edit the CSS code of your existing theme to customize your header. First, check the page source to find the right CSS class. In our case, it’s the main title so that’s what we should edit.

For example, let’s say that you need to change the font style of your header and make it italic. Simply add:

.main-title { font-style: italic; }

And that’s it. You’ve changed the font style of your WordPress header. Additionally, you can assign custom CSS to change other things such as:

• Font-family: font: Arial – This will change the font to “Arial”
• Size: font-size: 16px – This will change the font size to 16 pixels so if you want to set a size of 24 for example, simply write 24 instead of 16 in the code.

Method 3: Edit Header Via FTP

This is also an easy way for beginners. If you have issues with the WordPress theme editor, you could use an FTP client. For this tutorial, we are using FileZilla because it’s our favorite but if you like a different one, it will do. Now, let’s see how to edit the WordPress header via FTP.

1. To connect FTP to your server, you need an FTP account. From the hosting cPanel, you can create one. Then, with the username, hostname, password port, connect the FTP client with your server.

2. On the left side, you will see the local storage, and on the right side, the server storage. To edit the header file, go to your active theme’s directory.

3. The path will be /wp-content/themes/theme-name/. There, you will see the header.php file.

4. Right-click on it and choose the editing option. The file will be saved to your local storage and it will be opened with a file editor like Notepad or Notepad++.

5. Here make the changes you want right before the </head> tag. After making the changes, save the file, and upload it back to the server.

6. That’s it! You’ve edited the file and changed the WordPress header of your site! You can verify the changes by viewing the website’s source code. It’s worth noting that this method has one main drawback. Once you have changed the theme, you will lose all your previous customizations, so if you are planning to change themes in the future, this might not be the best option for you. On the other hand, if you need to modify your new theme’s header with the old code, a simple copy-pasting will do the job.

Bonus: Theme-Specific Header Editing

Some WordPress themes like Newspaper, Newsmag, and others allow you to edit the theme header. Most WordPress themes come with a dedicated theme panel. From there, you can customize the theme. As an example, take a look at the theme panel offered by the Newspaper WordPress theme below.

To add the Google Analytics code, the team added a dedicated section to the panel.

The code will be added to the <head> section of your website. After adding the code, simply save the changes, clear your website’s cache, and you are good to go! If your theme doesn’t support this to edit the header, you can use one of the methods mentioned above.

How to Access Header Configuration

Assuming that you are already logged into the admin area of your WordPress installation you should navigate to Appearance → Header.

Then you will be redirected to the Custom Header admin page where you will be able to perform basic modifications on your header.

How to Edit the Appearance of the Header

We will begin with the Header Image section of that page. The main field is called Current Header, and as the name suggests, it is for the preview of the changes which were already performed on the component.

How to Add Custom Header Images to WordPress

We’ll start with the Header Image section of that page to get things started. To upload a custom header image, you will need to select the Add new image option from the drop-down menu, which will allow you to select the appropriate image.

Following a click on it, you will be able to select whether you want to upload an image from your local machine or whether you want to use an image that has already been uploaded to your WordPress Media Library. Following the selection of your image, the options to crop it as much as you want, save it, and publish it will be displayed to you.

How to Delete Header Images

If you want to remove the current image header from your website, click on the Hide image button.

Notifications

Note that further customization of the Header is usually done in the files of the particular theme which you are using. Due to this, you should check your theme’s documentation if you want to switch the dimensions, borders, and colors of the header placeholder space. When all of the changes are performed, and you are satisfied with the result, please use the Save Changes button at the bottom of the page so you can save the changes and finish the editing of your website’s top position element.

How to Add Videos to a WordPress Header

Adding a video as a header can be very beneficial for charity organizations, travel agencies, and real estate brokers, to name a few. Video materials draw the attention of visitors stronger than images. Videos also win faster the trust of visitors that the footage shown is legitimate compared to images that are easier to manipulate. In WordPress, there are two ways of adding videos on the top of your page:

1) Add a YouTube Video to the Header

Before starting with these steps, go to YouTube and copy the URL of the video you want to add to the WordPress header. After that, do the following:

1. Log in to your WordPress admin dashboard
2. Then, go to Appearance > Header
3. There, go to the Header Media section and paste the URL of the YouTube video in the corresponding field under Header Video
4. Press Publish and that’s it

2) Add an mp4 Video

A second option to add a video to the WordPress header is to upload an mp4 video file. Keep in mind that the file can’t weigh more than 8 MB. Additionally, the dimensions will need to adjust to your theme’s container size. So, to add an mp4 video to the header, in the WordPress dashboard, you have to:

1. Go to Appearance > Header
2. Then, go to the Header Media section press Select Video under Header Video
3. Search for the file and upload it to the Media Library
4. Then press Choose Video and Publish it
5. That’s it! You’ve added a video to the WordPress header!

NOTE: One advantage of the YouTube method is that it allows you to add any video, whereas if you upload a video file, the file can’t be bigger than 8 MB and it has to adjust to the theme sizes.

How to Make Custom Header Image/Logo Clickable

Now, you have successfully changed the header image of your choice and want’s to make it clickable. Well, it sounds simple enough huh? Well not so fast. There are a few things to consider, like the size of the new image. Make sure it fits and looks well proportioned on your WordPress blog. But all that will be for another post. This is kind of backward but after you change your header image it will usually cover the name of your blog that is linked to the main blog’s URL and now there is no way for your visitors to click it to get back to the main blog page.

The fix is quite simple on the WordPress default theme. Open the themes header.php file. and look for the following code near the bottom.

<div id="page">
  <div id="header">
    <div id="headerimg">
      <h1><a href="<?php echo get_option('home'); ?>/">
      <?php bloginfo('name'); ?></a></h1>
      <div class="description">
      <?php

Now add the following code between the page and header id and change the red URL to your blogs URL.

<div class="header" onclick="location.href='http://www.YourBlogsURLHere.com';" style="cursor: pointer;"></div>

The code should look like this:

<div id="page">
<div class="header" onclick="location.href='http://www.YourBlogsURLHere.com';" style="cursor: pointer;"></div>
<div id="header">
  <div id="headerimg">
    <h1><a href="<?php echo get_option('home'); ?>/">
    <?php bloginfo('name'); ?></a></h1>

Now your whole WordPress header image will be linked to your main blog’s URL or the blog’s home page.

jQuery(document).ready(function($) {
  $('#header').on('click', function() {
    window.location.href = 'http://yourblogurl.com';
  });
});

What to Add in the Header?

So now that you know how to edit your WordPress header, let’s have a look at what you can add to it:

• Google Analytics Tracking Code
• Verification Code
• Auto Ads Code
• Facebook Pixel
• Search Console Verification Code
• Mobile Bar Color Code
• Images and Videos
• Pinterest Verification Code

As you can see, almost every verification can be done through the header modification. Plus, if you need it, you can also add a widget to your header. This might be visible to your website visitors and it can be very useful because you can use the widget to add a CTA button, display advertising, or anything you want.

BONUS: How to Access Header Tag in WordPress

The two easiest ways to access the tag to edit your header in WordPress are:

• From the WordPress dashboard: Go to Appearance > Theme Editor > header.php file. Near the top of the file, you should see the <head> and </head>. Simply add your code in between the tags.
• Via URL: Alternatively, you can access the header tag by adding /wp-admin/theme-editor.php?file=header.php to your domain URL. For example, for QuadLayers, it would be http://quadlayers.com/wp-admin/theme-editor.php?file=header.php. If you use WordPress Network, you’ll need to use a different link: http://quadlayers.com/wp-admin/network/theme-editor.php (remember to change the URL with your domain)

What if My Theme Doesn’t Have a header.php File?

Some child themes don’t have their own header.php files. If that’s your case, there are 2 options to customize your header:

• Move the parent theme’s header to the child theme and edit it from there
• Use a hook: To add code and edit your header you can add the following to the functions.php file of the child theme.

function QL_your_function() {
  echo 'your code';
}
add_action( 'wp_head', 'QL_your_function' );

Note that this is an example code to give you a structure, you’ll need to adapt it and add your own code to it.

I’ve Tried to Edit the WordPress Header but It Didn’t Work

Consider the following scenario: you completed every step of this tutorial, but the code was not added to your website’s header. First, double-check that you’ve edited the correct file and that you’ve added code to the appropriate section. If you have followed all of the instructions to the letter and it is still not working, there is a simple solution. If you’re using a WordPress caching plugin to improve the speed and performance of your site, simply clearing the cache should resolve the problem in the vast majority of instances.

Common Troubleshooting Steps

1. Clear all caches: Browser cache, WordPress cache plugins, CDN cache, server cache
2. Check for syntax errors: A missing semicolon or bracket can break your entire site
3. Verify file permissions: Files should be 644, folders 755
4. Disable conflicting plugins: Temporarily deactivate other plugins to test
5. Switch to default theme: Test with Twenty Twenty-Four to see if theme is the issue
6. Check error logs: Your hosting control panel likely has error logs

Conclusion

To summarize, these are straightforward methods for editing the header of any WordPress website. To make things as simple as possible for beginners, we recommend that they use the Insert Headers and Footers WordPress plugin. If, on the other hand, you do not intend to change your WordPress theme anytime soon, editing the header.php file of your theme is an excellent option for you.

Finally, it’s important to remember that if you make changes to the header.php file of your WordPress theme and then change the theme, all of your customizations will be lost, even if you copy and paste them. As a result, choose from among the available options and determine which is the most appropriate for you. If, in addition to the header, you would like to customize the footer of your website, see our guide on how to edit the footer in WordPress for more information. Still in need of assistance? Please feel free to leave a comment and we will assist you with whatever you require!

You can also check following related posts:

• How to Customize WooCommerce Thank You Page
• Best Genesis Child Themes 2020
• Free Magazine WordPress Themes
• How to Backup WordPress Site

Please leave this field empty

Don’t miss these tips!

We don’t spam! Read our privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.