{"id":24326,"date":"2026-01-16T18:55:01","date_gmt":"2026-01-16T18:55:01","guid":{"rendered":"https:\/\/wpeasyelements.com\/?p=24326"},"modified":"2026-01-16T18:55:01","modified_gmt":"2026-01-16T18:55:01","slug":"how-to-add-custom-code","status":"publish","type":"post","link":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/how-to-add-custom-code\/","title":{"rendered":"How to Add Custom Code to WordPress Header and Footer"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Struggling to add custom code to your WordPress header or footer without breaking your site? Many users find it confusing to insert scripts like Google Analytics or tracking pixels, especially when theme updates wipe out their changes or a small mistake crashes the website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fortunately, there are <strong>three main ways<\/strong> to do this:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Manually using <code>functions.php<\/code> (child theme)<\/li>\n\n\n\n<li>Using a dedicated header\/footer plugin<\/li>\n\n\n\n<li>Using <strong><a href=\"https:\/\/wordpress.org\/plugins\/easy-elements\/\" target=\"_blank\" rel=\"noreferrer noopener\">Easy Elements<\/a><\/strong> (recommended)<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">In this guide, we\u2019ll cover <strong>all three methods<\/strong>, explain the pros &amp; cons, and show you the <strong>best and safest approach<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method 1: Add Custom Code Manually Using <code>functions.php<\/code> (Child Theme)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This is the <strong>traditional developer method<\/strong> and works without any plugin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u26a0\ufe0f Important Before You Start<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u2757 Always use a <strong>child theme<\/strong>.<br>Editing the parent theme will cause your changes to be lost after updates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step-by-Step: Add Code to Header via <code>functions.php<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open your <strong>child theme\u2019s<\/strong> <code>functions.php<\/code> file and add this code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function add_custom_code_to_header() {\n    ?&gt;\n    &lt;!-- Custom Header Code --&gt;\n    &lt;script&gt;\n        \/\/ Your custom script here\n    &lt;\/script&gt;\n    &lt;?php\n}\nadd_action('wp_head', 'add_custom_code_to_header');\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This will output your code inside the <code>&lt;head&gt;<\/code> section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add Code to Footer via <code>functions.php<\/code><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>function add_custom_code_to_footer() {\n    ?&gt;\n    &lt;!-- Custom Footer Code --&gt;\n    &lt;script src=\"custom-script.js\"&gt;&lt;\/script&gt;\n    &lt;?php\n}\nadd_action('wp_footer', 'add_custom_code_to_footer');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Problems with the Manual Method<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">While this works, it has drawbacks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Requires coding knowledge<\/li>\n\n\n\n<li>Risk of breaking the site with syntax errors<\/li>\n\n\n\n<li>Not beginner-friendly<\/li>\n\n\n\n<li>Hard to manage for multiple scripts<\/li>\n\n\n\n<li>Not ideal for non-developers or agencies<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For most Elementor users, this approach is <strong>unnecessarily complex<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method 2: Using a Separate Header &amp; Footer Plugin<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Many users install a plugin just to add header or footer scripts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Downsides:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adds <strong>extra plugin bloat<\/strong><\/li>\n\n\n\n<li>More updates to maintain<\/li>\n\n\n\n<li>Possible conflicts<\/li>\n\n\n\n<li>One plugin for one small task<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re already using a powerful Elementor addon, this is often redundant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method 3: Add Custom Code Using Easy Elements (Recommended \u2705)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re using <strong><a href=\"https:\/\/themewant.com\/plugins\/demo\/boldreview\/\" data-type=\"page\" data-id=\"3161\">Easy Elements<\/a><\/strong>, you don\u2019t need to touch theme files or install extra plugins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Easy Elements provides a <strong>built-in custom code manager<\/strong> that lets you safely add code to your site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step-by-Step: Add Header &amp; Footer Code with Easy Elements<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Open Easy Elements Settings<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Go to your WordPress dashboard:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Easy Elements \u2192 Custom Code<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"858\" height=\"1024\" src=\"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-content\/uploads\/2026\/01\/custom-code-858x1024.png\" alt=\"Add Custom Code\" class=\"wp-image-24335\" srcset=\"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-content\/uploads\/2026\/01\/custom-code-858x1024.png 858w, https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-content\/uploads\/2026\/01\/custom-code-251x300.png 251w, https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-content\/uploads\/2026\/01\/custom-code-768x917.png 768w, https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-content\/uploads\/2026\/01\/custom-code.png 886w\" sizes=\"(max-width: 858px) 100vw, 858px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Add Header Code<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Paste your script or meta tag into the <strong>Header Code<\/strong> field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"google-site-verification\" content=\"your-code-here\"&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This code will load inside the <code>&lt;head&gt;<\/code> section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-content\/uploads\/2026\/01\/header-code-1024x538.webp\" alt=\"\" class=\"wp-image-24338\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Add Footer Code<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Paste scripts that should load at the bottom of the page into the <strong>Footer Code<\/strong> field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"custom-script.js\"&gt;&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: Save Changes<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Click <strong>Save<\/strong>, and your code is instantly applied site-wide.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No theme editing. No extra plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Easy Elements Is the Best Option<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 No coding required<br>\u2714 Safe and update-proof<br>\u2714 Centralized script management<br>\u2714 No extra plugins<br>\u2714 Perfect for Elementor users &amp; agencies<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You manage <strong>design + animations + custom code<\/strong> in one place.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Header vs Footer: Where Should You Add Code?<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Type of Code<\/th><th>Recommended Location<\/th><\/tr><\/thead><tbody><tr><td>Meta tags<\/td><td>Header<\/td><\/tr><tr><td>Google Analytics<\/td><td>Header<\/td><\/tr><tr><td>Verification codes<\/td><td>Header<\/td><\/tr><tr><td>Chat widgets<\/td><td>Footer<\/td><\/tr><tr><td>Custom JS<\/td><td>Footer<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re a developer, the manual <code>functions.php<\/code> method works but it\u2019s not ideal for most users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a <strong>clean, beginner-friendly, and performance-safe solution<\/strong>, using <strong>Easy Elements<\/strong> is the smartest approach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One plugin. One dashboard. No unnecessary complexity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Want to manage design, animations, and custom code without plugin overload?<br><strong><a href=\"https:\/\/themewant.com\/plugins\/demo\/boldreview\/pricing\/\" target=\"_blank\" data-type=\"page\" data-id=\"14142\" rel=\"noreferrer noopener\">Easy Elements<\/a><\/strong> helps you build smarter Elementor websites.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Struggling to add custom code to your WordPress header or footer without breaking your site? Many users find it confusing [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":24345,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[65,67],"tags":[66],"class_list":["post-24326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-wordpress-tips","tag-how-to-add-custom-code-to-wordpress-header-and-footer"],"_links":{"self":[{"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/posts\/24326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/comments?post=24326"}],"version-history":[{"count":0,"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/posts\/24326\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/media\/24345"}],"wp:attachment":[{"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/media?parent=24326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/categories?post=24326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewant.com\/plugins\/demo\/boldreview\/wp-json\/wp\/v2\/tags?post=24326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}