Learn easy and fast methods to add code in WordPress Header and Footer. I will explain how to add code to WordPress header and footer with or without using WordPress plugins.
I wrote a how-to guide for eliminating render-blocking JavaScript. That article involves adding a code snippet to WordPress footer. Many readers asked how they can paste the code snippet in WordPress footer before </body> tag. So I decided to write an exclusive article to address this issue. And to explain how you can easily add code in WordPress header and footer file.
Also, while designing your WordPress site, there are occasions when you need to use some code snippets (maybe the script for Google Analytics tracking) in WordPress header or footer.
Some WordPress themes by developers like GeneratePress, Astra, and ElegantThemes etc. come with the inbuilt feature to let you add code in WordPress Header and Footer from the theme control panel itself.
Though some themes offer this feature, still I would not recommend you to use theme control panel to add code in header and footer.
You might ask, why?
Because, if you are using a theme control panel, you don’t have the liberty of switching to another theme without losing the footer and header codes. So, basically, if you switch to another theme, you have to set up header and footer codes again.
But what about other themes which do not offer such features to add code in WordPress Header and Footer. If your WordPress theme or framework does not support such a feature. Then continue reading…
In the following paragraphs, I will take you through how you can easily solve this issue. First, let’s see what type of different codes or scripts you may need to add to WordPress header and footer.
☲ Table of Contents
You might want to add one or more types of codes in WordPress header and footer out of the followings.
- Google Analytics tracking code.
- Site Security Verification code.
- Webmaster Tools Verification Meta tags.
- Verification code for Bing, Alexa, Yandex, etc.
- Schema mark-ups.
- Any other script or code.
Do you know?
- How to add Subscribe to Comments in WordPress
- How to add Author Box in WordPress {with or without Plugin}
Generally speaking, there are two popular methods to Add Code in WordPress Header and Footer.
- Using WordPress Plugins: You can manage all header and footer codes from one place. Also, using a plugin to add code in WordPress header and footer is a better idea rather using a theme control panel. Because you can change your theme anytime without losing those header and footer codes.
- Without plugin method: (Manual Method – By Editing Theme Files) Though there is no plugin required. But here you don’t have the bliss of managing all codes from one place is a bit difficult, if you are new to editing/adding code to the theme files.
To Add Code to WordPress Header and Footer, you can use simple and efficient WordPress plugins.
General Plugins
These plugins work well with almost all free or paid WordPress themes.
I. Head, Footer and Post Injections
This plugin offers many options to insert code at different positions apart from header and footer. You can even insert code before/after each post and before/after each post excerpt etc.
This plugin adds only two sections. Out of which one can be used to add code to <head> section and the other one is for above </body> tag (i.e. footer).
2.1 Manual Method – by Editing Theme Files
This method involves editing header.php and footer.php files. Therefore, I recommend you to apply this method to the child theme files instead of the parent theme files. Moreover, if you add code to child theme files, your code remains untouched even if the parent theme gets an update.
I hope you’re already familiar with the child theme and using a child theme on your WordPress site.
If you are not using a child theme, read this Ultimate Guide for Child Theme in WordPress. This guide covers what is child theme in WordPress, why you MUST use a child theme, and how you can easily create and use a child theme.
(Implement this method, only if you’re aware and confident enough about what you are doing. Further, don’t forget to take a complete backup before implementing this method. So that you can restore your site, if something went wrong.)
- Go to WordPress Dashboard > Appearance > Editor.
- In the Editor Screen, open header.php or footer.php file by clicking it. (Depending on to which file you want to add a code.)
- Once the file is opened in the editor, you can add code in WordPress header and footer file.
- In the following example, I have opened footer.php file. You can paste your code just before
</body>tag. - Click Update File. And you’re done.
Note – If you are adding a PHP code, then you can directly use the code. But if you want to add a HTML or Script File, you may need to enclose that code inside the PHP tags.
2.2 Manual Method – by Editing functions.php File
This method utilizes WordPress functions called wp_head() and wp_footer(). You can easily add code to WordPress header and footer by applying this method.
You can write a simple function in functions.php file of your WordPress theme (using a child theme is always recommended). I am taking an example of adding DNS prefetches to the header. The code goes like this..
//* DNS Prefetching
function technumero_dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="preload" href="https://yourdomain.com">
<link rel="dns-prefetch" href="https://yourdomain.com">';
}
add_action('wp_head', 'technumero_dns_prefetch', 0);
Code explanation
- You created a function called
technumero_dns_prefetch. - Then you echoed the text you wish to add to the header of the website by placing that text between
' '. In this case the domain prefetch information of the domain. - Finally, you are calling this function at the desired location (which is header in this case) by using
wp_head. - The last digit ‘0’ is the priority.
Similarly, you can use wp_footer to add code to the WordPress footer.
Conclusion
Perhaps, freedom of customization is one of the major reasons for the humongous success of WordPress. These WordPress customizations require a lot of plugin usage or code insertion at various positions in WordPress.
Definitely, WP-Head and WP-Footer have their own importance when it comes to code insertion in WordPress.
Which method is suitable for you?
The honest answer to this question is that nobody knows better than you. However, I have already mentioned using a plugin gives the advantage of managing all codes from one place, you don’t need to edit theme files.
On the other side, if don’t want to install an additional plugin. If you are already using or can use a child theme and then you may apply the manual method.
Up to you.
I hope this guide helps you to add code in WordPress header and footer with or without plugins. Which other technique, or plugin do you use to add code in WordPress header and footer, feel free to share with our readers. Have a query about this subject, post it via the comment below. I will be happy to help.
Cheers!
You may also like:
Best WordPress Shared Hosting for PageSpeed – Compared
8 Quick Tips to Optimize WordPress Website for Mobile Users
How to Insert Tables in WordPress Easily
Why [& how] Use Web Safe Fonts over Web Fonts
Remove Google Fonts from WordPress Theme
Show or Hide Widgets on Specific Pages in WordPress
