18 Plugins To Customize the Header And Footer Of Your Site

The header of your site is the first thing that your visitors see, so it’s important to create a good impression. An eye-catching header will encourage people to explore further.

Most website headers will include a combination of some of the following:

  • Site title, site description and/or logo
  • Navigation
  • Social media icons
  • Hero images
  • In some themes, a header widget area

Likewise, your website’s footer can be overlooked but can hold plenty of useful information. This is where you can put useful links and credibility boosters. Don’t ignore footer content: a “Copyright 2016” notice in your footer makes you look like you haven’t updated your site since then.

Footers may contain:

  • Widget areas (“Fat footers” have become popular in recent years)
  • Copyright information with the current year, or an older year to the current year
  • Credits e.g. “Proudly powered by WordPress”
  • Links e.g. privacy policy, terms and conditions, sitemap or custom menus.
  • Social media icons
  • Contact details
  • Email newsletter sign up forms
  • Website trust marks
  • A Back to Top link

Sometimes it’s better to use custom code to make a header or footer change. If you are adding a header widget area to a child theme, it needs to be compatible with your theme layout.

In other instances, it’s quicker and easier to use a plugin to make a header or footer modification. In fact, it’s surprising just how many header and footer enhancements plugin developers have thought of!

The difference between <head> and <header>

The header area is the top part of the page before the main content, after the <body> tag. It may be marked up as <div id=”header”> or with HTML5, the <header> tag.

The <head> element comes after the <html> tag and before the <body> tag. This holds information such as the page title, meta information, scripts and styles used on the page.

None of this information in <head> shows on the actual page as rendered, so strictly speaking it’s not part of the header. But a number of plugins tagged as “header” plugins actually target the <head> section.

What can plugins add or change in headers and footers?

  • Notification bars, including messages, social media icons and contact links
  • Navigation enhancements e.g. mega menus (link) and menu icons
  • Stickiness – fixing header elements to the top of the screen when you scroll
  • Custom headers (images)
  • Replacement text or HTML code
  • Email signup forms

Header and footer plugins

In compiling this list, I was looking for plugins which:

  • Would not require a specific theme or plugin to work.
  • Work out of the box i.e. didn’t require modifying theme template files.

For testing, I used BasePress theme.

BasePress theme showing header and footer

With minimal configuration, the header contains:

  • Site title
  • Site description
  • Navigation

The footer shows the copyright notice, year and a link to the theme developer.

Optionally, this theme can include up to 4 footer widgets.

Advertising

  • Ad Inserter

    Active installs: 100,000+

    Do you wish to monetize your site with ads? Try Ad Inserter. It injects ads either before or after the header tag or in your site’s footer, and in many other locations as well.

    Ad Inserter Pro plugin allows more precise ad placement, plus many other features.

    Some of the following plugins also let you add advertising code or check out other plugins which place ads.

Countdown timer

  • YITH Topbar Countdown

    Active installs: 1,000+

    Creating a sense of urgency can be an effective marketing strategy, particularly in the ecommerce space, where stock may be scarce or a holiday imminent.

    YITH Topbar Countdown encourages buying or sign-ups by highlighting limited time sales or promotions, or the time until an event. You can customize the bar to match your brand colours and typeface.

    A top bar with a countdown to a sale
    A top bar with a countdown to a sale

    Tip: Enter the “Countdown to” date in mm/dd/yyyy format. If you use the date picker, the timer won’t count down properly.

    Interested in YITH Topbar Countdown?

Footer credits

  • Remove Footer Credit

    Active installs: 30,000+

    Tired of “Proudly powered by WordPress” or similar? Ditch credits completely with this plugin, or replace them with text or HTML of your choice.

    BasePress' original footer credit has been removed and replaced
    BasePress’ original footer credit has been removed and replaced

    It might take trial and error to find the right code to remove. For BasePress I needed to enter the footer credit and link, but not the surrounding

    tags.

    Interested in Remove Footer Credit?

Header and footer code

  • Simple Header Footer HTML

    Active installs: 4,000+

    This plugin does exactly what it says on the tin, allowing you to add HTML snippets to the header or footer, or scripts in the <head> or below the <footer>tag. Scripts could include analytics code or custom Javascript.

    Interested in Simple Header Footer HTML?

  • Head, Footer and Post Injections

    Active installs: 100,000+

    Very similar to the previous plugin but has more features:

    • Add code before, after and within posts
    • Add code before and after pages
    • Use PHP, JavaScript and shortcodes

    Interested in Head, Footer and Post Injections?

  • SOGO Add Script to Individual Pages Header Footer

    Active installs: 20,000+

    Another plugin to add content to the header and footer, but with conditional logic, so the content can show only on the post type you specify, or on individual posts/pages.

    This is useful if you need a script on one page, but don’t want it loading on every page, which could potentially slow your site down.

    Interested in SOGO Add Script to Individual Pages Header Footer?

  • Ultimate Branding

    WPMU DEV’s Ultimate Branding – free to members – uses a visual editor for adding global header and footer content.

    A centre aligned header logo added with Ultimate Branding

    Aside from altering the header and footer, Ultimate Branding has many more features, including the option to customize your admin dashboard layout and colour scheme, plus your site’s login page.

    Interested in Ultimate Branding?

Header images

  • Unique Headers

    Active installs: 20,000+

    Well-chosen images can add extra visual appeal to your header area.

    Unique Headers shows different header images on different pages, depending on your configuration and theme support.

    Your theme must use WordPress custom headers to use this plugin. BasePress does have this feature; custom headers are shown on the home page and archive pages.

    You can adjust the header image on posts, pages, category and tag archives (BasePress only shows headers on the latter two).

    The custom header on a category archive page can be different from that on other pages
    The custom header on a category archive page can be different from that on other pages

    Unique Headers does not crop images to fit your theme, so make sure that you upload the correct image size to avoid stretching – 1600 x 640 px in my theme’s case. Check the header size of your theme in the Customizer.

    Interested in Unique Headers?

Menu modification

  • Menu Icons by Themeisle

    Active installs: 100,000+

    Menu icons can enhance usability if partnered with appropriate navigation labels.

    This plugin adds icon sets including Dashicons, Font Awesome and Genericons. SVG and custom images are also supported.

    Navigation with a mix of Genericons and Font Awesome icons
    Navigation with a mix of Genericons and Font Awesome icons

    You might need to add some custom CSS to change the menu display. I needed this to stop my menu spilling over onto a second line.

    Interested in Menu Icons by Themeisle?

  • Add Search to Menu

    Active installs: 9,000+

    For larger, content-heavy sites especially, it’s useful to have a search facility in the header. Adding the search to the navigation makes sense, as the top right is where many users would expect to find it.

    This plugin appends a search icon or box to the menu of your choice. You can choose the style of search display and to show or hide it on mobile devices.

    Search in menu, dropdown style
    Search in menu, dropdown style

    Interested in Add Search to Menu?

  • If Menu

    Active installs: 30,000+

    Sometimes you have navigation items you only want to show to certain users. If Menu shows menu items conditionally – for example, if the user has a particular role, is viewing a post, or is on a mobile device.

  • Max Mega Menu

    Active installs: 200,000+

    Install Max Mega Menu to build a stylish mega menu, or simply use it to alter the style of your header navigation.

    For more on how to use this plugin, read How to Add a Stunning Mega Menu to Your WordPress Site.

    Interested in Max Mega Menu?

Notification bars

  • Speed Contact Bar

    Active installs: 10,000+

    Best used in the header, Speed Contact Bar is ideal when you want visitors to get in touch fast – for example, if you run a service business.

    The bar stands out well, the phone number is configured to dial directly if you’re on a mobile, and it comes with many design options.

    Speed Contact Bar in the header
    Speed Contact Bar in the header

     

    Interested in Speed Contact Bar?

  • 8 Degree Notification Bar

    Active installs: 4,000+

    Notification bars can alert visitors to offers, contact information, social media links and other points of interest. This bar can show in either the header or footer.

    Footer notification bar with social icons and message
    Footer notification bar with social icons and message

    The premium upgrade ($17) permits multiple bars, conditional displays, tweets and more.

    Interested in 8 Degree Notification Bar?

Ribbons and banners

  • Show Support Ribbon

    Active installs: 400+

    Do you have a cause to highlight? This plugin adds a banner, ribbon or button to your header, which can link anywhere. It will show on the top right corner of the page by default but can be moved to any corner and styled to match your branding.

    Support Ribbon example
    Support Ribbon example

    Interested in Show Support Ribbon?

Sticky headers

  • Sticky Menu (or Anything! On Scroll)

    Active installs: 50,000+

    There is evidence that sticky navigation is preferable to users on sites with a specific call to action, long-form content and to young and old audiences.

    Not all themes support this feature, but Sticky Menu plugin is an easy solution to keep your header bar always on top when you scroll. Use your browser inspector to find the relevant section to stick.

    Sticky navigation (header#masthead) on BasePress

     

    Interested in Sticky Menu (or Anything! On Scroll)?

Summing up

As you’ve seen, the header and footer can be prime real estate on your website.

While you don’t want to overload them with content, well-chosen header and footer features can make it easier:

  • For visitors to contact you
  • To grow your email list
  • Monetize your site
  • Improve user experience
  • Brand your site more successfully
Claire Brotherton
What have you used to enhance your header and footer? What effect did it have?