How to Add a Notification Bar Above the Aurora Header

A notification bar is a slim full-width strip that appears above the header on every page. It is useful for announcements, sale notices, or sitewide alerts. Aurora does not include one built-in, but wp_body_open gives you a clean hook to add one from your child theme.

Basic Notification Bar

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

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

Then add the styles in Appearance → Customize → Additional CSS or your child theme’s stylesheet:

.aurora-notice-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--link-color);
    color: #fff;
    font-size: 13px;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.aurora-notice-bar a {
    color: #fff;
    text-decoration: underline;
}

.aurora-notice-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    position: absolute;
    right: 16px;
}

Remembering the Dismissal

To remember that a visitor dismissed the bar across page loads, use localStorage. Replace the inline onclick with a script:

add_action( 'wp_body_open', function () {
    echo '
';
    echo 'Free migration included with every purchase. Get in touch';
    echo '×';
    echo '
';
    echo '';
} );