The Day My Site Had Two Headers

One morning silverrates.today had two headers, mine from the theme, and the new one I had just designed in Elementor Pro, stacked. To understand why, this post walks the real history, because the doubled header was the second act of an older fight, the day Elementor removed my header entirely.

Act one. Pages built on Elementor’s Canvas template bypass a theme’s header.php and footer.php completely, that is Canvas’s purpose, a blank slate, so my branding vanished on those pages. The fix was to stop rendering the header from the template files and hook it to events WordPress fires on every page regardless of template, with guards so nothing doubles:

add_action('wp_body_open', 'sarafa_render_header', 5);
add_action('wp_footer',    'sarafa_render_footer', 5);

function sarafa_render_header() {
    if (!empty($GLOBALS['sarafa_header_rendered'])) { return; }
    $GLOBALS['sarafa_header_rendered'] = true;
    // ...print the theme header...
}

Forced rendering, with an idempotency flag. It worked everywhere, which was exactly the problem waiting for act two. When I built a header in Elementor Pro’s Theme Builder, Pro started outputting its header, and my hook, faithful to its design, forced the theme’s header too. Two systems, each correct alone, neither aware of the other, both rendering, the seam bug shape again.

The fix is cooperation through Elementor Pro’s own integration points. First, the theme declares official locations, which tells Pro this theme supports Theme Builder properly:

add_action('elementor/theme/register_locations', function($manager) {
    $manager->register_all_core_location();   // header, footer, single, archive
});

Then the render functions stop forcing and start asking, is a Pro template assigned for this location? If yes, step aside and let it render, if no, draw the theme’s own design:

function sarafa_render_header() {
    if (!empty($GLOBALS['sarafa_header_rendered'])) { return; }
    $GLOBALS['sarafa_header_rendered'] = true;

    if (function_exists('elementor_theme_do_location')
        && elementor_theme_do_location('header')) {
        return;   // Elementor Pro rendered its header; ours yields
    }
    // ...print the theme's built-in header...
}

elementor_theme_do_location is the whole handshake, it renders the assigned Pro template and returns true, or returns false when none exists, so one call both defers and detects. The function_exists guard keeps the theme working when Pro is absent, the same politeness rule as the limo plugin’s Elementor timing fix, never assume another plugin is present, ask. The result is the best of both worlds by construction, a polished default header on a bare install, full visual control the moment the site owner builds their own, and never, structurally, two headers again, because the theme now yields instead of insisting.

A few things people ask me about this

Why does my theme’s header disappear on Elementor pages? Canvas template bypasses header.php. Render the header from wp_body_open with a rendered-flag guard, and it survives every template.

Why does my site show two headers with Elementor Pro? Your theme forces its header while Pro outputs its Theme Builder header. Register locations and gate your render on elementor_theme_do_location(‘header’) so the theme yields when a Pro template is assigned.

Next

The site was finally whole, real pages, honest data, cooperative theme, and it ran into the one wall code cannot break, waiting for ad approval. That wall is the next post.