A good website is like a good book. You might pick up a book because you’re immediately drawn to its cover. Likely you’ll then flip to the back cover to find important information, like a summary of the book, testimonials from other authors, the 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.

Grow Your Business With HubSpot's Tools for WordPress Websites

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 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" 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:

default header of WordPress Classic Theme

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.

  1. You can manually edit your style.css stylesheet or your theme’s header.php and footer.php files.
  2. You can use your theme’s built-in header and footer code modules, if your theme has them.
  3. 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. Consider that a small mistake can break your site.

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 options so you can select the tool that fits your budget and site’s needs.

Insert 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.

Settings tab of Insert Headers and Footers plugin

Image Source

Head, Footer and Post Injections

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.

Code snippets for Header, Footer and Post Injections plugin

Image Source

Header and Footer Scripts

With Header and Footer Scripts, you can not only insert code in the header and footer section of your site — you can also insert code in the header of any page or post, including custom post types. This will allow you to insert Google Analytics into your site, verify your site in Google Webmaster tools, add Google Fonts to your site, add CSS to your website header, and add CSS or JavaScript to a post or page’s header.

Insert script to <head> box in WordPress post editor

Image Source

Elementor – Header, Footer & Blocks Template

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.

Elementor editor's header and footer blocks

Image Source

My Header Footer

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 and style them for different types of devices, and add custom CSS.

Editing main header with My Header Footer

Image Source

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: a website that’s customized from top to bottom to reflect your unique brand identity.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Oct 5, 2020 7:00:00 AM, updated October 05 2020

Topics:

WordPress Website