There may come a time when you need to add some code to the header of your WordPress website.
For example, if you want to set up Google Analytics or connect Google Search Console to your website then you will need to add a tracking code to the header of your website. Or if you want to verify your website on Pinterest you’ll be given a meta tag to insert into your website’s header.
But how on earth do you do that?!
Well, there are two main ways in which you can add in code to the header of your WordPress website. The first way is to add the code directly to the code of your WordPress theme, and the second is to use a plugin that will add the code into the header for you. But there are pros and cons to each of these methods which may help you decided which method is best for you.
In this post I’m going to show you how to add code to the header of your WordPress website.
Adding code to your header directly to the theme files
The main reason why you may want to add the theme files directly is that you don’t need to use a plugin. Long-time readers of this blog may know that I don’t endorse using plugins unless you really need to because they take up space on your hosting and pose a security risk, especially if not kept up to date. I talk more about why you shouldn’t overuse plugins in this post.
The downside of putting the code directly in the theme files is that the code becomes a part of theme, meaning that if you switch themes, that code will no longer run on your website. You’d need to copy that code from your old theme to your new theme when you switch.
Also, if you are using a pre-made theme that has automatic updates and you aren’t using a child theme (and by the way, you should be using a child theme!) when you update that theme, you’ll lose the code you have added in. So unless you want to avoid updating your theme (which I strongly discourage) or add the code back into your theme files each time you update your theme, I’d advise against using this method.
Another reason why you might not want to add code directly to the themes is that it involves editing code, and that can be intimidating if you’ve not worked with code before.
How to do it
You can access your theme files either via FTP or directly via the WordPress admin area.
To access your theme files via the WordPress admin area, hover over Appearance in the left-hand menu of WordPress and click on Theme Editor.
By the way, if you don’t see the Theme Editor option here, it may be that you have a plugin or a piece of code in your website files that is preventing you from accessing this. In which case, you’ll be better off adding the code via a plugin.
Once you have your theme editor open (or you have access to your files via FTP) you need to open up the header.php file (Theme Header).
Within the header.php file, you should see an opening head tag (<head>) and further down the page, probably near the bottom, you’ll see the closing head tag (</head>). The code that you are adding to your header will need to go in between these opening and closing head tags. Personally, I always add the code just before the closing head (</head>) tag.
When you’ve finished adding your code in, click Update File at the bottom of the page (or save and upload the file if you are using FTP). And that’s it! Your code is now in the header of your website.
Adding code to your header using a plugin
Adding code using a plugin means that when you change themes, the code will automatically be added to the header of your new theme, so you don’t need to manually copy it across.
It also means if you are using a pre-made theme with automatic updates, you won’t lose your code when you update your website.
And of course, if you’re not comfortable editing the files of your theme then using a plugin means you don’t have to.
The only real downside to using a plugin is that you have to use a plugin! But as long as you keep that plugin up to date you should be fine.
How to do it
There are a number of different plugins that you can use to add code to the header of your website, but I personally recommend one called “Head, Footer and Post Injections”.
To install this plugin, hover over Plugins in the left-hand menu of WordPress and click on Add New.
Once you’re on the plugins page, search for a plugin called Head, Footer and Post Injections. It looks like this:
Click Install Now and then when prompted to, click Activate.
Once the plugin has been installed and activated, you can access its features by hovering over Settings in the left-hand menu of WordPress and clicking on Header and Footer.
On the Header and Footer settings page you will see a number of tabs, but for the purpose of this tutorial, we’ll just be focusing on the Head and footer tab which is selected by default.
Here you will see two boxes. The first box says “On every page” and any code that you add here will be added to the header on every single page of your website. In more situations, you’ll want the code to be on every single page on your website, so this is where you will paste in your code.
In situations where you know you only need to add to the home page, you can paste your code into the box next to it instead.
When you’ve finished adding in your code, click Save at the bottom of the page, and that’s it! You’d code has now been added to the header of every single page on your website!
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.