Code & Snippets

How to Add a Custom Banner Above the Header

By Daniel Ekay • May 18, 2026 • 2 min read
Docs › Code & Snippets › How to Add a Custom Banner Above the Header
Share:
Last updated:

Aurora does not include a built-in banner area above the header, but WordPress provides a hook — wp_body_open — that fires immediately after the opening <body> tag, before any theme content. This is the cleanest place to inject a banner that sits above everything, including the header.

Adding a Simple Banner

Add this to your child theme’s functions.php:

Child theme folder structure showing style.css, functions.php and other child theme files
add_action( 'wp_body_open', function () {
    echo '
';
    echo '
Your message here. Get in touch
';
    echo '
';
} );

Then style it in your child theme’s stylesheet or Additional CSS:

.above-header-banner {
    background-color: var(--link-color);
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.above-header-banner a {
    color: #fff;
    text-decoration: underline;
}

Showing the Banner Only on Specific Pages

Wrap the output in a conditional to show the banner only where needed:

add_action( 'wp_body_open', function () {
    if ( ! is_front_page() ) return;
    echo '
';
    echo '
Special offer. Ends Friday. Claim yours
';
    echo '
';
} );

Use any WordPress conditional — is_single(), is_archive(), is_page( 42 ) — to target exactly where the banner appears.

Making It Dismissible

To let visitors close the banner, add a button and a small JavaScript snippet:

add_action( 'wp_body_open', function () {
    echo '
';
    echo '
Free setup included with every purchase.
';
    echo '';
    echo '
';
} );

Aurora’s custom content sections under Customize → Homepage Style let you inject HTML between post blocks on the homepage without code. For a banner that appears site-wide above the header, the child theme approach above is the right path. See Aurora’s Custom Content Sections for the Customizer-based option.

#header #child-theme #code-required
Previous ← How to Limit Post Title Length on Archives with CSS
Next How to Disable Aurora’s Drop Cap on Specific Posts →

Make your blog stand out

Enjoy the ease and flexibility of Aurora. Create stunning blog designs your readers will love, with live preview editing and effortless template mixing and matching enabled.

Get Aurora today for just $39

Get Aurora