Adding Custom Code to Footer and Header of a Website in WordPress: A Complete Guide

Adding Custom Code to Footer and Header of a Website in WordPress: A Complete Guide

WordPress is a great tool to build your website. And at times, you’ll be adding codes to it to enhance its functionalities.

Most people, especially those not familiar with coding, find it uneasy to add the codes. That because there’s a risk of completely messing up your website if added to a wrong place. Even a typo error can bring down a website.

In this article, learn how you can add custom code to the footer and header of your WordPress website manually.

Step-by-step Process

Here are the steps you need to follow to add the codes manually:
  • Log in to your WordPress admin panel using the credentials
  • Navigate into Appearance >> Editor. Here, you’re going to find the CSS file your website is currently using
  • From here, you need to find the “Theme Header” from the vertical navigation menu on the right-hand side
  • Once you open the file, you’ll see numerous lines of code. In most cases, you’d have to add the <meta> tag or the <head> tag. So depending on where you’re required to place the codes, add the custom code accordingly
  • After you’ve finished adding the code, click on “Update File” button. This would save the changes you’ve made
Add Code to Theme Footer

For best performance, it’s recommended that you add the code to the footer section. This would allow for faster page loading.

Here are the steps involved in adding code to the theme footer:
  • Once again, you need to open the Appearance >> Editor of your website
  • From the right-hand side navigation panel, locate “Theme Footer” and open it
  • The code will of this file will vary depending on how your website is structured. So as per the instructions, add the code to the relevant section
  • Click on the “Update File” button once you’re finished

Use a Plugin to Add Codes

There’s a plugin for everything. And there’s a plugin for adding the codes as well. It’s usually the preferred option for people who don’t want to deal with the coding.

There are many plugins available. For this article, we’ll be using the “Insert Headers and Footers plugin.”

So go into the plugin directory and install the plugin. Once installed, follow the steps mentioned below:
  • Navigate into Settings >> Insert Header and Footers
  • You’ll be presented with two boxes that reads “Scripts in Header” and “Scripts in Footer
  • Add in the respective codes and click “Save
You’ve added the custom codes to the header and footer without even opening the respective files.

So that’s how you add codes to header and footer both manually and using a plugin. In case of further assistance, contact the support team.
Author
kumkumsharma
Views
2,345
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from kumkumsharma

Top