How to Add Custom Code to Header and Footer Areas of a WordPress Website

How to Add Custom Code to Header and Footer Areas of a WordPress Website

To enrich the functionalities of your existing WordPress website, you may think about modifying its code. Monitoring a site plays a vital role in its growth, and Google Analytics is one of the widely used tools.

But the problem occurs when you require to edit the header or footer code of the website. Even when you need to submit your site to Google Search Console, you need to add the <meta> code to the header of your website.

There are many other tools, which require the addition of their provided code to either the header or footer of your WordPress website.

In this tutorial, you’re going to learn two different methods to accomplish the code addition. Most of the people fret when it comes to editing the coding files of a website, that’s why I will also guide you using a plugin method.

I can understand, not everyone is techie enough to play with the website’s codes, but polishing your WordPress expertise should be the ultimate goal.

Edit the Header and Footer Files Manually

It may be a little bit scary to the people who have never worked with the codes, but if you follow the required steps, it will be a piece of a cake.

I remember when I started editing these files, it was a nightmare seeing my website broken. That’s why it’s always recommended to backup your website and its database before making any changes.

As you know you’re going to edit the theme files, it’s better to backup your WordPress theme using cPanel.

Let me start the process.

Step 1.

Login to your WordPress admin panel and look for Appearance>>Editor, it will show you the CSS file of the theme you are currently using.

How to Add Custom Code to Header and Footer Areas of a WordPress Website

Step 2.

You don’t need to fret of the codes, instead find Theme Header from the right-side vertical navigation menu. It consists of all the coding files of your WordPress theme.

How to Add Custom Code to Header and Footer Areas of a WordPress Website

Once you open the file, you can see many lines of the code. In most of the cases, you require to add the <meta> tag to the body tag or <head></head> tag.

As you can see, there are many <meta> tags in the first head tag; you can add your code here. And if need to place the code between the <body>, </body> tags, you can easily find it in the file.

Don’t worry about the ending body tag; it’s residing in the Theme Footer. Just copy and paste the code, click on the Update File button.

How to Add the Code to the Theme Footer

To maintain the website performance, web developers recommend placing the JavaScript files, any scripting file, tracking code to the footer area.

It helps you enhance the page loading time of your website. The browser loads the files added to the footer without even knowing the user.

Let me show you the footer code.

Step 1.

Just like you did in the previous method, you have to open the Editor of your WordPress website. Search for Theme Footer in the vertical navigation menu.

How to Add Custom Code to Header and Footer Areas of a WordPress Website

Step 2.

Depending on your WordPress theme, the code will vary. Not every theme has the same code. Every web developer has a different coding style.

You have to read the instructions to add the code and place it in this footer file. As you can see, I have added two scripts to my website.

Once you paste your code, click on the Update File button.

Congrats, you have successfully added the required code to the header or footer file.

How to Add the Code Using a Plugin

One of the favorite practices for the non-techie people. I know, more than 70% of WordPress users are not tech savvy.

Whenever someone tries to find a solution, they always look for an alternative plugin. I am going to walk you through a simple process.

Step 1.

Install and activate “Insert Headers and Footers plugin,” which is developed by the WPBeginner team.

Step 2.

Go to Settings>>Insert Header and Footers, and a new page will appear to you. You can see two boxes, one is for the header area, and the other is for the footer area.

How to Add Custom Code to Header and Footer Areas of a WordPress Website

You don’t need to deal with the coding files, all you need is to copy and paste the code.

Depending on your requirements, you can use any of the boxes. Click Save, and everything will be perfect. I always recommend using this plugin for activating Google Analytics.

Conclusion

Which method are you going to follow? I would recommend the manual mode. You don’t need to add one more plugin merely to add a simple code.

The best part is that you require to add the monitoring codes, scripting, and similar only once, this is a permanent action.

You don’t need to edit the file again. If you’re afraid of breaking your website; you should use the plugin method.

 

Check out the top 3 WordPress hosting services:

Hostinger
£2.36 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7
FastComet
£1.41 /mo
Starting price
Visit FastComet
Rating based on expert review
  • User Friendly
    4.7
  • Support
    5.0
  • Features
    4.8
  • Reliability
    4.5
  • Pricing
    5.0
A2 Hosting
£2.36 /mo
Starting price
Visit A2 Hosting
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.0
  • Features
    4.5
  • Reliability
    4.8
  • Pricing
    4.0

How to Add Custom CSS to Your WordPress Website in Different Ways

This how-to guide will have three different ways to add custom CSS to a WordPres
3 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Add a WordPress Administrator User Using PHP Code

This how-to guide explains a different way to create a WordPress administrator u
3 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Add Google Fonts to Your WordPress Website Without a Plugin

This is a how-to guide consisting of the code editing of the WordPress website t
3 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Disable PHP Execution to Improve Website's Security Using cPanel

This how-to guide will explain about restricting others from executing any malic
3 min read
Max Ostryzhko
Max Ostryzhko
Senior Web Developer, HostAdvice CTO
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top