The WordPress platform does a great job to help those without coding experience to implement just about any type of functionality. However, in some cases you’ll need to add header and footer code in WordPress to help third-party services embed its own functionality.
The most typical use case for this is to integrate Google Analytics into your site. However, there are plenty of other reasons you’ll want to do this – you may already know why you want to carry this task out.
For this tutorial, we’re going to show you a couple of ways to add header and footer code in WordPress. First though, we’re going to take a look at the sorts of reasons you’d want to do this in the first place.
What You Can Achieve With Extra Code in the Header and Footer of Your Site
A standard website will break down into a few different components, much like a text document:
- Header. Your site’s header contains a number of ‘pre-loading’ elements, and details about your Secure Sockets Layer (SSL) certificate, encryption, any JavaScript, and more.
- Footer. This operates in a similar way to your header, but instead ends up at the bottom of the page.
- Body. Most of the functionality you implement on your site will be within the ‘body’ of your content. This is the primary focus of almost everything within the WordPress dashboard, and the body represents what you see on the page.
Servers will load pages in a linear way – the head, body, then footer. This means the code in the header will load first, but footer code will load after everything else.
Everyday Code Snippet Use Cases
Social media and Search Engine Optimization (SEO) tools will often need you to add header code in WordPress. This is because those services have to take some priority when a site loads in order to log everything that comes after it.
It’s a similar situation with CSS code, because this dictates how your site will look. If this was in the footer, you’d see an array of layout changes before you see the styling.
While JavaScript helps us to produce, view, and interact with modern websites, it isn’t a necessary component (in a technical sense.) As such, JavaScript in the footer will give you greater performance in many cases, and if you have that option, you should go with it.
In fact, there are many more use cases, and we cover them in more detail in another article on the WPKube blog. However, in a typical WordPress situation, you don’t have access to the header and footer elements of your site. To do this, you’ll need to either get your hands dirty, or call on outside help.
How to Add Header and Footer Code in WordPress (2 Ways)
Over the rest of the article, we’re going to cover two ways to add header and footer code in WordPress. Both are simple, but we prefer one over the other:
- You can use a plugin to help you add the code to the right areas of your site.
- You’re
[…]
This article was written by Tom Rankin and originally published on WPKube.