Header Footer Code Manager Pro

Navigate This Document

About Header Footer Code Manager Pro

Header Footer Code Manager Pro is an advanced version of the Header Footer Code Manager snippet manager. It provides 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

  • 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.
  • Ability to set priority for each snippet so they all can appear in order of priority.
  • Ability to add snippets for private Posts, Pages.
  • Supports the 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

PRO-Specific Version Features

The following features are available to the PRO version of the HFCM Plugin only:

  • Body Snippet Location – You can output your snippets at the beginning of the Body tags of pages and posts on your website
  • Logged In / Not Logged In User Targeting – You can target only Logged In Users, Not Logged In Users, or All
  • PHP Code Supported – PHP Code Snippets are supported, you will need to select the “PHP” option when adding/editing a snippet’s Snippet Type.  IMPORTANT NOTE: Please make sure the code you’re adding is absolutely correct. Adding bad or improperly written code may result in site crashes causing you to be locked out of your site. Do this at your own risk.
  • Cloning / Copying Snippets – You can clone or create copies of your existing snippets if you need to use an existing snippet but use different display rules.
  • Snippet Priority – Now, you can specify priority for each snippet for them appear in the order you want.
  • Target Private Pages and Posts – Now, you can specify Private Posts and Pages when you want your script to display on a specific post.
  • PHP Code Validation – Our plugin checks your PHP code to ensure that it does not crash the system and warns you if you have exceptions with your code so that you can fix them when saving your snippet.  Note: This only applies to PHP Code Snippets

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.

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-pro` to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Go to the plugins page to see instructions for shortcode and PHP template tags

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).

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, or PHP [PHP in PRO VERSION ONLY]).  If your snippet has opening and closing “<script>” and “</script>” tags, most likely your snippet is Javascript.  If your snippet has opening and closing “<?PHP” and “?>” tags, then most likely your snippet is PHP. Adding the PHP opening and closing (“<?PHP” and “?>”) tags are optional. IMPORTANT NOTE: If you select PHP (Pro Version Only) – Please make sure the code you’re adding is absolutely correct. Adding bad or improperly written code may result in site crashes causing you to be locked out of your site. Do this at your own risk.
  5. Choose the display options as per your requirements, and then add the code snippet in the Snippet / Code textarea.
  6. Click on the Save button to save your snippet to the database. You can navigate to HFCM > All Snippets to view/edit/delete your saved snippet

Screenshot of Add Snippet Screen on PRO Version

Snippet Conditions

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 pages
  4. Specific Category (NOTE: Snippet will appear on both Archive and Single Post pages for the category)
  5. Specific Tag (NOTE: Snippet will appear on both Archive and Single Post pages for the category)
  6. Specific post type (including Custom Post Types) – (NOTE: 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)
  9. WordPress Admin (PRO Only) – You can now make snippets display inside of all screens when logged into the WordPress Admin (WP Admin).  NOTE: If you want a snippet to display both inside of the WP Admin AND elsewhere, you will have to create two snippets with the same code snippet, one set to display inside the Admin, the other inside of the other location.

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. After Body Open Tag (At the top of the Body tag) – (PRO VERSION ONLY)
  4. Top of content (For Posts Only)
  5. Bottom of content (For Posts Only)

Device Display Options

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

Display To Options (PRO Only)

You can select whether you want to display to:

  • Users that are logged into your site
  • Users that are not logged into your site
  • All (Both Logged In Users AND Not Logged In Users)

Snippet Priority (PRO Only)

For snippets that are set to display in the same location, you can now set the priority of a snippet using a numeric value in the Priority field.

The priority field follows these rules:

  1. In case of equal priority value, the latest snippet will render first.
  2. The lower the priority value, the earlier it will be output.  This means that a Priority value of 0 will display first.

Snippet Tags/Keywords (PRO Only)

Each snippet can now be grouped together with other similar snippets using tags/keywords.  You can add a keyword to a snippet inside the Tag field when adding/editing a snippet:

And within the All Snippets screen that lists all of your snippets, you can now filter using the tags that you have added to view only the snippets that have been assigned that tag/keyword:

NOTE: You may paste in a list of tags/snippets into the field, but if you do – please make sure the list is comma separated.  For example: Tag1, Tag2, Tag3

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.

Cloning / Duplicating Your Snippets (PRO Only)

When viewing the All Snippets list, when you hover over a snippet, additional options will display, such as Editing or Deleting the snippet.  If you have the PRO Verison of HFCM, you will also see a “Duplicate” option as well.  Clicking on this option will bring you to an add snippet screen with all of the same exact snippet values and criteria already populated with the name ” COPY” at the end of your snippet.  You may adjust any of the settings (or none at all), as well as the snippet name and click on the blue “Update” button at the bottom of your screen.  This will save your copied snippet.

Importing/Exporting Your Snippets

HFCM Supports Exporting and Importing your snippets from one site to another site where the HFCM Plugin installed (either Free or 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 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 snippets that you have previously exported from a site:

1. You can import your snippets 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, HOWEVER it will color/format the text according to PHP standard if the PHP code type is selected.

PHP Snippets

PHP Snippet Processing Change (As-Of Version 1.0.11)

Based on some analysis of previous verisons of our plugin from 1.0.10 and prior, the way that the HFCM Pro plugin has been processing PHP had the following issues:
  • PHP snippets were not working with a certain population of website hosts.
  • PHP snippet execution was happening inside of either the wp_head or wp_footer WordPress hooks, and individuals who were attempting to insert snippets utilizing other hooks were encountering issues.
Therefore, with Version 1.0.11 of Header Footer Code Manager Pro, we have changed the way we process the php snippets. Any PHP snippets added in the plugin, will be executed using the wp hook.  This hook executes prior to the majority of use cases that we have found. The wp hook is where WP_Query object initializes and before the content of the page is output.  All snippets that are inserted using HFCM Pro that utilize a hook that executes ON Or AFTER the wp hook will work.   As of the time of creating this entry, there are 20+ hooks that execute before the wp hook in the WordPress hierarchy and any code snippets that utilize any of the hooks that happen prior to the wp hook will NOT work with HFCM Pro.   Thus, if you find that your code snippet does not work, please check the list of hooks WordPress uses here and make sure the hook that your snippet is using is not before the wp hook: https://codex.wordpress.org/Plugin_API/Action_Reference.

Legacy Snippets (Prior to Version 1.0.11) and How to Convert Old PHP Snippets:

For versions v1.0.10 and prior of HFCM Pro, users could insert PHP snippets using HFCM Pro WITHOUT the use of functions and WordPress hooks/filters.  Now, with v1.0.11, HFCM Pro has changed the way that PHP code is executed and users must therefore use functions and WordPress hooks and/or filters along with your function declarations and can no longer have PHP code without this convention.  This change is to bring the execution of PHP snippets more in line with WordPress standards and the WordPress way of doing things.  The use of WordPress hooks and filters tells the system WHERE and WHEN within the WordPress hierarchy to execute the code snippets, so that you get the result you intend.    In older versions of our plugin, the execution of the snippet was assumed to either be the Header or the Footer (based on the Snippet Location selected).  We have removed the Snippet Location field in v1.0.11, therefore giving users greater flexibility to insert the PHP code snippet they need and have it execute, and are now requiring users to do so, if  they have not specified where to execute their code previously.
For more information on WordPress Hooks, please read the WordPress Developer Resources here: https://developer.wordpress.org/plugins/hooks/
IMPORTANT NOTE: For all snippets that existed in your WordPress install PRIOR to v1.0.11, HFCM Pro will continue to execute them using the old way – HOWEVER if you edit the snippet, our system will force you to update the snippet to the new format.
In the All Snippets screen, HFCM Pro will tell you if your snippet is a legacy snippet by adding a red warning icon to the right of the ID field, as shown in this screenshot:

When Does a Legacy Snippet Need to be Converted?

If your code snippet did not use functions and hooks, your snippet likely will need to be converted to the new Functions and Hooks method.  Due to the varied ways of how our users have used our plugin and the wide variety of snippets that users can insert, we cannot tell you definitively in this support document whether your snippet needs to be converted, however if you edit the snippet and find that it no longer works or functions the way you intend, then this likely means that your snippet needs to be converted.

How to Convert a Legacy Snippet

To convert the snippets set to header location, follow these steps:

1. Copy the snippet and empty the snippet area.

2. Change the snippet using the following pseudo-code (note you may need to edit the function name to something more descriptive as to what your code is doing):

function my_unique_function_name() {
     // your current snippet here
}
add_action('wp_head', 'my_unique_function_name');
3. Save your changes
To convert the snippets set to execute in the Footer location, follow these steps:

1. Copy the snippet and empty the snippet area.

2. Change the snippet using the following pseudo-code (note you may need to edit the function name to something more descriptive as to what your code is doing):

function my_unique_function_name() {
     // your copies snippet here
}
add_action('wp_footer', 'my_unique_function_name');
3. Save your changes

PHP Code Snippet Failsafe (Pro Only)

For PHP Code Snippets, when a snippet is saved – the plugin will disable / de-activate the snippet and turn the snippet off if it encounters a fatal error due to bad/invalid code.  If you have saved your snippet and the snippet doesn’t seem to be loading, this may be the source of the issue as your snippet may have been turned off by the HFCM Pro plugin.  Review your code and resolve any syntax issues and re-activate the snippet.

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…

Need Help with Activating/Deactivating your Site?

Refer to our help doc on how to manage your sites and activate/deactivate your site here: https://draftpress.com/docs/how-to-manage-your-activated-sites/

Free Version 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 Free 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