How to Add Header and Footer Code in WordPress [Easy Methods]

Sometimes, you’ll need to add header and footer code to the WordPress site. This could be for things like adding custom CSS, tracking scripts (like Google Analytics), or meta tags for better SEO.

Many tools or services ask you to insert this code to make them work correctly. While WordPress doesn’t offer a direct way to do this, there are simple methods you can use, like plugins or adding a code snippet manually.

In this article, we’ll show you two easy ways to add code to your WordPress header and footer. Let’s get started!

What are the Header and Footer on the Website?

The header and footer on the website are the top and bottom sections that remain consistent across the various pages.

The header is the top area of the website that can include the company logo, navigation menu, site search features, or a CTA for a seamless web experience. While the header can determine the website’s style with a consistent design, you can also have different headers on each site page.

Similarly, the footer is the section at the bottom of the website with useful information such as links to other site pages, business contact details, terms of use and privacy, business location map, and much more.

Often neglected, the header and footer are key aspects of a website’s design that simplify the navigation and offer useful information to the site visitor, enhancing the overall website experience.

Create a seamless navigation experience for your website visitors with a mega menu. Learn How to Add Mega Menu in WordPress using Gutenberg.

Why Add Code to Your Header and Footer?

There are various reasons for adding header and footer code in WordPress. One of the most common reasons would be to customize the design of the header and the footer using a custom code.

Additionally, there are various plugins or web services that require you to add a code in the footer header to function properly. For instance, you might want to add tracking scripts to integrate Google Analytics to monitor the website traffic. Or you might want to add meta tags to optimize your website for search engines and achieve higher rankings.

Adding a code in the header and footer makes it easy to integrate such customizations on your website without editing the theme’s source code.

How to Add Header and Footer Code in WordPress?

Wondering how to edit the head in WordPress or how to make a footer in WordPress to add a code? Here are two simple ways to do so.

Method 1: Using a Plugin

One of the easiest ways to add code to the footer header in your website is to use a WordPress plugin like-

• Header, Footer, and Post Injections
• Insert Headers and Footers

Here, we will explore how you can use the Header, Footer, and Post Injections plugin to add code to website header and footer-

Step 1: Install and activate the plugin

Go to Plugins > Add New on your WordPress dashboard and search for the Header, Footer, and Post Injections plugin or other plugin of your choice.

Install and activate the plugin.

Step 2: Add the code snippet to the header and footer

Once the plugin is activated, go to Settings > Header and Footer on the dashboard.

Here, you’ll see various text fields where you can add a custom code snippet for tracking code or a custom JavaScript.

In the first two fields, you can insert a code snippet to the website’s header. Within this, the left field lets you add a custom code snippet to every page on your website, while the right field will help you add a code only to the homepage.

Similarly, you can add a code snippet for the website footer in the last two fields. Within this, the left field is for desktop viewing, and the right field is for adding a code for the mobile website.

Once you’ve added the code snippets for the header and footer, save the changes, and you’re good to go!

However, to use the plugin to add a code to your header and footer, you also need to understand how to add a header and footer to your website. Here is the step-by-step process to edit the head in WordPress using the Nexter Blocks–

Step 1: Create a Header Template

Install and activate the Nexter theme from the WordPress library and go to Nexter Builder > Add New on your WordPress dashboard.

In the Nexter Builder, select Sections > Header from the layout options. This will allow you to create a custom header for the website, which you can easily customize using Display Rules.

Step 2: Customize the Header

Now, you can use the Nexter Blocks in WordPress to edit the head section and add widgets for design and content. For instance, you can use different widgets to add the business logo, navigation menu, search features, or CTA banners in the header.

Simply click on the ‘+’ sign to add the column block and add the widgets you want to. For each block, you can use the advanced settings to customize the layout, colors, background, sizing, and more.

Once you’ve designed the header, scroll down to Nexter Theme Builder, and under the Include In option, select Entire Website to set the new header as the Global Header for your website. Click on Publish at the top to save and publish the changes.

Step 3: Design the Footer

To add a footer to your website, follow the same steps as for the header.

However, in the Nexter Builder, select Sections > Footer from the layout options and use the Nexter Blocks to add widgets, social icons, Google Maps, or contact forms to enhance the website experience.

Once you know how to insert the footer and header in WordPress, you can use the plugin mentioned above to add a header and footer code in WordPress.

Allow your website visitors to easily visit your business location. Learn How to Add Google Maps to WordPress.

Method 2: Manually Adding Code to functions.php

Manually adding a code to the website header and footer isn’t too complex, though it requires you to perform a few technical steps.

Step 1: Create a child theme

Adding a code to your header and footer manually requires editing the website theme files. However, editing the parent theme will overwrite your customizations every time you update it. As a result, it is better to create a child theme to modify the parent theme without losing the customizations.

For this, you can use a theme builder plugin to create a child theme for your website.

Step 2: Add a code to the theme’s functions.php file

Once you’ve set up the child theme, access its functions.php file to add the code.

1. You can either do it via FTP and an FTP client such as FileZilla or edit certain theme files via Appearance > Theme Editor on your WordPress dashboard.  

2. In the Theme Files section on the right, click on the “Theme Functions (functions.php)” file.

3. Add the following code to your functions.php file and replace “YOUR_CODE_HERE” with your custom code-

For Header-

function custom_header_code() {

?>

YOUR_CODE_HERE

<?php

}

add_action( 'wp_head', 'custom_header_code' );

For Footer-

function custom_footer_code() {

?>

YOUR_CODE_HERE

<?php

}

add_action( 'wp_footer', 'custom_footer_code' );

4. Click on the Update file to save your changes.

Are you trying to create a custom menu for your website and WordPress cannot add a page to menu? Know How to Fix WordPress Can’t Add Page to Menu.

SAVE MAXIMUM THIS BLACK FRIDAY

Don’t Miss the Mega WordPress Black Friday Select Deals of 2024.

Subscribe to get notified first about the best Black Friday deals on your favourite plugins.

Wrapping Up

Adding a code to your header and footer in WordPress is a great way to customize your site design, integrate Google Analytics to track website traffic, and improve the overall website experience. Fortunately, it is pretty simple to add code to the footer header using a plugin or manually by adding a code to your functions.php file.

Headers and footers are a great way to enhance the functionality of your website. With Nexter Theme Builder and Nexter Blocks, you can easily create customized headers and footers and add various features.

But that’s not it. Nexter Blocks gives you access to 90+ unique Gutenberg blocks to help you enhance the functionality of your Gutenberg editor.

FAQs on header and footer code in WordPress