How to Add Code to Your WordPress Header and Footer

Many tools and tracking scripts require you to add specific codes to the header and footer areas of your website. This greatly increases the likelihood that at some point you will need to edit these items. Fortunately, there are several simple ways to achieve this.

In this article, we will show you how to add header and footer code in WordPress using plugins or manually. To change these items, simply choose which of the two ways suits you better.

How to Add Code to Your WordPress Header and Footer Using a Plugin

For most users, The easiest way to add code to the header and footer area of ​​a website is to use a plugin.. The advantage of using a plugin for this purpose is, code remains even if you change your theme. In addition to these, a plugin doesn’t require you to review the code and the structure of WordPress files.

There are several plugins you can use for this purpose.. In this article we will use Head, Footer and Post Injections plugin which is free. You can install it to follow the next steps or choose another one if you want.

After installing and activating your plugin, Go to Settings > Header & Footer in your admin panel. You will see the plugin interface and from there all you have to do is Select the Header and Footer tab.

To add code to the header of your website, you need to enter the code in one of the fields. PAGE SECTION under INJECTION. Depending on which area you use, The code you enter will appear either in the header of each page or only in the header of the main page..

you will most likely be adding code to the first field to have it in the header of each page. For example, if you want to add a Google Analytics tagall you have to do enter the appropriate code EVERY PAGE domain and save the change.

To add code to your website footeryou have to scroll down most IN FRONT OF THE CLOSING LABEL (FOOTER) episode. It also includes two fields, but they are slightly different from what we have for the header.

As you can see in the picture above, two available fields Desktop and Mobile.

Regardless of the device users have, if you want your code to be in the footer, you should add the code to the Desktop field and leave the Mobile field unchecked. However, If you need the code for the mobile version of your website to be different, you can select the Mobile option. and enter the appropriate code in each field.

When you’re done, Don’t forget to click the save button at the bottom of the screen.

Manually Adding Code to Your WordPress Header and Footer

To add header and footer code manually in WordPress, You need to have some basic knowledge about PHP. Otherwise, we recommend using the add-on method described above. With the manual method, you can add code directly to the header and footer areas of your website. This is done through most header.php and footer.php via files or functions.php file The theme of your choice

If you’re going to add code to your header and footer manually, you should use a child theme by doing so. In this way, changes are not lost When your WordPress theme is updated.

On all Qode themes free kids themes you can download along with the main, parent theme that will be used to make changes. In case you want to create a new child theme, you can: in just a few steps.

Once you have your child theme ready, choose whether to enter the code directly in the header and footer through header.php and footer.php Folders or do it via functions.php file child theme. We recommend that you use functions.php your child theme’s file to add its code to. This will allow you keep all the code in one place. Also, you don’t need to change core WordPress files.

For starters, we’ll take a look code snippets examples You can use it to add header and footer code in WordPress.

To add code to your headeryou can use this code snippet example:

/* Make description for code snippet */
function your_custom_function_name(){
?>
PASTE HEADER CODE WHICH YOU WANT TO ADD HERE
<?php
};
add_action('wp_head', 'your_custom_function_name');

And to add code to your footeryou can use this code snippet example:

/* Make description for code snippet */
function your_custom_function_name(){
?>
PASTE FOOTER CODE WHICH YOU WANT TO ADD HERE
<?php
};
add_action('wp_footer', 'your_custom_function_name');

Please note that these snippets do not represent functional code. and that you need to adapt them by adding the appropriate information. Enter a short description of the code in the comment field to help you remember its purpose later. replace the placeholder for the function name with . real name of your custom function in both places. And add your code in the marked field text in all capital letters.

When your code snippets are ready, functions.php file of your child theme. The easiest way to access this file is from Appearance > Theme Editor. in the admin panel. Open it and then enter the code snippet you prepared.

The code we use in this example is the same as the code we used to describe the plugin method, namely the Google Analytics tag. As you can see from the screenshot above, we used a customized code snippet for the header The same principle applies to adding code to the footer.

If the Theme Editor option is not active when you try to open it, you can also access the functions.php file using FTP. In this case, do not forget to save the changes to the file after entering the code.

final thoughts

Adding header and footer code to WordPress is becoming an increasingly popular practice. It is a convenient way to customize your website, implement Google Analytics or improve performance.

If you decide to add code to your site, we recommend using a plugin as it is the simplest method. Especially if you’re not entirely sure about trying to manually add code to the header and footer. Plugins are suitable for users of all knowledge levels and provide you with all necessary functionality. However, if you choose to use the manual method, it will give you more freedom to add code to the header and footer. But keep in mind that it still requires a bit more knowledge and is intended for more experienced users.