How To Edit Header In WordPress (The Easiest Way)

The header is one of the most important areas in any website. It’s at top of the page and it appears on nearly every page of your site so you should customize it and use it smartly. A lot of our users had doubts about this so here’s a step-by-step guide on how to edit header in WordPress.

Self-hosted WordPress is the best and most comfortable Content Management System (CMS) out there for creating anything and everything we want. When you’re starting a blog, all you need is to sign up for hosting, install WordPress, and write blog posts. It’s that simple.

However, if you want to unleash all the power WordPress has and make the most of it you can do some other things. One of the most simple and crucial customizations every user needs is customizing the website header, modifying the code, and adding new ones. In this article, we are going to show you how you can edit the header in WordPress without hiring any freelancer.

Why Edit The Header in WordPress?

The header is one of the most important areas on your website. It’s the first thing that visitors see when they get to your site and, as you probably know, first impressions matter. According to a recent study, users decide in 0.05 seconds if they like your website or not and hence if they’ll stay or leave. Additionally, research carried out by Nielsen Norman Group, showed that, on average, a visitor remains on a site for only 10-20 seconds. It doesn’t matter if your content is great. If they don’t like what they see and leave, they’ll never get to that amazing content. So, you must have an appealing header that makes users stay on your site.

And the best solution for this is to customize the header.

How To Edit Header In WordPress: Methods

WordPress allows you to edit the header in different ways, Here, we have collected a couple of beginner-friendly ways that you can follow to do it:

  • Using a plugin like Insert Headers and Footers
  • Editing the theme’s header.php file
  • With an FTP client

Let’s have a closer look at each of them.

Edit Header Using “Insert Headers and Footers”

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. Firstly, 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.

Edit 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. You can do it right from your WordPress dashboard or by using an FTP client such as FileZilla. That said, 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).

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 changed are saved correctly. You can verify it by going to your site’s frontend and view the source.

Add Tracking codes

If you want to add a Google Analytics tracking code, Google AdSense auto ads code/ verification code, 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.

How To Change 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 of CSS. However, here we are going to show you how you can change 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 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.

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 you like a different one, feel free to use it. Now, let’s see how to edit WordPress header via FTP.

  1. To connect FTP to your server, you might want 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 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 a con. 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:

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.

How to edit header in WordPress

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.

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
  • Search Console Verification Code
  • Mobile Bar Color Code
  • 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.

I’ve tried to edit the WordPress header but it didn’t work

Let’s say that you followed every step of this tutorial but the code wasn’t added to your site’s header. First, make sure you have edited the right file and added code to the right section.

If you have done everything correctly and it still doesn’t work, there’s one simple solution. If you’re using a WordPress caching plugin on your blog to optimize your site’s speed and performance, simply clearing the cache will fix this issue in most cases.

Conclusion

To sum up, these are simple ways to edit the header of any WordPress website. For beginners, we will recommend using the Insert Headers and Footers plugin because it is simple to use and manage. On the other hand, if you are not planning to change your WordPress theme soon, editing the theme’s header.php file is an excellent choice for you.

Finally, it’s important to note that if you edited the header.php file of your WordPress theme and changed the theme, all the customizations will get lost although you can also copy and paste them. So, choose between the available options and find out which one is the best for you.

Still, need help? Feel free to comment below and we will help you with whatever you need!

Recommended Read: How to Become a WordPress Professional in 8 Steps