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.
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
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)||✔️||✔️|
|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)||❌||✔️|
|Ability to Group / Organize Snippets via Tags||❌||✔️|
|WP Admin Display Condition||❌||✔️|
|Snippet Search (by Name)||❌||✔️|
- Upload `99robots-header-footer-code-manager` to the `/wp-content/plugins/` directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Go to plugins page to see instructions for shortcode and php template tags
How to Add a Code Snippet
- After installing and activating the plugin, navigate to HFCM on the left navbar in the WordPress Dashboard area.
- Click on HFCM > Add New
- 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)
- Choose the display options as per your requirements, and then add the code snippet in the Snippet / Code textarea.
- Click on Save to save your snippet to the database. You can navigate to HFCM > All Snippets to view/edit/delete your save snippets.
Site Display Options
The following page display options are available in the plugin.
- Site wide on every post / page
- Specific post (includes blog posts and most custom post types)
- Specific page
- Specific category
- Specific tag
- Specific post type (including Custom Post Types) – Snippet will display on both Index and Single Post pages for your Post Type
- Latest Blog Posts only (you choose how many up to the latest 20 posts)
- Manually place using shortcodes (you can include the script anywhere you can put a shortcode on your site)
Header Footer Code Manager plugin lets you insert code snippets into the following locations on a post or page:
- Head section
- Footer section
- Top of content (For Posts Only)
- Bottom of content (For Posts Only)
Device Display Options
- Show on All Devices
- Only Desktop
- Only Mobile Devices
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.
You can now label your snippets by type / language of the snippet. You can also filter by these values in the All Snippets list
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:
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:
- You must already have exported your scripts from another website and have the downloaded the JSON file readily accessible.
- Make sure you are logged into the WP Admin of the site you want to import the scripts into
- 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
- 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
- Heatmaps from Crazy Egg, notification bars Hello Bar, etc.
- and the list goes on and on…
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