Switchboard DOCS
Docs
Get Started Get Lifetime Deal

Header & Footer Code

Add custom code to your WordPress site’s header, body, or footer without editing theme files. Perfect for analytics tracking, verification codes, chat widgets, and any other scripts that need to run site-wide.

Use Cases

  • Add Google Analytics or Google Tag Manager tracking code
  • Insert Facebook Pixel, LinkedIn Insight Tag, or other marketing pixels
  • Add site verification codes for Google Search Console, Bing, or Pinterest
  • Include custom CSS that persists through theme updates
  • Add chat widgets, help desk scripts, or notification systems

How It Works

  1. Open the module settings in Switchboard
  2. Paste your code into the appropriate textarea (header, body, or footer)
  3. Save your settings
  4. Code is immediately output on all pages

Code Insertion Points

Header Code (wp_head)

Code inserted inside the <head> tag, before the closing </head>.

Best for:

  • Google Analytics (analytics.js or gtag.js)
  • Meta tags and verification codes
  • CSS stylesheets and <link> tags
  • Preload directives
  • Open Graph and Twitter Card meta tags

Example - Google Analytics 4:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Body Code (wp_body_open)

Code inserted immediately after the opening <body> tag.

Best for:

  • Google Tag Manager noscript container
  • Tracking pixels that require body placement
  • Any script that must load before page content

Example - Google Tag Manager (body):

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Code inserted before the closing </body> tag.

Best for:

  • Chat widgets (Intercom, Drift, Crisp, etc.)
  • Deferred JavaScript that doesn’t need to block rendering
  • Exit-intent popups
  • Any script that can load after page content

Example - Intercom:

<script>
  window.intercomSettings = {
    app_id: "YOUR_APP_ID"
  };
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/YOUR_APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>

Common Integrations

Google Site Verification

<meta name="google-site-verification" content="your-verification-code" />

Location: Header

Facebook Pixel

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

Location: Header

Custom CSS

<style>
.my-custom-class {
    background-color: #f0f0f0;
    padding: 20px;
}
</style>

Location: Header

Security

For security, PHP tags are automatically stripped from all code:

  • <?php is removed
  • <? is removed
  • ?> is removed

This prevents accidental (or malicious) PHP execution. Only HTML, CSS, and JavaScript are allowed.

The code you enter is output exactly as written. Ensure your scripts are from trusted sources, as malicious JavaScript could compromise your site.

Benefits Over Theme Editing

Theme File EditingHeader & Footer Code Module
Lost on theme updatePersists through updates
Requires FTP/file accessEdit from WordPress admin
One theme onlyWorks with any theme
Easy to break thingsIsolated and safe

Verifying Your Code

After adding code, verify it’s working:

  1. Visit your site’s frontend
  2. View page source (Ctrl+U / Cmd+U)
  3. Search for your code:
    • Header code: Look near </head>
    • Body code: Look after <body>
    • Footer code: Look before </body>

FAQ

Does the code appear on admin pages too?No, code is only inserted on the public frontend of your site. Admin pages are not affected.
Can I add different code to different pages?This module adds code site-wide. For page-specific code, consider using conditional logic in the code itself, or use a page builder’s custom code feature.
What if my code breaks the site?The code runs after WordPress loads, so you can always access the admin panel to remove or fix the code. If needed, you can disable the module from Switchboard.
Does this affect page speed?Any added scripts affect load time. Use async/defer attributes where appropriate, place non-critical scripts in the footer, and only add what you actually need.
Can I use this for Google Tag Manager?Yes! GTM requires code in both the header and body sections. Add the main script to Header Code and the noscript fallback to Body Code.
PRO

Get access to all 147 modules with a single license

Upgrade to Pro
Prev
Compact Tables
Next
Conditional Redirects