How to add header and footer scripts to your WordPress site

If you are in the business of building, maintaining or expanding your WordPress site you’ve most likely been asked to add some sort of code into your site’s header or footer. Many popular tools, such as Google Analytics, Facebook Pixel, various search engine verification methods, need to have some code added to your site in order for them to function properly. There are two main ways to achieve this in WordPress, below we’ll take a look at both of them.

The easy way, using a plugin

As you might have noticed there is a plugin for almost anything you want to do in WordPress, adding code to the header & footer is no exception. The good folks over at WPBeginner have created the Insert Headers and Footers a very simple plugin to help you add code to the site’s header or footer. The plugin could not be easier to use. Install it, activate it and navigate to Settings > Insert Headers and Footers. Paste your code in the appropriate box and click the save button. That’s it. Your added code will be output in the corresponding area of your site.

If you are looking for something more involved, you can have a look at the Header Footer Code Manager plugin which allows you to not only add header and footer scripts, but control with greater detail where they will load, for example you might have some code that you only need to load on a certain page, post or custom post type, you can also choose to load something on mobile devices and not desktops etc. To add a new snippet navigate to HFCM > Add new, add your snippet, configure where you want it to appear and save.

Using a plugin to add this functionality to your site has the benefits of being quick, clean and easy, while preventing most errors. Additionally it allows you to change the theme and maintain all active injected code in place.

The more hands on approach, using a child theme

If you prefer a more DIY approach to adding code to your theme’s header and footer, start by creating a child theme, if you are using one of our themes, we provide ready made child themes in our downloads section. To add our code in the header or footer we will be using WordPress hooks. All code goes at the end of the child theme’s functions.php file.

To add code to the header we will use the wp_head hook. You will need to paste something like this

// Prepend a meaningful comment so you instantly know what the code below does.
add_action('wp_head', 'my_custom_header_code');
function my_custom_header_code(){
?>
	YOUR CODE HERE
<?php
};

Similarly to add code to the footer we will be using the wp_footer hook.

<?php

// Prepend a meaningful comment so you instantly know what the code below does.
add_action('wp_footer', 'my_custom_footer_code');
function my_custom_footer_code(){
?>
	YOUR CODE HERE
<?php
};

In the above snippets you will need to replace the comment with a piece of text which describes what the code does, replace both instances of the function name, and finally replace the YOUR CODE HERE placeholder with the code you need to output to the header or footer.

For more fine grained control over where your custom code loads you can incorporate conditional tags to it. For example if you want to load specific code to the footer of 404 pages, you can use a snippet like this one:

// Prepend a meaningful comment so you instantly know what the code below does.
add_action('wp_footer', 'my_custom_footer_code');
if( is_404() ) {  
?>
YOUR CODE HERE
<?php  }
};

Other methods

For the sake of completeness we will mention that you can also add code to the theme’s header and footer by editing the parent theme’s functions.php file, which has the disadvantage of being completely replaced once you update your theme. You could also copy directly edit the header.php and footer.php files of your theme (preferably after copying them to the child theme) however it’s not advised since you might encounter code you don’t understand in them and potentially break something if you edit the wrong thing, hooks are much more preferable since they give you the ability to inject the code where you need it without touching your theme files.

That’s all

Hopefully you will find this small guide helpful in case you need to add some custom code on your site’s header or footer. If you have any comments or questions, please let us know in the comments below.