3 Simple Ways To Add Header And Footer Scripts To Your WordPress Site

I want to be clear that sometimes with these 3rd-party tools, they’ve also developed their own plugins with which you can integrate with their services pretty easily. However, installing a plugin for each tool that you’re using is just more work for your server and is just more time-consuming.
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

While the past posts that I’ve written have been more Elementor-based with tutorials for adding custom web fonts and UX principles for call to actions on mobile devices, today I’m going to turn more to the WordPress side of things, because creating an online business from a WordPress website takes more than just designing in Elementor. There are several 3rd-party tools that you need to integrate with your site to be able to do better marketing with the Facebook Pixel, tracking conversions on Google Analytics, creating A/B tests with VWO, add a live chat box from Intercom, etc.

 

Many of these integrations are done by installing a snippet of code either in the header or footer of your site. There are three main ways to achieve this in WordPress and below we’ll take a look at them.

 

The More Simple Way: With A Plugin

In WordPress, there is a plugin for pretty much anything you can think of, and as you may have guessed it, adding code to the header & footer is no exception. WPBeginner are the ones responsible for creating the plugin Insert Headers and Footers, which is a very simple plugin that allows you to easily add any type of code to both of these parts of your site; header and footer.

 

All you need to do make the integration with your 3rd-party tools is install this plugin, activate it and navigate to Settings > Insert Headers and Footers. Then, you paste the required snippet of code in the box mentioned by the tool and click the save button. That’s pretty much it. If you, for example, are installing the Facebook Pixel, you can then open your site on Chrome and see if the Pixel Helper has detected the code.

 

header and footer scripts

 

Now, maybe you want something that gives you more control in the way you add things, then you have the Header Footer Code Manager plugin. With this plugin, you can add header and footer scripts and also, define where and how they will load. Going back to the Facebook Pixel example, if you’re building a funnel for lead magnets and you’re Facebook Ads, you most certainly are going to have a Thank You page that users will land after subscribing to your email list. In cases like this, you’re going to need the pixel event code, which only needs to be loaded on the Thank you page, something that you can do with this plugin.

 

The plugin has many other features, like choosing if the scripts you add only load on mobile devices and not on desktops, and vice versa. It also has support for custom post types which is pretty good if you’re building a dynamic website. To add a new header and footer scripts, install and activate the plugin, then navigate to HFCM > Add new, add your snippet, configure where you want it to appear and save.

 

insert header and footer scripts wordpress

 

The Benefits Of Using Plugins To Add Header And Footer Scripts

Ok, so while I’m a big proponent of using less plugins on a WordPress website (my count on this site is currently 14 when it should be really 11 due to three plugins that I’m using for specific animations and ecommerce tools) because it doesn’t strain your server so much, giving you in turn a faster website, there are some benefits in using plugins like the two aforementioned to insert scripts in the header or footer. One of the more important ones is the fact is diminishes the risk of human error, which is very much present in the next method that I’m going to write about; adding the scripts on your functions.php file.

 

Another positive aspect of using plugins for header and footer scripts is the fact that you can change themes without losing all of your injected code. Now, I usually don’t change themes that much, neither on my personal nor client projects, but that doesn’t necessarily is your case. You may have already added the Google Analytics code or the Facebook Pixel snippet and you don’t want to lose that work because you found a theme that work best for your needs. There’s no reason to worry with these plugins.

 

Suggested reading: Increase Your WordPress Website Speed

 

The Approach I Prefer, Via Child Theme

I’ve always been more of a DIY guy and for those of you who are like me, you can take this approach to adding header and footer scripts by creating a child theme (if you don’t know what a child theme is, this guide from WPBeginner can teach what you need to know) and using WordPress hooks in your functions.php file. Beware because this part involves PHP/WP code that is easy to add but can scare some people.

 

If the tool you’re trying to integrate on your WordPress site says to install the code on the header of your site, you’re going to have to use the wp_head hook. And for this, you need to write a function that goes like:

 

// Comment what this code does

add_action('wp_head', 'my_custom_header_code');

function my_custom_header_code(){

?>

[THE CODE FOR THE INTEGRATION GOES HERE WITHOUT THE BRACKETS]

<?php

};

 

Now, if the script needs to be added in the footer, you have to change the ‘wp_head’ inside the parentheses after add_action for ‘wp_footer’. This is what’s called the wp_footer hook. Both this and the wp_head are called hooks because that’s exactly what they do, they hook the function you’re writing to the header or footer of your site. So the code for the footer goes like this:

 

// Comment for what this code does

add_action('wp_footer', 'my_custom_footer_code');

function my_custom_footer_code(){

?>

[THE CODE FOR THE INTEGRATION GOES HERE WITHOUT THE BRACKETS]

<?php

};

 

If you want to gain the functionality that the Header Footer Code Manager plugin grants you for adding the scripts on specific pages, you can include conditional tags on your code. Like, let’s assume you’re trying to add the code to your Thank You page and the ID of that page is 6, you’d write something like this:

 

// Comment for what this code does

function facebook_completeregistration_pixel() {

if ( is_single(6)) {

?>

<script>

fbq('track', 'CompleteRegistration');

</script>

<?php

}

}

add_action('wp_head', 'facebook_completeregistration_pixel');

 

*Note to remember: All of this goes on the functions.php file of your child theme. You need to create a child theme first to do this.

 

Using The Specific Files Where They Need To Be Added

This is also a hands-on code approach that I adopted a while back and it involves copying specific header.php or footer.php files from the parent theme by inserting a little snippet of code in the functions.php of your child theme. It’s a little confusing, but once you put it into practice it’s way easier than it sounds.

 

I took this approach from the guys at Divi.space which created an amazing tutorial for how to do this when you don’t have access to your site’s files. Their tutorial is a little bit long but very well explained, so I’m just going to is skip to the code part. The snippet you need to add on the functions.php file of your child theme is this:

 

touch( get_stylesheet_directory() . '/header.php' );

 

The next step in the process is saving the functions.php and then visit your site’s homepage. What that line of code is going to do is look for the header.php file but since you didn’t have it already, it’s not going to find it, it will just create it instead. You can use this for any file you’d like by changing ‘/header.php’ part to whatever the file name is you want to create (for instance, ‘/footer.php’).

 

You’re going to get a little scared because your site will have a broken-like appearance, but that’s because it created a blank header.php file in your child theme. It doesn’t have the content that the same file had in the parent theme. So, what you need to do is open the header.php from the parent theme and copying and pasting the content to the new header.php created in your child theme. Save the file and you’ll see your site back to how it was with a header.php file in your child theme.

 

Now that you’ve gone through all of this, you need to insert the code where your tool recommends you to. Let’s assume that’s the header, because that’s actually where most tools say to install their codes. To insert the code in this file, you need to look for the closing head tag which is </head>. Once you find it, copy the code of your integration just above it, save the file and that’s it.

 

Adding Header And Footer Scripts: Final Words

 

I want to be clear that sometimes with these 3rd-party tools, they’ve also developed their own plugins with which you can integrate with their services pretty easily. However, installing a plugin for each tool that you’re using is just more work for your server and is just more time-consuming. You can also use the Google Tag Manager to do this, but for the Tag Manager to work, you’re required to add its code to the header of your site, so you’re back to using one of these methods.

 

That’s it. Hopefully this tutorial helps you to make an integration with a 3rd-party tool in the easiest way possible. Use the comment box below to shoot me any questions or doubts and, thanks for reading!

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

9 Responses

  1. Admiring the time and effort you put into your site and in depth information you present.

    It’s great to come across a blog every once in a while that isn’t
    the same old rehashed material. Fantastic read!
    I’ve saved your site and I’m adding your RSS feeds to my Google account.

  2. Long time reader, first time commenter — so, thought I’d drop a comment..
    — and at the same time ask for a favor.

    Your wordpress site is very simplistic – hope you don’t mind me asking what theme you’re using?
    (and don’t mind if I steal it? :P)

    I just launched my small businesses site –also built
    in wordpress like yours– but the theme slows
    (!) the site down quite a bit.

    In case you have a minute, you can find it by searching for “royal cbd” on Google (would appreciate any feedback)

    Keep up the good work– and take care of yourself during the coronavirus scare!

    ~Justin

    1. I used the Hello Elementor theme. It’s one of the most lightweight themes to use when you’re working with Elementor Pro. The theme is from Elementor, so I really don’t mind if you “steal” it, lol

  3. I would like to thank you for the efforts you’ve put in writing this website. I’m hoping to check out the same high-grade content from you later on as well. In truth, your creative writing abilities has inspired me to get my own blog now ;)|

  4. Hey There. I discovered your weblog using msn. That is an extremely neatly written article. I’ll be sure to bookmark it and return to read extra of your helpful information. Thanks for the post. I will certainly return.|

  5. you’re in point of fact a good webmaster. The website loading pace is amazing. It kind of feels that you’re doing any unique trick. Also, The contents are masterwork. you’ve performed a excellent process on this subject!|

Leave a Reply

Your email address will not be published. Required fields are marked *

  • home
  • Contact
  • Agency Plans

Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!

Are you looking to redesign your website? build one from scratch? Or you just simply want to optimize it? Whatever your answer is to any of those questions, I can help you! Click the button below and fill up the form to contact me

Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want