WordPress Technique: Inserting Header and Footer Code Properly

There are many methods and workarounds for inserting the header and footer code into your WordPress website.

First off: what is the code used for?

If it is for a theme, then scroll down to this portion of the article.

If it is for a tracking code, or of the sort, then scroll down to this portion of the article instead.

Any questions/missing implementations please let us know in the comments below.

Inserting Header and Footer Code for Theme Functionality

Is your code meant for the following:

Enhance theme/website functionality
Add styles to the website
Add interactivity to the website

With that said, you will want to look into the following implementations for your code:

functions.php file implementation (during Theme Development)
Code Snippets plugin implementation (after Theme Development, so as not to tamper with the theme)

If you are unsure, then you may want to have a read about other possible methods of inserting header and footer code.

Functions.php file Implementation

Within your functions.php file, you may easily add JavaScript tags and Stylesheets using this function as a template (example) for you:

/**
 * Enqueue scripts and styles.
 */
function my_theme_scripts_001() {
	wp_enqueue_style( 'swiper.js-css', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css', array(), '4.3.5' );
	
	wp_enqueue_script( 'swiper.js-scripts', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js', array(), '4.3.5', true );

}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts_001' );

This way, you can ‘queue’ the CSS stylesheet links and/or JavaScript links to load in the header or footer.

More info can be found in the functions themselves:

And the action hook wp_enqueue_scripts will find out when/where to place the styles/scripts in its callable function my_theme_scripts_001().

Inserting Header and Footer Code for Tracking Codes

If you are inserting tracking codes, you will definitely and only want to use a plugin for this implementation.

It is a bad habit (although common) to place tracking codes within themes.

Yet, there are different variations of the category of plugins. Like if it is for Google Analytics tracking codes, you will realise that there are now so many of these out there on the WordPress Plugin Directory.

Let’s dig into the common tracking code plugins.

Top Google Analytics Tracking Code Plugins

However, if you are unsure about using Google Tag Manager, or are unable to use it, then use one of the following Google Analytics plugins for WordPress below:

Top Google Tag Manager Tracking Code Plugins

The primary reason to setup Google Tag Manager is if you will be placing tags on your website. To aid your implementation, there are dedicated plugins to help you easily add GTM tracking codes across your website:

Top Conversion Optimisation Tracking Code Plugins

When it comes to heat maps, or user behaviour analyses, there are plugins that deal with that too. Normally these tracking codes will be added before the closing HTML head tag. But it does help with organisation to know they can be easily deactivated if not needed for the time being:

Popular Live Chat Implementation Plugins

There are dozens of live chat companies now, that they too have their own plugins to help you easily integrate with WordPress. And more importantly, to easily send updates to their tracking templates to enable enhanced features for you in the long-term (rather than you having to manually update the tracking code you manually placed):

Popular Email Marketing Plugins

Same thing, these plugins will help deal with your email marketing tracking codes and updating them where necessary:

Inserting Header and Footer Code Using the Code Snippets Plugin by Shea Bunge

Another great implementation to easier organise your code will be to use the Code Snippets Plugin by Shea Bunge. What makes this plugin great is that you can tag your PHP code snippets with anything, and is therefore the most customisable.

Tagging using the Code Snippets Plugin

For example, to specify that it is an implementation between a contact form and Google Analytics event tracking using the ga() command queue, you can tag the code snippet as: Google Analytics, and Formidable Forms. This is because that PHP code snippet is meant for Formidable Forms and Google Analytics.

More info on the Code Snippets plugin and instructions found here.

Inserting Header and Footer Code

With a brief introduction to WordPress hooks, you will be able to easily add your tracking codes wherever and whenever you want!

For your implementation, you may use these hooks:

And add the code you would like using PHP. Kindly see below:

Add Code to wp_head Using Code Snippets

Here is a tracking code template where you can place your tracking code script within the comment // Tracking Code Goes Here. Make sure to edit the function name my_tracking_code_001 with your own unique function name, or else you may get a PHP fatal error.

Download the free wp_head tracking code Code Snippet for import.

function my_tracking_code_001() {
    ?>
    
        // Tracking Code Goes Here
    
    <?php 
}
add_action( 'wp_head', 'my_tracking_code_001' );

Add Code to wp_footer Using Code Snippets

Similar function, but different WordPress Action Hook called wp_footer. This will place the enclosed code within the wp_footer action hook.

Download the free wp_footer tracking code Code Snippet for import.

function my_tracking_code_002() {
    ?>
    
        // Tracking Code Goes Here
    
    <?php 
}
add_action( 'wp_footer', 'my_tracking_code_002' );

Inserting Header and Footer Code Using Google Tag Manager

Once more, another method to insert header and footer code will be to use Google Tag Manager.

However I would disagree with this unless it happens to be something to do with Google Tag Manager.

A perfect case for using Google Tag Manager for inserting header and footer code will be if you are implementing Google Ads for Remarketing Banners.

That way, you can add a Google Tag to:

Fire on All Pages
Using the tag template ‘Google Ads Remarketing’

For these reasons, you can check out the Supported Tags by Google Tag Manager here.

Some common examples of tracking codes you would like to move over to Google Tag Manager are:

Google Ads Tracking codes
Google Analytics Tracking codes
Hotjar Analytics Tracking codes
Infinity Cloud Tracking codes
Twitter Ads Tracking codes

The reason is that these are provided by Google Tag Manager, so you can rest assured that they will have easy implementations, as well as updated tracking code templates. They may release a better version of their tracking code with enhanced features in the next year or so.

And if you make use of their tracking code templates as found on Google Tag Manager, and have GTM installed on your website using one of the Google Tag Manager plugins above, then you’ve successfully set up a future-proof tracking code!

Conclusion

WordPress is well-known for its tens of thousands of plugins with well over 1 million installations on each one of them.

Furthermore, what keeps it going is how easy it is for these plugins to integrate themselves to the WordPress platform.

You might’ve realised that these plugins listed in the article for example have started out as simply acting as a head/footer hook for code, but later prove to do more than just allow you to paste your tracking code. This is the beauty of using plugins with good development and activity!

Thank you for reading this article. If you’re a digital agency, I have a gift for a FREE 6-part email course on Agency Automation for WordPress Theme Development. Please do check it out! ??