Categories: PHPWordpress

How to Add Code to WordPress Header and Footer

Struggling with the way to add code to the WordPress header or footer? Several tools and trailing scripts need you to feature code snippets to your WordPress site’s header or footer. But, by default, WordPress doesn’t build it terribly accessible to edit those files. during this entry, we’ll show you the way to feature code to the WordPress header or footer each by employing a WordPress plugin or manually adding the code to your functions.php file. for many users, the plugin technique is that the suggested technique. however intermediate-advanced WordPress users could like mistreatment the manual code technique, instead.

You can click the links below to jump straight to your preferred method:

How to Add Code to WordPress Header and Footer With a Plugin
How to Manually Add Code to WordPress Header and Footer

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 via 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 switch themes
The plugin makes it easy to only add code snippets to the header or footer of your homepage, which can be helpful for some uses.
The plugin is more beginner-friendly because it doesn’t require digging into code

While there are several plugins that offer this functionality, we recommend the Head, Footer and Post Injections plugin from Stefano Lissa because it gives you more control than many of the alternatives. It currently has over 100,000 active installs with a 5 out of 5-star rating.

Header and Footer WordPress plugin

Step 1: Install and Activate Head, Footer and Post Injections

Head, Footer and Post Injections is available for free at 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 Code Snippet to Head, Footer and Post Injections

Once you activate the plugin, you can access its interface by going to Settings → Header and Footer in your WordPress dashboard. You’ll see a number of tabs in the plugin’s interface. But for this guide, you’ll mostly work in the default Head and footer tab:

To add code to your site’s header, you need to paste it into one of the boxes under the <HEAD> SECTION INJECTION area:

Every page – adds the code snippet to the header of every single page on your site. This is what you’ll want to use most of the time.
Only home page – only adds the code snippet to the header of your homepage.

For example, to add the Google Analytics tracking code to WordPress, you’d just paste it into the Every page box and save your changes:

To add code to your site’s footer, you can scroll down to the BEFORE THE </BODY> CLOSING TAG (FOOTER) option. Again, you have two options, though they’re 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 lets you 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, no matter their devices, paste it in the Desktop box and leave Mobile unchecked:

BONUS – Add Code to Header and Footer of Google AMP Pages

Another neat thing about this plugin is that, if you’re using Google AMP for WordPress, the plugin lets you specifically add code snippets to the header and footer of the Google AMP versions of your pages (as long as you’re using the official AMP plugin from Automattic).

To do it, head to the AMP tab in Header and Footer and paste your code snippet into the appropriate box:

If you are simply needing to add different PHP functions on a site-wide basis, we also recommend checking out the free Code Snippets plugin. It removes the need to add custom snippets to your theme’s functions.php file. It currently has over 50,000 active installs with a 5 out of 5-star rating.

How to Manually Add Code to WordPress Header and Footer

If you’re not familiar with the basics of PHP, we recommend you stick with the plugin method above. The manual method might be overly complicated for you.

In this section, you’ll learn how to manually add code snippets to your theme’s header and footer via its functions.php file.

If you want to proceed with this method over the plugin in the previous section, it’s essential that you use a WordPress child theme to make your edits. If you don’t use a child theme, any code that you add to your header or footer will get 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 to go, you can proceed 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 hook. This lets you keep all your snippets in one place and avoid modifying core theme files.

Step 1: Prepare Code Snippets

To get you started, we’ll give you a rough framework to add code to both your 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 HEADER CODE HERE
<?php
};

For each snippet, make sure to change:

The comment description (helpful when you need to remember what a code snippet does a year later)
The your_function_name placeholder (both instances)
The PASTE X CODE HERE placeholder

Step 2: Add Code Snippets to functions.php File in Child Theme

Once you have the relevant code snippet(s) ready, you need to add them to the functions.php file of your child theme. You can either 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:

Make sure to save your changes and you’re done!

BONUS: Add Code to Header or Footer For Only Specific Pages

If you want more control over where your header or footer code snippets show up, you can use if statements to only add the code to specific pages on your WordPress site.

For example, to only add code snippets to the header or footer of your homepage, you could 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_single(73790)) {  ?>
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_footer', 'your_function_name');
function your_function_name(){
if(is_single(73790)) {  ?>
PASTE HEADER CODE HERE
<?php  }
};

Make 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 wraps up our guide on how to add code to the header or footer of your WordPress site. If the manual code examples are confusing, we recommend that you use the plugin method. It’s much more beginner-friendly and, most of the time, gives you just as much functionality.