Often you may be asked to add code snippets in the <header> and <footer> section of your WordPress website.
For instance, when trying to integrate your site to Google Analytics, Facebook Pixel, or Google Search Console, you’ll have to insert code to your WordPress site’s header and footer.
Inserting code in WordPress <header> or <footer>
By default, WordPress doesn’t provide you with an option to insert code snippets into your site’s header and footer.
Therefore, if you want to add the code you have to either:
- Add code to your WordPress header and footer with a plugin
- Manually add code to your WordPress header and footer by editing your theme’s functions.php file
How to add code to your WordPress header and footer with a plugin
This is the most recommended methods to add code since its beginner-friendly.
For this article, we’ll use the Head, Footer and Post Injections plugin to show how a plugin can help you add code to your WordPress website’s header and footer.
Head, Footer and Post Injections plugin
Go to Plugins on your WordPress dashboard and search for Head, Footer and Post Injections.
Install and activate the plugin.
Settings
Once you’ve activated the plugin, you can now add code by going to Settings and selecting Header and Footer in your WordPress dashboard.
There are several tabs, but we are interested in the header and footer tab. You’ll notice that there are several boxes under the header and footer tab.
To add any of the webmaster tools code to your site’s header, you have to paste the code into one of the boxes under the <HEAD> SECTION INJECTION area:
- Every page – This box adds the code snippet to the header of every single page on your site. You can add the Google Analytics tracking code to WordPress here.
- Only home page – This box only adds code to the header of your WordPress homepage.
To add code to your site’s footer, you can scroll down to the BEFORE THE </BODY> CLOSING TAG (FOOTER) and paste it into one of the options:
- Desktop – despite the name, this adds the code snippet to the footer section for all users, no matter their devices. To limit it to desktop ensure to specifically check the box for Mobile.
- Mobile – check this box if you want to add a different code snippet to the mobile responsive version of your WordPress site.
Add code to header and footer of Google AMP pages
The Head, Footer and Post Injections has an additional advantage that allows you to specifically add code snippets to the header and footer of the Google AMP versions of your pages.
Simply navigate and click on the AMP tab and paste your code snippet into the appropriate box:
A plugin lets you add code to your site’s header and footer easily and quickly. No worries about errors in case you edit your theme’s files. Also, the plugin will save your header and footer code in separate places, and so your code snippets will remain intact if you ever update or switch themes.
How to manually add code to WordPress header and footer
WordPress is built on PHP and if you are familiar with the PHP you can proceed to try to manually edit your theme’s functions.php file.
However, if you are not comfortable with editing PHP files, it is recommended that you stick with the plugin method.
While you can add code snippets directly to your header.php and footer.php files, a better way is to use your functions.php file and the appropriate WordPress hook.
This lets you keep all your snippets in one place and avoid modifying core theme files.
To add code to your header, use this code snippet:
/* Describe what the code snippet does so you can remember later on */ add_action('wp_head', 'your_function_name'); function your_function_name(){ ?> PASTE HEADER CODE HERE};
To add code to your footer, use this code snippet:
/* Describe what the code snippet does so you can remember later on */ add_action('wp_footer', 'your_function_name'); function your_function_name(){ ?> PASTE FOOTER CODE HERE};
Add it to your child theme’s functions.php file (make sure you use a child theme. If you don’t, your code will disappear the next time that you update your theme).
To do this, you can either use an FTP client or the inbuilt WordPress file editor.
When in doubt use a plugin like Code Snippets, which most people find to be a more convenient way to manage code.
Using this plugin also ensures that you won’t lose your duplicate page functionality if you ever switch WordPress themes in the future.
Navigate to plugins, select add new and search for it and install it.
Once you have the Code Snippets plugin activated, navigate to snippets, select add new and then proceed to paste the code. Give it a title and save changes.
We hope with this guide you can now comfortably Insert code into your WordPress header or footer.
If you are a beginner, we recommend that you use the plugin method if the manual method seems too technical or challenging.
