{"id":8694,"date":"2020-06-21T15:00:30","date_gmt":"2020-06-21T13:00:30","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8694"},"modified":"2020-11-13T12:47:35","modified_gmt":"2020-11-13T11:47:35","slug":"add-header-and-footer-code-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-header-and-footer-code-in-wordpress\/","title":{"rendered":"How to Add Code to Your WordPress Header and Footer"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Many tools and tracking scripts require you to add certain code to the header and footer areas of your website. This makes it very likely that you will have to edit these elements at some point. Fortunately, there are a couple of straightforward ways you can achieve this.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In this article, we will show you how you can add header and footer code in WordPress either using plugins or manually. You just need to choose which of the two ways suits you better for modifying these elements.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add Code to Your WordPress Header and Footer Using a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]For most users, the easiest way to add code to the header and footer area of a website is with the help of a plugin<\/strong>. The advantage of using a plugin for this purpose is that the code remains even if you change your theme<\/strong>. Additionally, a plugin doesn\u2019t require you to delve into the code<\/strong> and structure of WordPress files.<\/p>\n

[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are several plugins that you can use for this purpose<\/strong>. In this article, we will utilize the Head, Footer and Post Injections plugin<\/a> which is free. You can install it to be able to follow along with the next steps or choose another one if you prefer.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Head, <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]After you install and activate your plugin, go to Settings > Header and Footer<\/strong> in your admin panel. You will see the plugin interface and from there you need to select the Head and Footer tab<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Header <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To add code to your website\u2019s header, you need to enter it into one of the fields under the <HEAD> PAGE SECTION INJECTION section<\/strong>. Depending on which field you use, the code you enter will appear either in the header of each page or only in the header on the homepage<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Page <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will most likely be adding code to the first field so that it\u2019ll be in the header of each page<\/strong>. For example, if you want to add a Google Analytics tag<\/a>, all you have to do is enter the appropriate code in the ON EVERY PAGE<\/em> field<\/strong> and save the change.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Enter <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To add code to your website\u2019s footer<\/strong>, you need to scroll down to\u00a0the BEFORE THE <\/BODY> CLOSING TAG (FOOTER)<\/em> section<\/strong>. It also contains two fields, but they are slightly different from the ones we had for the header.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]As you can see in the image above, the two available fields are Desktop and Mobile<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=”23px”]