{"id":33903,"date":"2021-09-06T12:27:34","date_gmt":"2021-09-06T06:42:34","guid":{"rendered":"https:\/\/rarathemes.com\/blog\/?p=33903"},"modified":"2022-01-03T11:51:59","modified_gmt":"2022-01-03T06:06:59","slug":"add-header-and-footer-code-wordpress","status":"publish","type":"post","link":"https:\/\/rarathemes.com\/blog\/add-header-and-footer-code-wordpress\/","title":{"rendered":"How to Add Header and Footer Code in WordPress?"},"content":{"rendered":"\n<p>Are you familiar with a situation where you need to add code snippets to your WordPress header and footer?<\/p>\n\n\n\n<p>This often happens when you try to integrate services such as Google AdSense, <a href=\"https:\/\/rarathemes.com\/blog\/add-google-analytics-wordpress\/\">Google Analytics<\/a>, and Google Search Console on your website.&nbsp;<\/p>\n\n\n\n<p>By default, WordPress does not offer the option to add code to your header and footer. But luckily, there are other easy ways for beginners.&nbsp;<\/p>\n\n\n\n<p>In this guide, we will explain<strong> two different methods on how to add header and footer code in WordPress<\/strong>. The simplest method is by using a WordPress plugin. For the next method, you can add code snippets to your theme\u2019s PHP file.&nbsp;<\/p>\n\n\n\n<p>So, let\u2019s get into the details!<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rarathemes.com\/blog\/add-header-and-footer-code-wordpress\/#Adding_Header_and_Footer_Code_in_WordPress_%E2%80%93_2_Simple_Methods\" >Adding Header and Footer Code in WordPress &#8211; 2 Simple Methods&nbsp;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rarathemes.com\/blog\/add-header-and-footer-code-wordpress\/#Method_1_Adding_Code_to_WordPress_Header_and_Footer_using_a_Plugin\" >Method 1: Adding Code to WordPress Header and Footer using a Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rarathemes.com\/blog\/add-header-and-footer-code-wordpress\/#Method_2_Manually_Adding_Header_and_Footer_Code_in_WordPress\" >Method 2: Manually Adding Header and Footer Code in WordPress<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rarathemes.com\/blog\/add-header-and-footer-code-wordpress\/#Step_1_Preparing_Code_Snippets\" >Step 1: Preparing Code Snippets&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rarathemes.com\/blog\/add-header-and-footer-code-wordpress\/#Step_2_Adding_the_Code_Snippets_to_Your_Child_Themes_functionsphp_File\" >Step 2: Adding the Code Snippets to Your Child Theme\u2019s functions.php File<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rarathemes.com\/blog\/add-header-and-footer-code-wordpress\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_Header_and_Footer_Code_in_WordPress_%E2%80%93_2_Simple_Methods\"><\/span>Adding Header and Footer Code in WordPress &#8211; 2 Simple Methods&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As mentioned above, you can either use a plugin or add a code manually to your WordPress header and footer. We recommend using a simple plugin as it is much easier and safer as compared to the manual method.&nbsp;<\/p>\n\n\n\n<p>Here are some benefits of using a plugin to add code in the WordPress header and footer:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Easy, Fast, and Organized:<\/strong> Using a plugin is much easier and quicker as compared to the manual approach. Plus, using a plugin keeps your task organized and allows you to store your header and footer codes in one place.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Prevents Errors: <\/strong>Plugins are easy to use and are beginner-friendly. You don\u2019t need to make modifications to custom codes to use them on your website. Thus, it prevents possible errors.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Changes Remain Intact: <\/strong>The plugin saves your header and footer code in a separate safe place. Hence, even if you update or edit your theme, the settings remain intact.<\/li><\/ul>\n\n\n\n<p>Having said that, let\u2019s dig into the step-by-step process of adding header and footer code in WordPress using both of these methods.<\/p>\n\n\n\n<p>But first, make sure to <a href=\"https:\/\/rarathemes.com\/blog\/backup-wordpress-website\/\"><strong>backup your WordPress<\/strong><\/a> files in case something goes wrong or you want to revert back to the previous settings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_1_Adding_Code_to_WordPress_Header_and_Footer_using_a_Plugin\"><\/span>Method 1: Adding Code to WordPress Header and Footer using a Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>There are many <a href=\"https:\/\/rarathemes.com\/blog\/best-wordpress-plugins-for-blogs\/\">WordPress plugins <\/a>for adding header and footer code in WordPress. However, we recommend using the<a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> Insert Headers and Footers<\/a> plugin. This plugin has a simple interface and built-in features to let you add codes to your header file and footer file at ease.&nbsp;<\/p>\n\n\n\n<p>Here is how you add header and footer code in WordPress using this plugin:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to <strong><em>Plugins &gt; Add New <\/em><\/strong>on your WordPress dashboard.&nbsp;<\/li><li>Search for Insert Headers and Footers plugin.&nbsp;<\/li><li>Install and activate it.&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"403\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/activate-insert-header-and-footer-plugin.png\" alt=\"\" class=\"wp-image-33923\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/activate-insert-header-and-footer-plugin.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/activate-insert-header-and-footer-plugin-300x173.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/activate-insert-header-and-footer-plugin-104x60.png 104w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>After activation, go to <strong><em>Settings <\/em><\/strong>on your dashboard. Then, click on the <strong><em>Insert Header and Footers<\/em><\/strong> option.&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"330\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/Insert-Header-and-Footers-option.png\" alt=\"\" class=\"wp-image-33924\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/Insert-Header-and-Footers-option.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/Insert-Header-and-Footers-option-300x141.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/Insert-Header-and-Footers-option-127x60.png 127w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>You can see boxes where you can add a piece of code for header, body, and footer.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"451\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/Options-to-add-codes-on-header-body-and-footer.png\" alt=\"Screenshot name: Options to add codes on header, body, and footer.png\" class=\"wp-image-33925\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/Options-to-add-codes-on-header-body-and-footer.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/Options-to-add-codes-on-header-body-and-footer-300x193.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/Options-to-add-codes-on-header-body-and-footer-93x60.png 93w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>You can simply add your codes in the header and footer boxes.<\/li><li>Once done, click on the <strong><em>Save <\/em><\/strong>button.&nbsp;<\/li><\/ul>\n\n\n\n<p>Now, the plugin automatically loads the codes you added in the respective locations of your site. To edit or delete the code, come back to these header and footer boxes and delete the code. At last, save the changes to continue.<\/p>\n\n\n\n<p><strong>Note:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>You need to keep this plugin installed and activated all the time. If you deactivate the plugin, WordPress stops adding the codes to your site.<\/li><li>After saving the changes, you need to <strong><em>clear your WordPress cache<\/em><\/strong>. Doing so makes sure that the changes are seen properly on your website\u2019s front end.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_2_Manually_Adding_Header_and_Footer_Code_in_WordPress\"><\/span>Method 2: Manually Adding Header and Footer Code in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The manual method is a bit more technical than the first one. You need to prepare your snippet and then add it to your WordPress functions.php file. Before making any modifications, make sure to <strong><em>create a WordPress backup<\/em><\/strong>.&nbsp;<\/p>\n\n\n\n<p>We also recommend using the child theme while editing because the codes get overwritten when you update your parent theme. Installing and editing child theme files makes sure you don\u2019t lose the settings later.&nbsp;<\/p>\n\n\n\n<p>Many developers offer child themes for specific WordPress themes. However, if yours does not have one, check out <a href=\"https:\/\/blossomthemes.com\/install-child-theme-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>How to install a child theme in WordPress<\/strong><\/a><strong>.&nbsp;<\/strong><\/p>\n\n\n\n<p>Now, after creating a WordPress backup and installing the child theme, follow the steps below to add header and footer code manually:&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Preparing_Code_Snippets\"><\/span>Step 1: Preparing Code Snippets&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>You can use the following snippet framework for your header and footer:&nbsp;<\/p>\n\n\n\n<p><strong>Code Snippet for Header&nbsp;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Describe the code snippet for your header *\/\nadd_action('wp_head', 'your_function_name');\nfunction your_function_name(){\n?&gt;\nPASTE HEADER CODE HERE\n&lt;?php\n};\n<\/code><\/pre>\n\n\n\n<p><strong>Code Snippet for Footer&nbsp;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>* Describe the code snippet for your footer*\/\nadd_action('wp_footer', 'your_function_name');\nfunction your_function_name(){\n?&gt;\nPASTE FOOTER CODE HERE\n&lt;?php\n};\n<\/code><\/pre>\n\n\n\n<p>For each of these snippets, make sure to change the following with your own:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u201cDescribe the code snippet for your header\/footer\u201d&nbsp;<\/li><li>\u201cyour _function_name()\u201d<\/li><li>\u201cPaste header\/footer code here\u201d<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Adding_the_Code_Snippets_to_Your_Child_Themes_functionsphp_File\"><\/span>Step 2: Adding the Code Snippets to Your Child Theme\u2019s functions.php File<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>After preparing your code snippets for the header and footer, you need to add those codes to the functions.php file of your theme.&nbsp;<\/p>\n\n\n\n<p>Here is how you can do it:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to the <strong><em>Appearance &gt; Theme Editor<\/em><\/strong> from your WordPress Admin Panel.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"352\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting.png\" alt=\"Theme editor setting\" class=\"wp-image-31777\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting.png 667w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting-300x158.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting-114x60.png 114w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Click the \u201c<strong>functions.php<\/strong>\u201d file.&nbsp;<\/li><li>Now, paste your code at the end of the file.&nbsp;<\/li><li>Click on the <strong><em>Update File<\/em><\/strong> button to save the settings.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"424\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/add-header-and-footer-code-in-function.png\" alt=\"add header and footer code in function\" class=\"wp-image-33927\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/add-header-and-footer-code-in-function.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/add-header-and-footer-code-in-function-300x182.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/09\/add-header-and-footer-code-in-function-99x60.png 99w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>If you want to add the code to a specific page or post, you can add an \u201c<strong><em>if<\/em><\/strong> \u201c statement as follows:&nbsp;<\/p>\n\n\n\n<p><strong>For Header<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Describe the code snippet for your header *\/\nadd_action('wp_head', 'your_function_name');\nfunction your_function_name(){\nif(is_single(73790)) { ?&gt;\nPASTE HEADER CODE HERE\n&lt;?php\n};\n<\/code><\/pre>\n\n\n\n<p><strong>For Footer:&nbsp;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Describe the code snippet for your footer*\/\nadd_action('wp_footer', 'your_function_name');\nfunction your_function_name(){\nif(is_single(73790)) { ?&gt;\nPASTE FOOTER CODE HERE\n&lt;?php\n};\n<\/code><\/pre>\n\n\n\n<p><strong><em>Note<\/em><\/strong><em>: make sure to replace the number \u201c<\/em><strong><em>73790<\/em><\/strong><em>\u201d with your page or post id.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The main reason for adding header and footer code in WordPress is for using third-party services such as Google AdSense, Google Analytics, Facebook Pixel, and other tools. However, there may be various reasons as well.&nbsp;<\/p>\n\n\n\n<p>Whatever be the reason, you can add the code to your header and footer using a plugin or by adding a code to the functions.php file. Although both of these methods are effective, you should go with the first and our preferred method if you are a beginner. It is easier and safer.&nbsp;<\/p>\n\n\n\n<p>If you have further queries or concerns, share them with us in the comments section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you familiar with a situation where you need to add code snippets to your WordPress header and footer? This often happens when you try to integrate services such as &hellip; <\/p>\n","protected":false},"author":15,"featured_media":34358,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_be_single_description":"","_be_image_uploader":0,"_be_meta_button_label":"","_be_meta_button_url":"","_be_meta_button_newtab":false,"_be_meta_rel_attribute":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-33903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","latest_post"],"_links":{"self":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/33903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/comments?post=33903"}],"version-history":[{"count":0,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/33903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media\/34358"}],"wp:attachment":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media?parent=33903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/categories?post=33903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/tags?post=33903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}