Adding Code to A WordPress Header or Footer
For a wide variety of reasons, it’s possible that at some point you will want or need to add code to your WordPress site’s header or footer. Unfortunately, the platform doesn’t provide a simple or straightforward way to do this out of the box.
The good news is that you can easily remedy this with the help of a child theme and your functions.php file, or a WordPress plugin. Whichever method you choose, you’ll be able to easily enhance your site with custom features, user data, and performance-boosting strategies.
In this post, we’ll explain a few cases in which you might need or want to add code to your WordPress site’s header and footer. Then we’ll share step-by-step instructions for two methods that enable you to edit these elements to create a custom header or footer. Let’s get started!
The reasons you may want to edit your WordPress header or footer are many and varied. Probably the most obvious is that sometimes you want to style your site through the use of custom code, and need a way to add this code to your header and/or footer.
However, these are also prime locations for tracking codes, such as the one used for Google Analytics. These codes can provide valuable information on user behavior to enhance your marketing and content strategies.
Additionally, WordPress does not include meta tags by default. These are added to your site’s header to help search engines crawl your pages. Though they’re not as relevant now as they used to be, there’s no harm in adding them to your header – they can only help your site’s visibility.
Lastly, you may be familiar with the practice of moving render-blocking JavaScript ‘below the fold’. This typically means adding it to your WordPress footer, which will require editing its code. This technique can help improve your site’s performance by decreasing loading times.
There are two primary methods for adding code to your WordPress header or footer. The first is to manually edit your site’s theme, and the second is to use a plugin. Though manually editing your theme’s files is more risky and difficult, for some more advanced users it’s the preferred method.
Step 1: Create a Child Theme
Manually adding code to your WordPress header or footer involves editing some of your theme’s files. When you have to do this, it’s always wise to edit a child theme instead of messing with your parent theme’s files directly. This way, you can avoid losing your changes when you update your theme.
Fortunately, the process to create a child theme manually is pretty simple, and you can access the WordPress tutorials you’ll need to customize headers. However, if you need to create a child theme in a pinch, a theme builder plugin such as Child Theme Configurator can help.
With a theme builder plugin you can easily generate a child theme with the click of a button, although the fully manual approach could be just as quick once you have the method down.
Step 2: Edit Your Child Theme’s functions.php File
Once your child theme is set up, you’ll need to access and edit its functions.php file. Before you start, it’s always wise to back up your site, just in case you make any mistakes and want to easily restore to a previous state.
The usual way to edit your functions.php file is via File Transfer Protocol (FTP) and an FTP client such as FileZilla. However, you can also edit certain files from your WordPress dashboard. To access it, navigate to Appearance > Theme Editor.
You’ll receive a warning that you’re about to edit your theme’s files – click the I Understand button to proceed. Next you’ll want to make sure you have the correct file selected. In the sidebar to the right of the site editor, make sure Theme Functions (functions.php) is selected.
Now you can add your custom code at the end of this file, and click on Update File when you’re finished.
While in some cases it may be easier to manually edit your WordPress theme’s files to add code to your footer or header section, using a plugin is usually the safer route. For the purposes of this article, we’ll be using one of the most popular and highly rated plugins for the task, Header, Footer and Post Injections.
However, there are many plugins available in the WordPress Plugin Directory and elsewhere that can help with this task.
Step 1: Install and Activate Your Plugin of Choice
For starters, you’ll need to install and activate the plugin you wish to use. You can do this by downloading the plugin’s .zip file from the Plugin Directory or another online marketplace and then uploading it to your site. Alternatively, navigate to Plugins > Add New in your dashboard.
Here you can search for the footer or header plugin you wish to use. Whichever method you choose, you’ll finish this step by clicking on the Install button, then Activate when the option is presented.
Once the plugin is installed, you should be able to navigate to Settings > Header and Footer in your dashboard.
Here you’ll find a text editor for adding code snippets – such as a Google Analytics tracking code or custom JavaScript – you wish to include in your header and/or footer.
There’s a lot you can accomplish on this page. In the first two fields you can add code to your header section. The left-hand field adds the code to every page on your site – this is useful for Google Analytics, for example. The right-hand field will add the code only to your home page.
The next fields add code to the body and footer code of your pages. The fields on the left are for desktop viewing, while the ones on the right are for mobile versions of your code. Once you’re done editing, don’t forget to click on the Save button at the bottom of the screen.
Improve Your Site’s Experience With WP Engine
There’s no doubt you want your WordPress website to provide a top notch digital experience to your users. Adding code to your WordPress footer or header is a useful tactic for customizing your site, implementing Google Analytics, or improving performance.
At WP Engine, we have a wide variety of developer resources that can help you take your WordPress website’s experience to new heights. Check them out today!
