Easy Way to Add Header and Footer Code in WordPress

Are you Struggling with how to add code to the WordPress header (head) or footer?

💡Heads Up!

If you run a website, you’re probably familiar with at least one third-party service that requires you to embed code to connect to it. Some of the most popular examples include Google Analytics, Search Console, Facebook Pixel, and many other tools that involve website tracking. Those services require you to add specific scripts between your website’s head tags.

Footer tags work similarly to their head counterparts. Technically, if you add code snippets to your site’s footer, they should run the same as if you include them in your header.

However, it’s essential to understand that your website will execute scripts in the order you include them. The header code will run before the page is loaded, while the footer code will run after it.

For various reasons, it’s possible that at some point, you will want or need to add code to your WordPress site’s header or footer. Unfortunately, the platform doesn’t provide a straightforward way to do this out of the box.

How to Add Header and Footer Code in WordPress (2 ways)

As is often the case with WordPress, you can accomplish the same goal by either modifying files manually or using a plugin.

The plugin approach-

Using a plugin to add code to your header and footer files in WordPress is the safest approach. With a plugin, you don’t need to modify theme files manually or ensure that you’re adding scripts in the right place.

While there are many good plugins to choose from personally, I recommend-
https://wordpress.org/plugins/insert-headers-and-footers/
&
https://wordpress.org/plugins/header-footer/

Add Code Snippets Through Your functions.php File.

  1. Create a child theme for your theme. This way, you won’t lose any customizations when you update the parent theme.
  2. Use hooks to add the code through your functions.php file. This offers a cleaner approach over editing header and footer files manually.

Ideally, you should always use a child theme if you plan on doing any theme customization.
You can access your child theme’s functions.php file in its folder within the ../wp-content/themes directory.
Open the functions.php file in your code editor. To add the code you want, you need to use either the wp_head or wp_footer hook.

The following code snippet adds your custom code to the header of your site:

add_action('wp_head', 'add_header_custom_code');
function add_header_custom_code() {
?>
<!-- Your Header Code Goes Here -->
<?php
}

To add code to your footer, use this code snippet:

You can use the wp_footer hook instead of wp_head if you want to place the code into your footer.

add_action('wp_footer', 'add_footer_custom_code');
function add_footer_custom_code() {
?>
<!-- Your Footer Code Goes Here -->
<?php
}

When you’re done tweaking your functions.php file, remember to save your changes, and that’s it. Whatever code you added should be working now!

 

Do you have any questions about how to add header and footer code in WordPress? Let’s send me an email on my contact page.

0 Points


One thought on “Easy Way to Add Header and Footer Code in WordPress”