TechWebUX

Aleksandar Urošević

Head & Footer Code plugin helps you add custom code snippets (JavaScript, CSS, or HTML) to the page even if you are not a programmer. It could be within the <code><head></code> (site verification code for various services, custom styles, meta or Webfont link), right after opening <code><body></code> (pixel tracking, analytics or heatmap code) or just before closing <code></body></code> tag.
Go to Tools → Head & Footer Code in WordPress Dashboard. Insert custom code to HEAD, BODY or FOOTER section (depending on what you have to do).
All magic is done by hooking to WordPress hooks <code>wp_head</code>, <code>wp_footer</code> and <code>wp_body_open</code>.
<blockquote>
💡 Trial Head & Footer Code plugin on a free dummy website before you add it on your project: <a href="https://tastewp.com/new/?pre-installed-plugin-slug=head-footer-code" rel="nofollow ugc">Test It Now!</a>
</blockquote>
Various code snippets are supported, including but not limited to:
<ul>
<li>Google Analytics 4</li>
<li>Google Tag Manager</li>
<li>Google Ads Conversion</li>
<li>Lite Analytics</li>
<li>Facebook/Meta Pixel</li>
<li>Hotjar</li>
<li>FullStory</li>
<li>Google site verification</li>
<li>Bing site verification</li>
<li>Yandex site verification</li>
<li>Alexa site verification</li>
</ul>
<h3>Homepage in Blog Posts mode</h3>
If your WordPress shows the latest blog posts on the homepage, you can also add specific code only for the homepage on Tools → Head & Footer Code (there will be section Head, body and footer code on Homepage in Blog Posts mode)
<h3>Article specific code</h3>
To insert custom code specific for individual article (post, page or custom post type), use article-specific Metabox while editing post/page/custom post type (check out <a href="https://wordpress.org/plugins/head-footer-code/#screenshots" rel="ugc">Screenshots</a>). There choose if that specific code appends to site-wide code defined on Tools → Head & Footer Code, or to replace it.
<h3>Category specific code</h3>
You can also define a Category specific code on each individual category.
Other taxonomies (tag and custom taxonomy) do not have available their specific code, but for them a Global code is used instead.
<h3>Video guide</h3>
<iframe loading="lazy" title="Head Footer Code: How To Install, Configure and Use" width="750" height="563" src="https://www.youtube.com/embed/Gd41Dv09UC4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>Do you need our support?</h3>
If Head & Footer Code does not work on your project, please let us know by <a href="https://wordpress.org/support/plugin/head-footer-code/#new-topic-0" rel="ugc">raising a new support ticket</a> in the <a href="https://wordpress.org/support/plugin/head-footer-code/" rel="ugc">Community Forum</a> and describe what does not works and how to reproduce the issue. We will make sure to resolve the issue as soon as possible.
If you find Head & Footer Code useful for your project, please <a href="https://wordpress.org/support/plugin/head-footer-code/reviews/#new-post" rel="ugc">review plugin</a>.
<h3>Features</h3>
<ul>
<li>Multisite and PHP 8.3 compatible!</li>
<li>Set site-wide custom content for:
<ul>
<li>head page section (before the <code></head></code>)</li>
<li>body section (after the <code><body></code>) – Requires WordPress 5.2!</li>
<li>footer page section (before the <code></body></code>)</li>
</ul>
</li>
<li>Homepage in Blog Posts mode:
<ul>
<li>set homepage specific custom code for head, body and/or footer</li>
<li>toggle homepage specific custom code on paged Homepage (page 2, 3, a nd so on)</li>
</ul>
</li>
<li>Set article specific custom code for:
<ul>
<li>head page section (before the <code></head></code>)</li>
<li>body section (after the <code><body></code>) – Requires WordPress 5.2!</li>
<li>footer page section (before the <code></body></code>)</li>
</ul>
</li>
<li>Set category specific custom code for head, body and/or footer of the page</li>
<li>Choose priority of printed custom code to head/body/footer sections (lower number mean far from <code></head></code> and <code></body></code> and closer to <code><body></code>, higher number means closer to <code></head></code> and <code></body></code> and farther to <code><body></code>)</li>
<li>Choose which post types will have enabled article specific head/body/footer fields</li>
<li>Choose should article specific head/body/footer code be appended to site-wide code, or will replace site-wide code</li>
<li>View on Posts/Pages/Custom Post Types listing if article has defined any article specific custom code</li>
<li>Site-wide section is located under Tools > Head & Footer Code</li>
<li>If you have set WP_DEBUG constant in <code>wp-config.php</code> to <code>true</code>, you’ll see site-wide and article specific entries in page source code wrapped to comments.</li>
<li>[NEW] allow unprivileged user roles Editor and Author to manage article-specific code on single site and multisite (disabled by default)</li>
</ul>
<h3>Data stored in database</h3>
General settings (HEAD, BODY, FOOTER global code and priority, Homepage code and behaviour) saves in WordPress option <code>auhfc_settings</code>. 
Each post/page/custom post type specific HEAD, BODY and FOOTER code and behaviour saves to post meta <code>_auhfc</code>. 
Each category specific HEAD, BODY and FOOTER code and behaviour saves to taxonomy meta <code>_auhfc</code>.
During the Uninstall process all these data has been deleted from the database. 
In case you wish to reinstall plugin, DO NOT UNINSTALL IT although Deactivate, then delete the directory <code>/wp-content/plugins-head-footer-code</code> and then reinstall plugin.
<h3>Permissions on Multisite WordPress</h3>
<ol>
<li>Access to Global: only Super Admin and Administrator</li>
<li>Access to Article specific: Super Admin, Administrator; optional: Editor and Author</li>
<li>Access to Category specific: only Super Admin and Administrator</li>
</ol>

Head & Footer Code

This plugin is what exactly I'm looking for to add custom javascript and CSS codes to specific pages without inserting them inside the template.

A must have plugin

Easy add site-wide, category and article specific custom code before the closing </head> and </body>, or after opening <body> tag.

Aaron T. Grogg

When in Admin mode, this plug-in adds classes to the <code><body></code> tag to let 
your CSS know where you are.
For example, if you are viewing the list of all your Posts, you would get this additional class: 
 edit-list-post 
And, when you are editing a Post, something like this: 
 edit-page-post
Alternatively, for custom posts, for example “movie”, you would see either: 
 edit-list-movie 
or: 
 edit-page-movie
This allows you to write custom CSS and JS to interact with these varying edit pages within WP.
Please let me know if you have any questions/suggestions/thoughts, 
Atg

Add Custom Post Type Slugs to Admin Body Class

Add Custom Post Type Slugs to Admin &lt;body&gt; Class

Head & Footer Code vs Add Custom Post Type Slugs to Admin Body Class