SH Sanzid

How to Create a Custom Elementor Header Without Any Plugin (Free Method)

custom elementor header without plugin

If you’ve searched for this, you’ve probably hit the same two answers everywhere: “use Elementor Theme Builder” (Pro only) or “install a header/footer plugin” (which isn’t really a no-plugin method, is it?).

There’s a third way — and it’s the one most WordPress developers actually use when a client won’t pay for Pro and doesn’t want another plugin bloating the site: build the header as an Elementor Section template, grab its shortcode, and hook it into your theme’s header.php through a child theme. No Pro, no header/footer plugin.

What You’ll Need

  • Elementor (free version is enough)
  • A child theme (if you don’t have one, create one first — never edit a parent theme directly)
  • FTP or File Manager access to your site

Step 1: Design Your Header as a Saved Section

  1. In WP Admin, go to Templates → Saved Templates → Add New
  2. Choose Section (not Page)
  3. Name it something like custom-header
  4. Design your header inside the Elementor editor — logo, nav menu widget, buttons, whatever you need
  5. Click Publish

This section now lives independently of any page and can be inserted anywhere via shortcode.

Step 2: Grab the Shortcode

  1. Go back to Templates → Saved Templates
  2. Find your custom-header template
  3. Click the shortcode icon next to it — it’ll look like
  4. Copy that shortcode

Step 3: Insert It Into Your Child Theme’s Header

Open your child theme’s header.php. Find where the site header currently outputs (usually right after <body> or inside a <header> tag), and add:

<?php
if ( shortcode_exists( 'elementor-template' ) ) {
    echo do_shortcode( '[elementor-template id="1234"]' );
}
?>

Replace 1234 with your actual template ID.

If you’d rather not touch header.php directly, hook it in via functions.php instead — cleaner and update-safe:

function shsanzid_custom_elementor_header() {
    if ( shortcode_exists( 'elementor-template' ) ) {
        echo do_shortcode( '[elementor-template id="1234"]' );
    }
}
add_action( 'wp_body_open', 'shsanzid_custom_elementor_header' );

wp_body_open fires right after the opening <body> tag on any modern theme (2019+ core support). If your theme doesn’t call wp_body_open(), use a theme-specific hook instead (check your theme’s header.php for available action hooks).

Step 4: Hide the Theme’s Default Header

Now you have two headers stacked. Remove the theme’s original one. In functions.php:

function shsanzid_remove_default_header() {
    remove_action( 'theme_hook_name', 'theme_header_function' );
}
add_action( 'after_setup_theme', 'shsanzid_remove_default_header' );

Since hook names differ by theme, the safest universal method is CSS — hide it without breaking template structure:

.site-header,
header.site-header,
#masthead {
    display: none !important;
}

Inspect your theme’s actual header wrapper class/ID and swap it in.

Step 5: Make It Sticky and Responsive

Elementor Section templates don’t have built-in sticky controls like Pro headers do. Add this CSS in Appearance → Customize → Additional CSS or your child theme’s style.css:

.custom-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #ffffff;
}

Wrap the shortcode output in a div with that class:

echo '<div class="custom-header-wrapper">' . do_shortcode( '[elementor-template id="1234"]' ) . '</div>';

For mobile, use Elementor’s built-in responsive controls (desktop/tablet/mobile icons) when designing the section — no extra code needed there.

Troubleshooting

Header shows twice: You haven’t fully hidden the theme’s default header — check for display: none conflicts or leftover PHP output.

Shortcode not rendering: Confirm Elementor is active and the template ID is correct (find it in the URL when editing the template: post=1234).

Menu not showing inside the section: Use Elementor’s native Nav Menu widget (free version includes it) and assign your WordPress menu from Appearance → Menus.

Sticky header overlaps content: Add padding-top to your body or main content wrapper equal to the header’s height.

FAQ

Do I need Elementor Pro to build a custom header? No. Elementor Pro’s Theme Builder makes it a point-and-click global setting, but the Section-template + shortcode method achieves the same visual result using only the free version.

Will this survive a theme update? Yes, as long as the code lives in a child theme, not the parent theme.

Can I use this for a footer too? Same process — just design a Section template for the footer and hook it near wp_footer() instead.

Does this hurt page speed? No more than a Pro-built header would. Elementor’s core CSS/JS loads either way; you’re not adding a new plugin’s overhead.

Wrapping Up

This method gets you a fully custom, Elementor-built header with zero added plugins and zero Pro license cost — the trade-off is a bit of manual child-theme code instead of a settings panel. For a single header on one site, that’s a fair trade. If you’re doing this across multiple client sites regularly, Elementor Pro’s Theme Builder will save you more time in the long run.

Share the Post:

Related Posts