How to Insert Code in Header and Footer Sections in WordPress?

WordPress assembles multiple PHP template files to present readable content to users in the browser. A WordPress theme contains header.php, footer.php, single.php (for posts), page.php (for pages) and sidebar.php files and the latest themes use additional template parts for generating main content. When you view a WordPress page in browser, all these templates are assembled neatly and displayed. In general, you do not need to modify these files and there are plugins available to insert custom features. However, there are certain situations you need to insert code in header and footer sections in WordPress. In this article, we will explain how to do that without plugin and using a plugin.

Why to Insert Code in Header or Footer?

The header and footer sections can come in handy for various code integrations and for adding extra functionalities to your site. Below are some of the best examples that require you to insert code in header and footer in WordPress site.

• Insert Auto Ads code from Google AdSense or header bidding ad code from any other advertisement program.
• Install Google Analytics and Facebook Pixel tracking codes.
• Insert verification codes from Bing Webmaster Tools, Google Search Console, Baidu, Yandex and from any other platforms like Pinterest.
• Add custom CSS in the header like Google Fonts stylesheets and JavaScript in the footer.
• Insert custom components like breadcrumbs in the header when using plugins like Yoast SEO.

As you see, the list will go longer depending upon your need.

Add Code in Header and Footer Sections in WordPress

By default, WordPress does not offer any options for inserting code in your header and footer section. The easy option is to directly edit the files and insert your code. However, there are also plugins available for this purpose. In this article, we will explain both ways of adding codes in the header and footer sections of any WordPress site.

• Manually editing the header.php and footer.php files of a WordPress theme.
• Use Insert Headers and Footers plugin for adding codes without file editing.

In addition, we will also explain using some themes to insert code in header and footer using wp_head and wp_footer hooks.

Insert WordPress Header & Footer Codes Manually

This option requires editing the header.php or footer.php files in your WordPress site themes and probably isn’t beginner’s friendly.

• First, start with preparing the code snippets or copy from the third-party site. As your header and footer code are ready, hover to the “Appearance” menu in your site dashboard and click on the “Theme Editor” tab.
• Ignore any warning message you receive and choose your active theme from “Select the theme to edit:” dropdown.
• Select the “header.php” or “footer.php” file at the right-hand side of the current view.
• For the header, ensure you paste codes below the closing “</head>” tag and then that of the footer should be before the end of the “</footer>” tag. Sometimes, you may need to insert the code before the closing </body> tag also.
• Lastly, click on the “Update File” button to save changes to your site with the added code snippets.

Make sure to test your site and check the feature you have inserted is working as expected.

Insert WordPress Header & Footer Codes Using Plugin

WordPress by default allows you to add custom CSS to your site under “Appearance > Customize > Additional CSS” section. However, you can’t insert JavaScript in that section. There are many free and plugins available for inserting code and here we will explain with “Insert Headers and Footers by WPBeginner”. The plugin has super simple interface which beginners can use without hassle.

• Firstly, install and activate the “Insert Headers and Footers” plugin. Through your WordPress site dashboard, hover on the “Plugins” menu and click the “Add New”.
• Use the search plugins feature to look up “Insert Headers and Footers” and click on the “Install Now” button. Once the installation process is over, “Activate” the plugin.

• Head over to “Settings” menu, locate and click on the “Insert Headers and Footers” submenu.
• The plugin offers three boxes for placing scripts in the header, body and footer to insert your codes. Before this, third-party providers like Google Analytics would direct you on which box to place their code snippets. Otherwise, make sure to understand the exact position you want to insert the code.
• Paste those codes inside the appropriate one and click “Save” to complete your site changes.
• The code scripts are now automatically loaded to their specific positions for the site functioning.

You can always edit the codes further anytime and keep the plugin active because its deactivation would lead to the inability to add custom functionalities and disable all previously added scripts to your site.

Note that if by chance the “Insert Headers and Footers” plugin was mistakenly deactivated or uninstalled, your codes would remain saved on your site database. Just reinstall or reactivate the plugin to enable the earlier codes to start working. Furthermore, it is advisable to clear the cache of your WordPress site anytime you add and save changes for the header and footer code snippets in the plugin.

Using Themes to Edit Headers and Footers

Whether you manually edit theme files or use the plugin, the codes you insert will affect the entire site. You need to use plugins like Insert HTML Snippet or try Custom HTML block in Gutenberg editor to insert custom code only in a specific post or page. However, there are latest themes like GeneratePress Premium and Astra Pro that you can use to insert code in header and footer. These themes use the standard wp_head and wp_footer hooks and allow to apply custom restrictions. For example, you can insert breadcrumb only in single posts without affecting pages.

Here we will explain with Astra Pro theme, and you can follow similar steps in GeneratePress Premium theme with “Elements” option.

• After installing Astra Pro add-on plugin, go to “Appearance > Astra Options”.
• Activate “Custom Layout” options and click on the “Settings” link against the option.
• Click on “Add New” button and paste you code that you want to insert in the box.
• Under “Custom Layout Settings” section, click on “Layout” dropdown and choose “Hooks” option.

• Under “Action” dropdown, select wp_head for header and wp_footer for footer section.
• Leave “Priority” blank if you are using only one code snippet. However, when you have multiple code inserted in the same hook position, make sure to setup the priority to insert the code in the sequence. You can use 10, 20, 30 and so on for priority and the lowest will precede others.
• Provide top and bottom spacing details in pixels if needed.
• Choose where you want to display the code under “Display On” dropdown. You can select specific post, page, taxonomy or insert in entire site or insert on specific post types like posts, pages or any custom post types used in your site.
• Select the user role that you want the code to be active under “User Roles” dropdown.

After making all settings, click “Publish” button to make your changes live.

Reasons to Use Insert Headers & Footers Plugin

There are many disadvantages of editing theme’s files or using custom theme for which you would stick to the plugin method. Here are some of the benefits you will be getting by using the plugin apart from the fact you might not be that technical or perhaps you are a beginner.

• You don’t need to worry about code erasing during an upgrade, update or change of your themes since the plugin store added scripts in a separate place. You also do not need child theme as the plugin works independent of your site’s theme.
• It makes adding custom codes in the header and footer easily and quickly. Also, this helps to maintain the organization of code snippets in single place.
• There are likely errors to encounter in choosing to edit your WordPress theme, so using plugin assists in waving, preventing and avoiding such.

Final Thoughts

There are many situations you need to change the appearance, alter the way or add additional functionalities to your WordPress site. Whichever the case it is, remember to use the plugin method for inserting header and footer code when you aren’t technically inclined. Though themes like Astra and GeneratePress can help you with this, you need to purchase premium version. In addition, it will make changing your theme difficult and you need to look for using a plugin at that point.