Trouble with how to add code to WordPress header or footer? Many tracking tools and scripts require you to add code snippets to the header or footer of your WordPress site. But by default, WordPress doesn’t make it very accessible to edit those files.
In this post, we will show you how to add code to your WordPress header or footer using a WordPress plugin or by manually adding the code to your functions.php file. For most users, the plugin method is the recommended method. But intermediate-advanced WordPress users may prefer to use the manual code method.
How to add code to WordPress header and footer with a plugin
For most users, the easiest way to add code to the WordPress header and footer is through a plugin. The benefits of using a plugin over the manual method in the next section are:
- Your code snippets will remain intact if you ever change themes.
- The plugin makes it easy to add just code snippets to the header or footer of your home page, which can be useful in some use cases.
- The plugin is more beginner-friendly because it doesn’t require digging into the code.
While there are several plugins that offer this functionality, we recommend the Head, Footer and Post Injections plugin by Stefano Lissa because it gives you more control than many of the alternatives. It currently has over 200,000 active installs with a 5 out of 5 star rating.
Step 1: Install and activate the header, footer, and post injections
Head, Footer and Post Injections is available for free on WordPress.org, so you can install and activate it directly from your WordPress dashboard by going to Plugins → Add New and searching for it:
Step 2: Add a code snippet to the header, footer, and post injections
Once you activate the plugin, you can access its interface by going to Settings → Header & Footer in your WordPress dashboard. You will see several tabs on the plugin interface. But for this guide, you’ll mostly be working on the default Header & Footer tab:
To add code to the header of your site, you must paste it into one of the boxes below the SECTION INJECTION area:
- Every Page: Adds the code snippet to the header of every page on your site. This is what you’ll want to use most of the time.
- Home Page Only – Just add the code snippet to the header of your home page.
For example, to add the Google Analytics tracking code to WordPress, simply paste it into the Every Page box and save your changes:
To add code to the footer of your site, you can scroll down to the BEFORE CLOSING TAG (Footer) option. Again, you have two options, although they are different from the header section:
- Desktop: Despite the name, this adds code to the footer of both the desktop and mobile version of your site, unless you specifically check the box for Mobile.
- Mobile: when checked, this allows you to add a different code snippet to the mobile version of your site.
If you just want to add a code snippet to the footer section for all users, regardless of their devices, paste it into the Desktop box and leave Mobile unchecked:
BONUS: add code to the header and footer of Google AMP pages
Another cool thing about this plugin is that if you are using Google AMP for WordPress, the plugin allows you to specifically add code snippets to the header and footer of the Google AMP versions of your pages (as long as you is using the official Automattic AMP Plugin code).
To do this, go to the AMP tab under Header & Footer and paste the code snippet into the appropriate box:
If you simply need to add different PHP functions throughout your site, we also recommend checking out the free Code Snippets plugin. It eliminates the need to add custom snippets to your theme’s functions.php file. It currently has over 100,000 active installs with a 5 out of 5 star rating.
How to manually add code to WordPress header and footer
If you are not familiar with the basics of PHP, we recommend sticking with the plugin method above. The manual method may be too complicated for you.
In this section, you’ll learn how to manually add code snippets to your theme’s header and footer via your functions.php file.
If you want to continue with this plugin approach in the previous section, it is essential that you use a WordPress child theme to make your edits. If you don’t use a child theme, any code you add to your header or footer will be overwritten if you update your WordPress theme.
Many developers provide a child theme. But if your developer doesn’t, here’s a guide on how to create a WordPress child theme. Once you have your child theme ready, you can continue with the following steps to add code to your theme’s header or footer.
While you can add code snippets directly to your header.php and footer.php files, a better way is to use your functions.php file and the appropriate WordPress link. This allows you to keep all your snippets in one place and avoid modifying the main theme files.
Step 1: Prepare Code Snippets
To get started, we’ll provide a rough framework for adding code to both the header and footer.
To add code to your header, use this code snippet:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};To add code to your footer, use this code snippet:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
PASTE FOOTER CODE HERE
<?php
};For each snippet, make sure to change:
- The comment description (useful when you need to remember what a piece of code does a year later)
- The placeholder your_function_name (both instances)
- The placeholder PASTE CODE X HERE
Step 2: Add code snippets to the functions.php file in the child theme
Once you have the relevant code snippets ready, you need to add them to your child theme’s functions.php file. You can edit this file by connecting to your site via FTP. Or you can go to Appearance → Editor and select the functions.php file. Then paste your code at the end of the file:
BONUS: add code to the header or footer for specific pages only
If you want more control over where your header or footer code snippets appear, you can use if statements to add the code only to specific pages on your WordPress site.
For example, to add only code snippets to the header or footer of your home page, you can use:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_front_page()) { ?>
PASTE HEADER CODE HERE
<?php }
};Another option is to only add the code snippets to specific posts or pages. To do that, you can use this code snippet:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_single(73790)) { ?>
PASTE HEADER CODE HERE
<?php }
};Be sure to replace the example number, 73790, with the actual ID of the post or page you want to add the code snippets to.
When in doubt, use the plugin
That concludes our guide on how to add code to the header or footer of your WordPress site. If the code examples in the manual are confusing, we recommend that you use the plugin method. It’s much more beginner friendly, and most of the time, it gives you the same functionality.
