WPBeginner - WordPress Tutorials for Beginners

Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Header and Footer Code in WordPress (the Easy Way)

Last updated on by Editorial Staff | Reader DisclosureDisclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Shares 458 Share Facebook Messenger WhatsApp

Have you ever been asked to add some code snippets to the <header> or <footer> section of your WordPress website?

Often you are asked to add header and footer code in WordPress when trying to integrate with web services like Google Analytics, Facebook Pixel, Google Search Console, etc.

You may also come across WordPress tutorials that might ask you to add some custom CSS or JavaScript code to your WordPress header or footer.

By default, WordPress doesn’t provide an option to insert code in your website’s header and footer. Luckily there is an easy solution for beginners.

In this article, we will show you how to easily add header and footer code in WordPress. The goal is to safely add the code without directly editing your WordPress theme files.

How to Add Header and Footer Code in WordPress

The Best Way to Add WordPress Header and Footer Code

If you want to add WordPress header and footer code, there are three possible solutions:

  1. Manually, by editing your theme’s header.php and footer.php files
  2. With your theme’s built-in header and footer code feature
  3. Using a plugin

The first option is not beginner friendly because it requires you to add header and footer code by directly editing the header.php and footer.php files manually.

Another disadvantage of using this method is that your code will be removed if you install an update to your theme.

The second option is using your theme’s built-in feature. Some WordPress themes like Elegant Themes and Genesis Framework by StudioPress offer a built-in option for quickly adding code and scripts to your WordPress header and footer.

If you are using a theme with a built-in feature, then it seems like a safe and simple solution. However, if you change your theme, then all the code snippets added to your website will be gone. This includes site verification in Google Search Console, website analytics via Google Analytics, etc.

This is why we always recommend users to use the third option, a headers and footers plugin. This option is by far the easiest and safest method to add header and footer code in WordPress.

After a lot of requests from readers, our team has built WPCode, a 100% free code snippet plugin.

WPCode WordPress plugin

With WPCode, you can easily add code to the header and footer in WordPress.

Here are some benefits of using the WPCode plugin:

1. Easy, Fast, and Organized: It lets you add codes to your site’s header and footer easily and quickly. Plus, it keeps you organized by allowing you to store all your footer and header codes in one place.

2. Prevents Errors: The smart code snippet validation helps prevent errors that may occur if you edit your theme files manually.

3. Upgrade or Change Your Theme Without Worry: The plugin will save your header and footer code in a separate place, so you can update or change your theme without worrying about the code being erased.

Aside from header and footer scripts, you can also use WPCode to easily insert custom PHP, JavaScript, CSS, HTML, and text code snippets without editing your theme files.

Plus, WPCode has a built-in snippets library where you can find all of the most popular WordPress code snippets. This allows you to quickly remove WordPress features that you don’t want like REST API, XML-RPC, automatic updates, comments, and more.

Note: If you want advanced features like a private cloud snippet library, conversion pixels, 1-click snippet installs, code revisions, and more, you can upgrade to WPCode Pro.

For more details, read our guide on how to easily add custom code in WordPress.

With that said, let’s see how to easily add header and footer code in WordPress using the WPCode plugin.

Video Tutorial

Subscribe to WPBeginner

If you don’t want to watch the video tutorial, then you can continue reading the text version below:

Adding Code to Header and Footer in WordPress

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once the plugin is activated, go to Code Snippets » Header & Footer from your WordPress admin panel. After that, you will see a ‘Header’ box where you can add your code.

Add code to header and footer with WPCode

If you scroll down, you’ll also see a ‘Body’ and a ‘Footer’ box.

Header and footer script boxes WPCode

Simply paste the code into one of the three boxes. Once you’re done, don’t forget to click the ‘Save Changes’ button to store your settings.

The plugin will now automatically load the code in the respective locations on your WordPress site.

You can always edit and remove any code that you don’t want to keep.

You’ll need to keep the plugin installed and activated at all times. Deactivating the plugin will stop adding all custom code to your site.

If you accidentally deactivate the plugin, the code will still be safely stored in your WordPress database. You can simply reinstall or reactivate the plugin, and the code will start appearing again.

Note: You may have to clear your WordPress cache after saving changes, so the code properly appears on the front-end of your website.

We have found the biggest reason why a lot of beginners use the WPCode plugin is to add Google Analytics to their website. For that, we actually recommend using the free MonsterInsights plugin.

It’s the best Google analytics plugin for WordPress which helps you properly set up Google Analytics tracking with just a few clicks, and it shows you helpful stats right inside your WordPress dashboard.

We hope this article helped you to learn how to add header and footer code in WordPress easily. You may also want to see our comparison of the best email marketing services and the best business phone services.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Popular on WPBeginner Right Now!

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Download Now

Reader Interactions

260 CommentsLeave a Reply

    • You would want to check with your specific theme’s support for the header not appearing on a specific page as it could be a page specific template causing you issues.

      Reply

      Admin

  2. Thanks guys for your plugin! I used it to add FB Pixel to my site, but now I have a landing page and I need a different Pixel event (Lead) on the Thank You page after visitors confirm their details. Can I use the plugin to add the script to a specific page?

    Reply

    • Not at the moment, for the time being, the plugin adds the code to all pages by default

      Reply

      Admin

  3. Hi, is there a way to change the font size of the footer?
    I tried keying in a chunk of disclaimer text but it is too large.

    Thanks in advance!

    Reply

  4. I used your insert headers and footers plugin and it was soooo easy and helpful! Thank you so much!

    Reply

    • If you mean a WordPress.com site then they currently don’t allow Adsense on their free plan.

      Reply

      Admin

  6. I’m trying to connect my website to adsense in order to set up an account.
    So far google did not see the code.

    Reply

    • You may want to ensure you’ve cleared any caching on your site as one of the most common reason

      Reply

      Admin

  7. You need to change your messaging/advertising regarding header/footer plug-in being free to install. It is not free unless you have purchased the Business plan for your page.

    Reply

  8. How many codes we can add in single header or footer section, I mean can i use two or three codes in single header section like facebook code google code etc.

    Reply

    • You could certainly add as many codes as you need in the header section depending on your needs.

      Reply

      Admin

  9. Was wondering if PHP can be added in the header section. Like adding Yoast’s Breadcrumb code to the header so I don’t have to go into my theme files.

    Reply

  11. Can You add more than one header code, to the plug-in, for example
    AdSense code and YouTube Verification code.

    Reply

  12. Hi, I’m trying to add a javascript to my site header but on click on save it says page not found

    Reply

    • You may want to try resaving your permalinks and checking with your hosting provider that they are not receiving an error on your site that would be preventing the page from saving.

      Reply

      Admin

  13. Thank you so much for your video, although I have copied the code still I’m not able to enable my header. How to do it?

    Reply

    • If the plugin is installed you should be able to add the code under Settings>Insert Headers and Footers

      Reply

      Admin

  14. Hi. I already install the plugin and it’s work. But how to add more than 1 code? Just copy like that or I need to make 1 space to copy the code

    Reply

    • In case you need to edit the code later, it is normally best to add the new code on the next line

      Reply

      Admin

  15. Cant update “Insert Headers and Footers Plugin”.
    Error message: Update Error: Not possible to eliminate previous version of plugin. (translation from spanish)

    When trying to remove the plugin: ” insert-headers-and-footers-old/ihaf.php could not be removed completely .” (translation from spanish)

    Reply

  16. What role is needed to access this plugin – is it for admins only or can it be provided to editors too?

    Reply

  17. Hi,

    After I insert the Header code, when I click “save”, will auto link to Page 404 error. How can I fix it?

    Reply

  18. Can I add multiple/different codes in the headers sections? ie. one from google analytics and one from blogmote

    Reply

  19. I have another plugin it seems to work almost exactly the same way only it can be used on a single page or customized as to which pages the script is added.

    I am trying the WpBeginner plugin just because I trust y’all.

    Am I likely to run into problems having both added to my site?

    Using yours for the whole site, and the other one for adding something only to the header or footer of an individual page?

    Reply

  20. Hello,
    I’m trying to update something in my footer section.
    I have already downloaded and installed/ used this plug in previously and it is working currently. However, when I try to go edit it, when my cursor is hovering over settings…. no drop out menu appears to go to –>insert header and footer. It only takes me to my account setting page. Please help me because I need to update my mailing list options asap! Thank you!

    Reply

    • If you go to your settings area, it should expand the other options for you to be able to see the Insert Headers and Footers menu item.

      Reply

      Admin

  21. Thanks WPbeginer,

    I tried saving the plugin when I added my google search console code, it redirected me to error 404.

    What could be wrong?

    Reply

  22. Should i deactivate and delete the plugin after inserting the code?

    Will the code be deleted as soon as the plugin is deactivated?

    Reply

    • You would want to leave the plugin active, if you deactivate the plugin the code you’ve added will no longer be included.

      Reply

      Admin

  23. Hello. I’ve been using this plugin for some time and find it invaluable.
    However, I am about to update to WordPress 5 but on the download page, it says ‘Compatible up to 4.9.9’. This makes me wary – will it work with 5 and are there plans to update it? Thank you.

    Reply

  25. Hiya,

    Thanks for recommending the Header and Footer plugin, and I have added code to just a single post only to prevent any issues.

    I’ve noticed though, that my dropdown menu has stopped showing (just on the page with code). Do you have a Javascript fix, please?

    http://www.phhsolicitors.co.uk/calc/

    Hope you can help.

    Merry Xmas!!!!

    Reply

  26. I have added this to my site. It reads it just fine, but prints the code across the top of my header bar EVERY time! Not sure how to fix this.

    Reply

  27. Plsss explian in details how to add more than one code in the headers space, cos i have already inserted ,google search console code with the pluggin how am i going to add the adsene code in the same headers section

    Reply

    • You would add the new code on the next line as if you copied the entire code for each they should close themselves.

      Reply

      Admin

  28. How do I add a HTLM code in the header of my theme. I dont quite understand where it is. I use Xtheme and some people said to go to appearance and editor, but I dont have no editor.

    I need to add the Gtag in the heard of my website for Google analytics and I dont want to use a plug in

    Reply

  29. I want to ask you about this plugin.
    Can I put more than one code from different sites (eg Google Analytics code, Webmaster’s code, and Adsense ad code) Will the number of codes affects their performance because I see a difference in terms of visitors Google Analytics and WordPress analytics(WP Statistics)?
    And the difference between placing the code in the header and in the footer?
    Thank you sorry for bothering you
    I hope you will respond quickly.

    Reply

      • Like they asked, what is the difference between placing the code in the header or footer?

        Thanks!

        Reply

        • The code would be run sooner when placed in your header which makes it less likely to prevent loading due to a bad script when placed in the header

  30. Hi, is it possible use this plugin to add more scripts? For example i need to add the AdSense and PushCrew codes.

    If possible, just copy the code one under the other?

    Thanks

    Reply

  32. So far so good. I’ve been trying to search your site for code to insert line breaks and center text. Any urls to these explanations?

    Reply

  33. Thank you so so much. That solved my problem. I would also love to know if there’s a way to solve the error code I get in my theme codes. I’ve got 53 error when I view the source code.

    Reply

  34. I wish this was available for Premium Accounts as well as Business. Is there another way to embed code in your site

    Reply

  36. I’ve installed header and footer plugin, entered the relevant code and saved it. When I look in header script in header editor I can’t see the relevant code I’ve just entered. Please advise.
    Thank you.

    Reply

  37. Hello, is there a way to insert header code only to certain posts or to posts in a certain category?

    Reply

  38. When I try to add header code using the plug in I get a 403 forbidden page. How do I get around this? I temporarily tried to turn off my security but that didn’t help.

    Reply

  39. Hi, Iam looking for option like this but for a multi-site,

    but I need is like a general admin for network-wide option,
    where when i config this, it will show to the header on all sub-site,

    currently, I need to set this for every sub-site plugin config.

    is there any way to have the plugin option of this menu under network option or something and not per sub-site.

    is there any other option i can use/do.

    thanks

    Reply

  40. Hey, is there anyway to check if the code has been inserted ? Can’t detect it in my site source code nor in the headers.php file. Is is possible for this plugin to not be working ?

    Reply

    • Hi Riddhi,

      Once you add the code and save your changes you will be able to see the code in your site’s source code. For header code you will find it between <head> and </head> tags. Footer code will be added before the </body> tag.

      Reply

      Admin

  41. Is there a way to use this to add an image in the header that does not replace the existing header? In other words, I already have a logo there on the left, and a search bar with social media links on the right. The center is empty. I want to add an image widget which links to the source page of the image. I have the widget code ready to insert, but there is no HTML showing in the header.php file. I do not know PHP (i do know HTML quite well).
    I added the widget to the footer, which was easy because in my theme there IS HTML (an HTML table) in the footer. But it is supposed to be at the top of the pages.

    Reply

  42. Any idea when this plugin will be updated for WP 4.9.1? Looks like it’s only compatible up to 4.8.4

    Reply

  43. Thank you so much for information. I have been so much problem with pasting html adsense code in header. This information helps me a lot

    Reply

  44. So, can I disable this notification after install anywhere?
    I don’t need all my multisite clients to see this notification!!

    Reply

  45. When I add my code into the header or footer section in the plugin, does it apply it across all my pages? Thanks.

    Reply

      • HI

        How do i add the code to a single page header (not a post) so it appears only on that page?

        Reply

        • Hey Rolland,

          This plugin will add header and footer code to all pages and posts. If you want to add it to just a single page, then you will have to manually add your code to your theme and surround it with a conditional php tag. For example: 

          if (is_page( 22 )) { 
// your code goes here
}

          Don’t forget to replace 22 with your actual page ID.

  46. hi, I just re-added my footer widget embedded code, it’s from keyreply.
    I don’t know what’s went wrong, I could see my footer widget from my pc(while I am logged in WP), however any other devices(pc or mobile phone), the widget is not showing. any ideas?

    Reply

  47. im a new leaner and im facing problem in converting footer content in to dynamic wordpress content

    Reply

  48. I installed the insert headers and footers plugin on my clients WordPress site but when I click on it under settings it just shows a blank page. There are no fields available for me to insert text into.

    Reply

  49. Hi,
    I’m trying to install an html5 banner ad at the top of my home page and a few other page tops. I have a customer that wants to only deliver their banner ad in that format so that as a rotating banner each image links to a different url we’re promoting. Where do I put this code to make it show up? I’ve tried downloading some plugins to place it but nothing is working. We normally just accept jpgs and links but I don’t want to lose this sale as she won’t deliver other than in html5. Thanks for your help! Geraldine

    Reply

  50. Hi, I love the simplicity of this plugin. There is one annoying point however.

    How can I disable the dashboard notice “Thank you for installing….” in a multisite set up.

    I don’t need all my client sites seeing that notice.

    A solution that doesn’t involve another plugin would be appreciated, preferably I can just remove an action or something.

    Reply

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Featured in

Copyright © 2009 - 2023 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.

I need help with…

Popular searches:

Starting a
Blog WordPress
SEO WordPress
Performance WordPress
Errors WordPress
Security Building an
Online Store