How to Add Header and Footer Code in WordPress?

How to Add Header and Footer Code in WordPress?

Are you familiar with a situation where you need to add code snippets to your WordPress header and footer?

This often happens when you try to integrate services such as Google AdSense, Google Analytics, and Google Search Console on your website. 

By default, WordPress does not offer the option to add code to your header and footer. But luckily, there are other easy ways for beginners. 

In this guide, we will explain two different methods on how to add header and footer code in WordPress. The simplest method is by using a WordPress plugin. For the next method, you can add code snippets to your theme’s PHP file. 

So, let’s get into the details!

Adding Header and Footer Code in WordPress – 2 Simple Methods 

As mentioned above, you can either use a plugin or add a code manually to your WordPress header and footer. We recommend using a simple plugin as it is much easier and safer as compared to the manual method. 

Here are some benefits of using a plugin to add code in the WordPress header and footer: 

  • Easy, Fast, and Organized: Using a plugin is much easier and quicker as compared to the manual approach. Plus, using a plugin keeps your task organized and allows you to store your header and footer codes in one place.
  • Prevents Errors: Plugins are easy to use and are beginner-friendly. You don’t need to make modifications to custom codes to use them on your website. Thus, it prevents possible errors. 
  • Changes Remain Intact: The plugin saves your header and footer code in a separate safe place. Hence, even if you update or edit your theme, the settings remain intact.

Having said that, let’s dig into the step-by-step process of adding header and footer code in WordPress using both of these methods.

But first, make sure to backup your WordPress files in case something goes wrong or you want to revert back to the previous settings.

Method 1: Adding Code to WordPress Header and Footer using a Plugin

There are many WordPress plugins for adding header and footer code in WordPress. However, we recommend using the Insert Headers and Footers plugin. This plugin has a simple interface and built-in features to let you add codes to your header file and footer file at ease. 

Here is how you add header and footer code in WordPress using this plugin: 

  • Go to Plugins > Add New on your WordPress dashboard. 
  • Search for Insert Headers and Footers plugin. 
  • Install and activate it. 
  • After activation, go to Settings on your dashboard. Then, click on the Insert Header and Footers option. 
  • You can see boxes where you can add a piece of code for header, body, and footer.
Screenshot name: Options to add codes on header, body, and footer.png
  • You can simply add your codes in the header and footer boxes.
  • Once done, click on the Save button. 

Now, the plugin automatically loads the codes you added in the respective locations of your site. To edit or delete the code, come back to these header and footer boxes and delete the code. At last, save the changes to continue.

Note:

  • You need to keep this plugin installed and activated all the time. If you deactivate the plugin, WordPress stops adding the codes to your site.
  • After saving the changes, you need to clear your WordPress cache. Doing so makes sure that the changes are seen properly on your website’s front end.

Method 2: Manually Adding Header and Footer Code in WordPress

The manual method is a bit more technical than the first one. You need to prepare your snippet and then add it to your WordPress functions.php file. Before making any modifications, make sure to create a WordPress backup

We also recommend using the child theme while editing because the codes get overwritten when you update your parent theme. Installing and editing child theme files makes sure you don’t lose the settings later. 

Many developers offer child themes for specific WordPress themes. However, if yours does not have one, check out How to install a child theme in WordPress

Now, after creating a WordPress backup and installing the child theme, follow the steps below to add header and footer code manually: 

Step 1: Preparing Code Snippets 

You can use the following snippet framework for your header and footer: 

Code Snippet for Header 

/* Describe the code snippet for your header */
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};

Code Snippet for Footer 

* Describe the code snippet for your footer*/
add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
PASTE FOOTER CODE HERE
<?php
};

For each of these snippets, make sure to change the following with your own: 

  • “Describe the code snippet for your header/footer” 
  • “your _function_name()”
  • “Paste header/footer code here”

Step 2: Adding the Code Snippets to Your Child Theme’s functions.php File

After preparing your code snippets for the header and footer, you need to add those codes to the functions.php file of your theme. 

Here is how you can do it: 

  • Go to the Appearance > Theme Editor from your WordPress Admin Panel.
Theme editor setting
  • Click the “functions.php” file. 
  • Now, paste your code at the end of the file. 
  • Click on the Update File button to save the settings.
add header and footer code in function

If you want to add the code to a specific page or post, you can add an “if “ statement as follows: 

For Header:

/* Describe the code snippet for your header */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_single(73790)) { ?>
PASTE HEADER CODE HERE
<?php
};

For Footer: 

/* Describe the code snippet for your footer*/
add_action('wp_footer', 'your_function_name');
function your_function_name(){
if(is_single(73790)) { ?>
PASTE FOOTER CODE HERE
<?php
};

Note: make sure to replace the number “73790” with your page or post id.

Conclusion

The main reason for adding header and footer code in WordPress is for using third-party services such as Google AdSense, Google Analytics, Facebook Pixel, and other tools. However, there may be various reasons as well. 

Whatever be the reason, you can add the code to your header and footer using a plugin or by adding a code to the functions.php file. Although both of these methods are effective, you should go with the first and our preferred method if you are a beginner. It is easier and safer. 

If you have further queries or concerns, share them with us in the comments section below.

Leave a Reply

Your email address will not be published.