How to Add Code in WordPress Header and Footer with or without using Plugin

Do you want to add code in WordPress header and footer? If you are looking for a simple and fast method, keep reading this article.

Adding custom code to your WordPress site can significantly enhance its functionality. It can be for improving WordPress performance, tracking user behavior, marketing, or SEO purposes.

🌐 See Plans to start!

One common task is inserting code into the header or footer of your site.

While this may sound complex, it’s a relatively simple process with the right approach.

In this guide, I’ll walk you through the different ways to add code snippets to your site, best practices for doing so, and some useful plugins to make the process smoother.

Will also discuss different types of code that you may want to add in the header or footer of your WordPress site.

But before going further, let’s see what type of code goes into a website’s header and footer.

Types of Codes and Snippets That May Need to Be Added to WordPress Header and Footer

You might want to add one or more types of codes in WordPress’s header and footer from the following:

• Google Analytics
• Google Tag Manager
• Google AdSense
• Facebook Pixel
• Custom CSS for Styling
• Schema Markup (JSON-LD)
• Affiliate Tracking Codes
• Custom Verification Meta Tags (e.g., for search engines)
• Conversion Tracking Scripts (e.g., from marketing platforms)
• Customize footer design

Add Code in WordPress Header and Footer With or Without Plugin

There are three methods available to add code in WordPress header and footer. They are:

• Using a dedicated plugin
• Without using a plugin
• Editing the functions.php file

Below, we will show you both methods, and you can choose the one that suits your preferences.

Without any further ado, let’s get into the tutorial.

Method 1: Add Code to WP Header and Footer using WordPress Plugins

If you’re looking for a simple way to add custom header code to your website, follow the plugin method.

There are multiple plugins available for this task. For this tutorial, we will choose Head, Footer and Post Injections.

• First, you have to install and activate the plugin on your WordPress site.

• After activation, go to Settings → Head and Footer.
• You will find three boxes where you can add code: Header, Body, and Footer
• Paste the code in the desired box and save the settings.

• If using caching plugins like WP Rocket, W3 Total Cache, or FlyingPress, clear the cache.
• Now, check the website’s source code on the front end to verify that the code has been inserted.

Method 2: Manually Add Code in WordPress Header and Footer

If you don’t need to use any third-party plugins, follow the manual method. Here, we will manually edit the header and footer files to add the code.

Also, we will not recommend editing the parent theme’s files. You can create a child theme and edit the header and footer files within it.

Go to the theme file editor option first.

Now, from the dropdown, choose the header file or footer file.

Next, look for the </head> tag.

You will be adding the code in the header before that tag.

The same goes for the footer. When you need to add code to WordPress footer, add the snippet before the </body> tag.

Save the file once you are done with the modifications.

3. Using Functions.php File

The next option is using WordPress functions. This is ideal if you need to get a bit technical. This method utilizes WordPress functions called wp_head() and wp_footer().

Go to your WordPress Dashboard → Appearance → Theme File Editor → functions.php file, and add the following code at the very bottom of it.

Here is a sample code you can use:

//* DNS Prefetching

function technumero_dns_prefetch() {
	echo '<meta http-equiv="x-dns-prefetch-control" content="on">
	<link rel="preload" href="https://yourdomain.com" as="document">
	<link rel="dns-prefetch" href="//yourdomain.com">';
}
add_action('wp_head', 'technumero_dns_prefetch', 0);

If we take a closer look at the code, we see that we have used a function called technumero_dns_prefetch. Now, paste the code you need to show in the header between the '' elements.

Plus, we are using wp_head for this custom code snippet. So, the code will be loaded in the website’s header. Finally, 0 is the priority.

If you need to add the code to the website’s footer, use the wp_footer function.

Pro Tip: Adding code to the WordPress header and footer using a function offers unique advantages and provides significant flexibility.

For instance, you can selectively include code on specific pages by utilizing WordPress conditional tags, though it requires some basic coding skills.

If you wish to add the above-mentioned link only to your site’s homepage, you can utilize the is_home() function.

Here’s an example:

//* DNS Prefetching on homepage only

function technumero_dns_prefetch_home() {
    if (is_home()) {
        echo '<meta http-equiv="x-dns-prefetch-control" content="on">
        <link rel="preload" href="https://yourdomain.com" as="document">
        <link rel="dns-prefetch" href="//yourdomain.com">';
    }
}
add_action('wp_head', 'technumero_dns_prefetch_home', 0);

This snippet will ensure the code is executed only on your homepage.

Best Practices for Adding Code to Header and Footer

Here are some best practices to follow when you are dealing with custom code snippets that you are going to use as header or footer code:

• Use a Child Theme for Custom Code: Always use a child theme when adding custom code. This ensures that any changes you make are not overwritten during theme updates.
• Test Code in a Staging Environment: Before implementing custom scripts on your live site, test them in a staging environment. This prevents any issues from affecting your visitors.
• Place Code in the Right Section: Place tracking or third-party code in the footer to avoid slowing down page load times. Most analytics scripts and social media tags should go in the footer rather than the header for optimal performance.
• Minimize External Script Calls: Be cautious with scripts from external sources. Too many can slow down your site. If you must add them, use asynchronous loading methods whenever possible to minimize the impact on page speed.
• Back up Your Site Before Editing: Always take a full backup before making any changes to your code. This gives you a safety net in case something goes wrong.

Bonus: Best WordPress Plugins to Add Code to Head and Footer

It is recommended to use a plugin to add the code in wp_head or wp_footer . Using a plugin offers numerous advantages:

You can manage unlimited scripts effortlessly, easily maintain code snippets, and benefit from automatic code insertion.

Plugins reduce the risk of code conflicts and enable you to add code specific to individual pages or articles.

They optimize script loading on the frontend, providing full control over script execution.

These benefits make plugins a practical and efficient choice for managing custom code in WordPress.

Here are a few plugins you can explore:

• Head, Footer and Post Injections
• WPCode – Insert Headers and Footers
• Insert Headers and Footers
• Header Footer Code Manager
• Simple Custom CSS and JS

Frequently Asked Questions

Now, let’s look at some frequently asked questions and answers related to this topic.

Conclusion

Adding code to your WordPress header or footer doesn’t have to be complicated.

Whether you’re implementing Google Analytics code, a Google Tag, or any other advertising code, there are several simple methods to get it done safely.

For most users, using a plugin is the preferred method. However, if you’re comfortable with some editing, adding a custom code snippet via a child theme gives you more control and flexibility.

Always remember to back up your site and test any changes, especially when working with a custom header or inserting code directly in the header element.

Which method would you choose?

Let us know in the comments.