Header Footer Code Manager

Navigate This Document

About Header Footer Code Manager

Header Footer Code Manager is an easy interface to add any snippets to your website, including the header or footer or above or below the content of your page. Easily add tracking code snippets, conversion pixels, or other scripts required by third party services for analytics, marketing, or chat features.

Screenshot of All Snippets Screen

Benefits

Here are some of the problems this plugin solves:

  • Avoid inadvertently placing snippets in the wrong place
  • Eliminate the need for a dozen or more silly plugins just to add a few small code snippets – Less plugins is always better!
  • Never lose your code snippets when switching or changing themes
  • Know exactly which snippets are loading on your site, where they display, and who added them
  • Add different snippets targeting different post types using the Specific Post Types feature

Features

Here are some of the features for the Pro version of the plugin:

  • Add an unlimited number of scripts and styles anywhere and on any post / page
  • Manage which posts or pages the script loads
  • Supports custom post types
  • Add Snippets to All Post Types including Posts, Pages, Attachments & Custom Post Types using the Specific Post Type option under Site Display.
  • Supports ability to load only on a specific post or page, or latest posts
  • Control where exactly on the page the script is loaded – head, footer, before content, or after content
  • Script can load only on desktops or mobile. Enable or disable one or the other.
  • Use shortcodes to manually place the code anywhere
  • Label every snippet for easy reference
  • Plugin logs which user added and last edited the snippet, and when
  • Import/Export Your Snippets from One Site to Another or between a Staging/Dev environment and your Live Production environment

What’s Included in HFCM Free vs Pro?

Our free version includes most basic features a typical website owner would need, however the Pro version includes features more advanced websites or developers may be interested in.  You can check out the Pro version of HFCM here: https://draftpress.com/products/header-footer-code-manager-pro/

FEATURE HFCM FREE HFCM PRO
HTML, CSS, and JS code snippets ✔️ ✔️
Custom Post Type support ✔️ ✔️
Device targeting (desktop or mobile) ✔️ ✔️
Shortcodes ✔️ ✔️
Edit history (who added/edited last & when) ✔️ ✔️
Import / Export all snippets ✔️ ✔️
Duplicate / Clone snippets ❌ ✔️
PHP code snippets ❌ ✔️
Snippet Location – After Opening Body Tag hook ❌ ✔️
Snippet – Display Option – Logged In/Not Logged In User ❌ ✔️
Ability to Specify Private Posts & Pages ❌ ✔️
PHP Code Validation (prevents site crashes) ❌ ✔️
Snippet Priority ❌ ✔️
Ability to Group / Organize Snippets via Tags ❌ ✔️
WP Admin Display Condition ❌  ✔️
Snippet Search (by Name) ❌  ✔️

Installation

  1. Upload `99robots-header-footer-code-manager` to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Go to plugins page to see instructions for shortcode and php template tags

How to Add a Code Snippet

  1. After installing and activating the plugin, navigate to HFCM on the left navbar in the WordPress Dashboard area.
  2. Click on HFCM > Add New
  3. Enter a suitable name for your snippet, which would help you distinguish it from other snippets. For Example: Google Analytics Snippet (if you are entering a google analytics code snippet)
  4. Select the appropriate Snippet Type (HTML/CSS/Javascript).  If your snippet has opening and closing “<script></script>” tags, most likely your snippet is Javascript.
  5. Choose the display options as per your requirements, and then add the code snippet in the Snippet / Code textarea.
  6. Click on Save to save your snippet to the database. You can navigate to HFCM > All Snippets to view/edit/delete your save snippets.

screenshot of add snippet window

Site Display Options

The following page display options are available in the plugin.

  1. Site wide on every post / page
  2. Specific post (includes blog posts and most custom post types)
  3. Specific page
  4. Specific category
  5. Specific tag
  6. Specific post type (including Custom Post Types) – Snippet will display on both Index and Single Post pages for your Post Type
  7. Latest Blog Posts only (you choose how many up to the latest 20 posts)
  8. Manually place using shortcodes (you can include the script anywhere you can put a shortcode on your site)

Injection Location

Header Footer Code Manager plugin lets you insert code snippets into the following locations on a post or page:

  1. Head section
  2. Footer section
  3. Top of content (For Posts Only)
  4. Bottom of content (For Posts Only)

Device Display Options

  • Show on All Devices
  • Only Desktop
  • Only Mobile Devices

Snippet Search

In the All Snippets list, you can use the search box in the upper right of the screen to search for a snippet if you have a large quantity of snippets on your site.  NOTE: The Snippet search only returns results when searching by the snippet name.

Snippet Type

You can now label your snippets by type / language of the snippet.  You can also filter by these values in the All Snippets list

  • HTML
  • CSS
  • Javascript
  • PHP

If your script contains a combination of HTML, CSS, and Javascript – select the most applicable (likely Javascript).

Importing/Exporting Your Snippets

HFCM Supports Exporting and Importing your snippets from one site to another where the HFCM Plugin installed (Free and Pro).  You can also use the import/export functionality to export your snippets from the Free version of your plugin into the Pro Version of the plugin.  You can access both the import/export options from the “Tools” option within the HFCM Menu area:

Here is what the Export and Import screens look like:

Screenshot of Export and Import Screens

How to Export Your Snippets

Please follow the provided steps to export your scripts from your site.  Make sure you are logged into the WP Admin of the site you want to export from:

1. You can export your scripts by navigating to HFCM->Tools

2. Navigate to the Export Snippets pane of the screen:

3. Select the Checkboxes related to the Snippets you want to export

4. Press the “Export File” button.

5. Your system should then download a JSON file with the .json file extension into your downloads directory location for your browser entitled “hfcm-export-YYYY-MM_DD.json” with the “YYYY-MM_DD” representing today’s date that you exported the scripts.  Locate that file and you should be able to use that file to import the selected scripts into the site of your choice. (Note: PRO Only Snippets may not import into HFCM Free as those features are not supported by HFCM Free.)

How to Import Snippets

In order to import your snippets into a site, the following pre-requisites exist:

  1. You must already have exported your scripts from another website and have the downloaded the JSON file readily accessible.
  2. Make sure you are logged into the WP Admin of the site you want to import the scripts into
  3. Ensure that the site you want to import scripts into has HFCM installed and activated.  (Note: To import any Pro Only Snippets, you’ll need to have the HFCM Pro Plugin installed).

Once these pre-requisites are met, please follow these steps to import your scripts that you have previously exported from a site:

1. You can import your scripts by navigating to HFCM->Tools

2. Navigate to the Import Pane of the Screen

3. Press the “Choose File” button and navigate to and select the JSON file that was created when you exported the snippets.

4. Once you’ve selected the file, the filename should display next to the “Choose File” button.  Confirm you have the correct file selected and then press the Blue “Import” button.  The system will process your JSON file and import your snippets!

5.  Once completed importing, you should be able to navigate to the “All Snippets” page and view your imported snippets.

Code Snippet Editor – Error Highlighting

The Code Snippet field has been changed to use a native WordPress HTML Editor field and should now show errors with HTML Syntax.  A Red “X” will now show on the left side of the editor where there is an issue with the HTML and hovering over the red stop sign will display the error.  NOTE: The code snippet field does NOT currently provide any error highlighting for PHP Code.

 

Supported Third Party Services

Here are a handful of the supported services, however the plugin can accept almost ANY code snippet (HTML / Javascript / CSS) from any service.

  • Google Analytics
  • Google Adsense
  • Google Tag Manager
  • Clicky Web Analytics or other analytics tracking scripts
  • Chat modules such as Olark, Drip, or
  • Pinterest site verification
  • Facebook Pixels, Facebook Scripts, Facebook og:image Tag
  • Google Conversion Pixels
  • Twitter
  • Heatmaps from Crazy Egg, notification bars Hello Bar, etc.
  • and the list goes on and on…

Changelog

The changelog is a history of updates and changes to the plugin. It will document the features and fixes we’ve made to the plugin in the newest release so you can prepare when you update. Please backup your site before updating any plugin, theme, or WordPress.

Please see the changelog for Header Footer Code Manager available on WordPress.org