So, let’s begin!<\/p>\n
What Headers and Footers Contain<\/h2>\n
Most website headers will include a combination of some of the following:<\/p>\n
- \n
- Site title, site description and\/or logo<\/li>\n
- Navigation<\/li>\n
- Social media icons<\/li>\n
- Hero images<\/li>\n
- In some themes, a header widget area<\/li>\n<\/ul>\n
Likewise, your website\u2019s footer can be overlooked but can hold plenty of useful information. This is where you can put useful links and credibility boosters. Don\u2019t ignore footer content: a \u201cCopyright 2020\u201d notice in your footer makes you look like you haven\u2019t updated your site since then.<\/p>\n
Footers may contain:<\/p>\n
- \n
- Widget areas (\u201cFat footers\u201d have become popular in recent years)<\/li>\n
- Copyright information with the current year, or an older year to the current year<\/li>\n
- Credits e.g. \u201cProudly powered by WordPress\u201d<\/li>\n
- Links e.g. privacy policy, terms and conditions, sitemap, or custom menus.<\/li>\n
- Social media icons<\/li>\n
- Contact details<\/li>\n
- Email newsletter sign up forms<\/li>\n
- Website trust marks<\/a><\/li>\n
- A Back to Top link<\/li>\n<\/ul>\n
Sometimes it\u2019s 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.<\/p>\n
In other instances, it\u2019s quicker and easier to use a plugin to make a header or footer modification. In fact, it\u2019s surprising just how many header and footer enhancements plugin developers have thought of!<\/p>\n
The Difference Between <head> and <header><\/h2>\n
The header area is the top part of the page before the main content, after the
<body><\/code> tag. It may be marked up as<div id=\u201dheader\u201d><\/code> or with HTML5, the<header><\/code> tag.<\/p>\nThe
<head><\/code> element comes after the<html><\/code> tag and before the<body><\/code> tag. This holds information such as the page title, meta information, scripts and styles used on the page.<\/p>\nNone of this information in
<head><\/code> shows on the actual page as rendered, so strictly speaking it\u2019s not part of the header. But a number of plugins tagged as \u201cheader\u201d plugins actually target the<head><\/code> section.<\/p>\nWhat Plugins Can Add or Change in Headers and Footers<\/h2>\n
A lot, actually. When it comes to modifying headers and footers, plugins can:<\/p>\n
- \n
- Add notification bars, including messages, social media icons, and contact links<\/li>\n
- Include navigation enhancements e.g. mega menus (link) and menu icons<\/li>\n
- Add stickiness – fixing header elements to the top of the screen when you scroll<\/li>\n
- Provide custom headers (images)<\/li>\n
- Replace text or HTML code<\/li>\n
- Give you the ability to add mail signup forms<\/li>\n<\/ul>\n
And more.<\/p>\n
Header and Footer Plugins<\/h2>\n
That being said, let’s take a look at available Header and Footer plugins. Each of these falls into a category of its own (e.g advertising, footer credits, etc).<\/p>\n
Please note that these are NOT affiliates (we never have affiliate links), but good recommendations from us and others in the WordPress community.<\/p>\n
Advertising<\/h2>\n
Ad Inserter<\/h3><\/header>
![\"Ad](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/04\/Ad-Inserter-600-600x280.png\")
<\/section>Do you wish to monetize your site with ads? Try Ad Inserter<\/a>. It injects ads either before or after the\u00a0
header<\/code> tag or in your site\u2019s footer and many other locations.<\/p>\nIt supports a ton of various ads (e.g. Google AdSense, Infolinks, etc) and can automatically insert ads on posts or pages. If you’d like to step it up a notch, Ad Inserter Pro<\/a> plugin allows more precise ad placement, plus many other features.<\/p>\n
This 5-star rated plugin has over 200K active installs and is a safe bet for your ad inclusion.<\/p>\n
For additional options, check out other plugins which place ads<\/a>.<\/p>\n<\/section>
- A Back to Top link<\/li>\n<\/ul>\n