-
Notifications
You must be signed in to change notification settings - Fork 9
Home
Header and Footer Scripts is a lightweight, powerful WordPress plugin that allows you to insert custom code (HTML, JavaScript, CSS) into your site's header, body, and footer areas without editing your theme files.
- Go to your WordPress Dashboard.
- Navigate to Plugins > Add New.
- Search for "Header and Footer Scripts".
- Click Install Now and then Activate.
Alternatively, you can upload the plugin folder to your /wp-content/plugins/ directory.
You can add scripts that run on every page of your website from the plugin settings.
Navigate to: Settings > Header and Footer Scripts
-
Location: Inside the
<head>tag. -
Usage: Best for verification tags (Google Search Console), CSS styles (
<style>), and scripts that must load early (e.g., critical analytics). -
Hook:
wp_head
-
Location: Immediately after the opening
<body>tag. - Usage: Required for certain tracking pixels like Google Tag Manager (noscript part) or Facebook Pixel.
-
Hook:
wp_body_open -
Note: Your theme must support the
wp_body_open()function (standard in most modern themes since WP 5.2).
-
Location: Just before the closing
</body>tag. - Usage: The best place for most JavaScript (Google Analytics, Chat widgets, etc.) to prevent slowing down your page load speed.
-
Hook:
wp_footer
The settings page includes a code editor with syntax highlighting, line numbers, and error checking to help you write valid code.
You can inject a specific script into the Header of a single Post or Page.
- Edit any Post or Page.
- Scroll down to the "Insert Script to " meta box.
- Paste your specific CSS or JS code.
- Update/Publish the post.
Currently, per-post scripts are only supported for the Header section.
Security is a priority. Loading raw scripts allows executing arbitrary code (XSS), so access is restricted by default.
-
Default: Only Administrators (or users with the
unfiltered_htmlcapability). - Granular Control: You can grant access to trusted Authors and Contributors.
- Go to
Settings > Header and Footer Scripts. - Look for the "Who can insert scripts?" section.
- Check "Allow Authors" or "Allow Contributors".
- Save settings.
Warning
Security Notice: Granting this permission adds the unfiltered_html capability to that role. This allows those users to post raw HTML/JS anywhere on the site (not just in this plugin). Only enable this for trusted users.
- Clear Cache: If you use a caching plugin (WP Rocket, W3 Total Cache), clear the cache after saving scripts.
-
Check Theme Support:
- For Header scripts, your theme
header.phpmust contain<?php wp_head(); ?>. - For Body scripts, your theme
header.phpmust contain<?php wp_body_open(); ?>just after the<body>tag. - For Footer scripts, your theme
footer.phpmust contain<?php wp_footer(); ?>.
- For Header scripts, your theme
-
Syntax Errors: Check if your JS code has errors. The built-in editor usually highlights these. Ensure you wrap JS in
<script>tags and CSS in<style>tags.
You do not have permission to edit scripts. Ensure you are an Administrator or have been granted access via the settings.