How to Insert Headers and Footers on Your WordPress Website

A good website is like a good book. You might pick up a book because you’re immediately drawn to its cover. You’ll then flip to the back cover to find important information, like a summary of the book, a list of blurbs from other authors, a price, and so on.

You can think of a header and website footer in the same way. The header is the front cover of a website: it usually contains the website name in large typeface, a background image, and not much else. The footer is the back cover of the website, containing important information like the copyright notice, logo, navigation links, contact information, and more.

Like a book cover, the header and footer are important design elements on a WordPress website. Thankfully, WordPress themes come with a header and footer by default, so you don’t have to code them from scratch.

You’ll likely have to add some code to customize your header and footer sections, however. There are two major reasons. One, to have complete control over the appearance of your header and footer, you’ll need to add custom CSS. Two, to integrate with some services like Google Analytics, you’ll need to add code snippets to the header or footer section of your site.

There are multiple ways to add code to your header and footer. Let’s briefly discuss each option below.

How to Insert Headers and Footers on Your Website

By default, the WordPress header and footer are simple pieces of code. For example, if you navigated to the wp-content/themes/classic/header.php template file in the WordPress Classic Theme, you’d see the following header code:

 
<h1 id="header">

<a rel="noopener" target="_blank" rel="noopener" target="_blank" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>

</h1>

You could find the following style information in the style.css file:

 
#header {

background: #90a090;

border-bottom: double 3px #aba;

border-left: solid 1px #9a9;

border-right: solid 1px #565;

border-top: solid 1px #9a9;

font: italic normal 230% 'Times New Roman', Times, serif;

letter-spacing: 0.2em;

margin: 0;

padding: 15px 10px 15px 60px;

}

Because of this CSS, the default header of the Classic Theme would have a green background color, multi-colored border, Times New Roman font, and padding which indents the text from the left. The result would look something like this:

Image Source

But let’s say your website color scheme doesn’t include green. Or you’re using another font on your site. Whatever the reason, you can change the background color, border, font size and style, letter spacing, and more by editing or adding code.

You can insert header and footer code in three ways.

• You can manually edit your style.css stylesheet or your theme’s header.php and footer.php files.
• You can use your theme’s built-in header and footer code modules, if your theme has them.
• You can use a WordPress plugin.

If you’re not comfortable with coding, then you’ll need to use a plugin. Most users will opt for this option since editing your stylesheet or theme’s files can be tricky, considering that a small mistake can break your site. Additionally, these changes are usually reverted when you update your theme or your WordPress version.

For that reason, we’ve included some of the best plugins for inserting header and footer code below.

Plugins for Inserting Headers and Footers

Using a plugin is the easiest way to not only add code to your WordPress header and footer — but also to create and customize these sections. Below we’ve gathered the best plugin options. Select the tool that best fits your needs and budget.

• Insert Headers and Footers: Best for Quickly Adding Code to Headers and Footers
• Head, Footer and Post Injections: Best for Adding Google Ads Code to Headers, Footers, and Posts
• Header Footer Code Manager: Best for Adding Multiple Scripts to Headers and Footers
• Elementor — Header, Footer and Blocks Template: Best for Elementor Users
• My Header Footer: Best for Creating Fully Custom Headers and Footers

1. Insert Headers and Footers: Best for Quickly Adding Code to Headers and Footers

Designed to be the easiest way to insert code in your WordPress headers and footers, Insert Headers and Footers is a free plugin that offers a simple interface for inserting scripts. You can insert custom CSS, the Google Analytics tracking code, Facebook Pixel tracking code, and more in the same place. There’s no need to edit your theme files, or download and install multiple plugins.

Best for: Quick and easy header and footer integration and modification. With more than a million downloads and regular updates, Insert Headers and Footers is all about streamlining key header and footer functions in one user-friendly place.

2. Head, Footer and Post Injections: Best for Adding Google Ads Code to Headers, Footers, and Posts

Image Source

Simple and flexible, the Header and Footer plugin is another free option for adding any script in the header or footer section of your website, your homepage, or any other page or post specifically. You can add the Google Analytics code, the verification code required by Google Webmasters Tools, the Facebook script for the “Like” button, and more. It’s a particularly good fit if you’re using Google Ads, because it allows you to add the ad code to any part of a post or page. You can add the code to headers and footers, too.

Best for: Adding Google Ads, Facebook Pixel, and custom tracking code into headers, footers, and posts. Just copy and paste this code into Head, Footer and Post Injections to change your posts and pages without impacting your theme’s code.

3. Header Footer Code Manager: Best for Adding Multiple Scripts to Headers and Footers

Header Footer Code Manager has more than 200,000 installations and is regularly updated to keep pace with WordPress developments. This plugin lets you see exactly which snippets are loading on your site and where they’re being displayed and who loaded them. It also ensures that you don’t lose your header and footer code if you’re switching or changing themes.

Best for: Reducing header and footer complexity. The goal of this plugin is to integrate and simplify the functions of similar plugins into a single solution that lets you add, manage, and control headers and footers with confidence. It also allows you to add unlimited scripts to your headers and footers. If you’re only adding Google Analytics tracking code, try a simpler tool, such as Insert Headers and Footers.

4. Elementor – Header, Footer & Blocks Template: Best for Elementor Users

If you don’t have the coding experience to write custom CSS, then you can use a plugin like Elementor to customize your header and footer sections.

With this editor, you can create custom header and footer designs and choose where to display them. Want to display a custom header and footer only on your homepage? Or maybe just on the blog archive page? Or on the entire website? This plugin allows you to choose any target location. You can also use the plugin’s built-in widgets to create these header and footer layouts with required features, like a logo, title, tag line, page title, image, copyright notice, and search form.

Best for: Current Elementor users. As one of the most popular WordPress plugin and design platforms, Elementor offers a host of services to help streamline WordPress management. If you’re already using Elementor or plan to start, this plugin is a great choice.

5. My Header Footer: Best for Creating Fully Custom Headers and Footers

My Header Footer is a premium plugin designed to simplify the process of editing the WordPress header and footer sections. With this tool, you can remove your theme’s default header and footer and build your own from scratch, keep one and redesign the other, or edit both. You can also add dynamic fields to your header and footer, create fully responsive navigation menus, style the menus for different types of devices, and add custom CSS.

Best for: Creating custom headers and footers. My Header Footer tackles the biggest issue with WordPress headers and footers — that they’re difficult to edit using standard WordPress tools. This plugin is all about giving you the power to edit headers and footers on-demand and with full flexibility.

Customizing Your WordPress Header and Footer

You have multiple options for customizing your WordPress header and footer — each is suited for users with different levels of technical experience. While those with coding experience will have no trouble editing their theme files, those without coding experience can use a plugin. The result of either method is a website that’s customized from top to bottom to reflect your unique brand identity.

Editor's note: This post was originally published in October 2020 and has been updated for comprehensiveness.