[B] Easy Head & Footer for Elementor

Custom Elementor headers & footers — without Pro.

Manual & Documentation

Requirements

  • WordPress 5.8 or higher
  • PHP 8.1 or higher
  • Elementor (free version) installed and active

Installation

  1. Go to Plugins → Add New in your WordPress admin.
  2. Click Upload Plugin and select the .zip file, or search for “Easy Head & Footer for Elementor”.
  3. Click Install Now, then Activate.
  4. A new menu item Templates H/F will appear in the admin sidebar.

Creating a Header Template

  1. Go to Templates H/F → Add New.
  2. Enter a title, for example “Main Header”.
  3. Click Edit with Elementor.
  4. Design your header using any Elementor widgets — navigation menus, logos, buttons, icons, etc.
  5. Click Publish (or Update) when done.

Creating a Footer Template

  1. Go to Templates H/F → Add New.
  2. Enter a title, for example “Main Footer”.
  3. Click Edit with Elementor.
  4. Design your footer — copyright text, social links, contact info, columns, etc.
  5. Click Publish (or Update) when done.

Settings

Navigate to Settings → Easy Header/Footer to configure the plugin.

  • Header Template — select the template to use as your site header. It will be injected right after the <body> tag via the wp_body_open hook.
  • Footer Template — select the template to use as your site footer. It will be injected via the wp_footer hook.
  • Hide Theme Header — check this to inject CSS that hides your theme’s native header. Useful to prevent duplicate headers.
  • Hide Theme Footer — check this to inject CSS that hides your theme’s native footer.
  • Custom Hide Selectors — one CSS selector per line. The plugin ships with common defaults (.site-header, header#header, .site-footer, footer#footer, etc.). Adjust these to match your theme if needed.

Display Conditions (Optional)

By default, the header and footer are applied to every page on your site. If you need more control:

  • Enable Conditions — check this to activate the rules below.
  • Include by Post Types — select one or more post types. The header/footer will only appear on singular pages of these types. Leave empty to not restrict by post type.
  • Exclude by Post Types — select post types to exclude. Overrides the include rule.
  • Include by URL — one pattern per line. The current URL must match at least one pattern. Use /regex/ syntax for regular expressions, or plain text for case-insensitive substring matching.
  • Exclude by URL — one pattern per line. If the current URL matches any pattern here, the header/footer will not be displayed. Same syntax as include.

Using Elementor Library Templates

In addition to the dedicated Templates H/F CPT, the plugin also lists templates from the Elementor Library (elementor_library) in the settings dropdown. This means you can reuse any saved Elementor template as a header or footer.


How It Works (Technical)

Rendering

  • The header is rendered via the wp_body_open action hook, wrapped in a <div id="bdw-ehfe-header"> with role="banner".
  • The footer is rendered via the wp_footer action hook, wrapped in a <div id="bdw-ehfe-footer"> with role="contentinfo".
  • Elementor’s get_builder_content_for_display() is used to render the template with full widget support.

Styling & Assets

  • Each template’s CSS is generated and enqueued in the <head> via Elementor’s Post CSS API — no inline styles.
  • The plugin adds elementor-default and elementor-kit-{ID} body classes so that global Kit styles (colors, fonts, spacing) are applied correctly.
  • If Elementor’s frontend styles/scripts are not yet enqueued on a page, the plugin enqueues them automatically.

Editor Safety

The plugin detects when you are inside the Elementor editor or preview iframe and automatically suppresses header/footer injection. This prevents layout conflicts while you are editing templates.

SEO Protection

Template CPT pages (bdw_ehfe_template) are automatically marked with noindex, nofollow using both a <meta> tag and an X-Robots-Tag HTTP header. This ensures search engines do not index these internal template pages.


Troubleshooting

Header is not showing

Your theme must call wp_body_open() immediately after the <body> tag. Most themes released since 2020 include this hook. If yours does not, add the following line to your theme’s header.php file, right after the opening <body> tag:

<?php do_action( 'wp_body_open' ); ?>


Duplicate header or footer

This happens when the theme’s native header/footer is still visible alongside the plugin’s custom templates. To fix it:

  1. Go to Settings → Easy Header/Footer.
  2. Check Hide Theme Header and/or Hide Theme Footer.
  3. If the defaults don’t work, inspect your theme’s header/footer element in the browser (right-click → Inspect) and find the CSS selector (e.g., header.main-header).
  4. Add that selector to the Custom Hide Selectors field.

Elementor Kit styles not applying

Make sure your Elementor Global Settings (Site Settings) are saved. The plugin reads the active Kit ID to inject the correct body class. If you recently changed your Kit, save it again and clear any page cache.

Header/footer appearing inside the Elementor editor

This should not happen — the plugin automatically detects editor and preview modes. If it does occur, clear your browser cache and any server-side cache, then try again.


Hooks Reference

The following WordPress hooks are used by the plugin:

  • wp_body_open — outputs the header template.
  • wp_footer — outputs the footer template.
  • wp_head — prints the CSS rules that hide the theme’s header/footer.
  • wp_enqueue_scripts — enqueues each template’s generated CSS file and Elementor base assets.
  • body_class — adds Elementor Kit body classes (elementor-default, elementor-kit-{ID}).
  • elementor/cpt_support — registers the template CPT with Elementor’s editor.
  • send_headers — sends X-Robots-Tag: noindex on template CPT pages.

Privacy & Data

This plugin:

  • Stores only one row in wp_options (bdw_ehfe_settings).
  • Does not set any cookies.
  • Does not make any external HTTP requests.
  • Does not collect any user data.
  • Is fully compatible with GDPR, LGPD, and similar privacy regulations.

Uninstallation

Deactivating the plugin stops the header/footer from being rendered, but your templates remain in the database as CPT posts. To fully remove:

  1. Deactivate the plugin.
  2. Delete it from Plugins → Installed Plugins.
  3. Optionally, delete the Templates H/F posts manually if you no longer need them.

Frequently Asked Questions