How To Add Custom Code In WordPress Header And Footer Area
February 14th, 2017 | by Ravi Chahar || 7 Comments |
Whether you install Google Analytics or embed any code of Google AdSense, you would need to add the code in the header or in the footer area.
Just a few days back, I read a Facebook update where someone was asking the same question.
Do you know how to add custom code in WordPress header and footer? Well, to run a WordPress website, you must know about such things.
In this tutorial, you will learn two methods. The plugin method for those who are afraid of codes and the coding method for tech savvy people.
Use A Plugin To Add The Code In Both Header And Footer.
In this blogging era, people are sharing their ideas, their knowledge and trying to build their online business.
But only a few of them know about WordPress properly.
For all the non-techie bloggers, I have a solution.
Just follow the steps.
Step 1:- Install and activate the Insert Header and Footers plugin.
Step 2:- To use the plugin settings, go to Settings>>Insert Header and Footers from your WordPress dashboard.
You will see two boxes. The upper one is to head the code in the header area.
You would get a notice to add the code in the <head> section of your website. Well, that’s it. Use the upper box to paste the custom code you copy from Google AdSense or anywhere else.
And if you want to install Google Analytics then use the footer box.
It’s always good to add the scripts in the footer area so that your website speed can be improved.
You should also know how to move JavaScript to the footer of your website?
Save the settings and you’re good to go. No coding, no fear, just a simple use of a plugin.
Add Custom Code In WordPress Header And Footer Without Any plugin.
If you’re tech savvy person then you can easily follow this guide.
Do you know about WordPress theme file structure? Well, there are two files header.php and footer.php.
One is for the header and another is for the footer area of your website.
To embed the code, you have to use these two files.
Adding Code In The Header Area.
If you want the specific code in the <head> tag then you have to edit the header.php file.
Go to Appearance>>Editor>>header.php file.
If you’re familiar with the cPanel of your web hosting then you can access the file from there. Just go to cPanel>>file manager>>wp-content>>themes>>theme name>>header.php.
You can easily notice the <head> tag and its ending tag too.
Place your <meta> tag or the script in between the header tag and save the file.
You have successfully added your custom code in the WordPress header.
Adding Code In The Footer Area.
Just like the header area, you can add any custom code in the footer of your WordPress website.
Go to Appearance>>editor>>footer.php.
Just like above, you can also use the cPanel.
There will a <footer> tag having some codes depending on the theme you’re using.
Place your custom code and save the file.
Before you add the add, you should know how to add custom code in WordPress properly.
Many people make some silly mistakes which break their websites. You wouldn’t want that. So always backup your WordPress theme before touching the codes.
If you’re afraid of the codes then it’s always recommended to use the plugin.
To reduce the number of plugins, you can’t risk your website. But if you’re aware of the WordPress codes then nothing is better than the manual method.
Can You Now Add Your Codes In The Header And Footer of Your Websites?
For beginners, such types of things can be a headache.
Adding the <meta> tag code and any other script is normal and many affiliate marketers use it.
To enable the monitoring of your website, many tools can only run if you add their scripts or any other code anywhere in your website.
Would you choose the plugin method or do it manually using codes?
I hope now you can add custom code in WordPress header and footer. If you face any problem, feel free to contact us.
You can also connect with us on Twitter, LinkedIn, and Facebook.
Hey Ravi..
Thanks, it’s really very informative. Sometime we have to confirm our domain for some reasons and have to add the meta data in the header section which is very hard to code manually this tutorial make that problem solved now ?
Hi Junaid,
It happens all the time. The second you try something new, you need a guide to make you learn about these simple tweaks.
Thanks for stopping by.
~Ravi
Hey Ravi,
There may be occasions when you need to customize your WordPress website and the only option is to edit the underlying code of the theme which you are using. This plugin is really sounds effective for us to use interface for adding code to the header and footer sections of your WordPress website in simple manner.
You guidelines makes surely able for people to customize website with confidence and add additional code snippets as needed. Eventually, thanks for sharing your wonderful experience with us.
With best regards,
Amar kumar
HI Ravi,
Thanks for telling us about this plugin and showing us how to use it. It’s definitely an easier alternative instead of going into the CSS to mess with codes – that can be nerve wrecking for someone who is unfamiliar with codes.
I really liked how you included screenshots with your detailed descriptions – easy even for a beginner to follow along.
Thanks for sharing this!
Cori
Hey Cori,
Most of the people fret when dealing with the codes. Either it’s about adding the Google Analytics code or the AdSense, it becomes brainstorming.
The plugin mentioned above can help you without any techie knowledge.
Thanks for your wonderful comment.
~Ravi
Hi Ravi thanks for the info. I knew that if I had any questions that I could contact you. I read, followed the instructions and have what I was looking for. Thank you again
Hey Ava,
Happy to help.:)
If you ever need any kind of help, you can directly use the contact form available here. It will directly send an email to me.
Thanks for stopping by.
~Ravi