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!

Leave a Reply

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

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