Astra: Message Bar Above the Header
Prints a slim message bar above the Astra header on every page, for sales, shipping notes or event dates, using Astra's own header hook.
Opens WPIDE on
Code
// Message and colors.
$wpide_astra_bar_text = 'Free shipping on orders over $50 — <a href="/shop/">Shop now</a>';
$wpide_astra_bar_bg = '#111827';
$wpide_astra_bar_fg = '#ffffff';
add_action( 'astra_header_before', function () use ( $wpide_astra_bar_text, $wpide_astra_bar_bg, $wpide_astra_bar_fg ) {
if ( '' === trim( $wpide_astra_bar_text ) ) {
return;
}
printf(
'<div class="wpide-astra-bar" style="background:%1$s;color:%2$s;text-align:center;padding:8px 16px;font-size:14px;"><style>.wpide-astra-bar a{color:inherit;text-decoration:underline;}</style>%3$s</div>',
esc_attr( $wpide_astra_bar_bg ),
esc_attr( $wpide_astra_bar_fg ),
wp_kses_post( $wpide_astra_bar_text )
);
} );Notes
Leave the message empty to hide the bar. Colors are set in the inline style.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.