Add Announcement Box to Top of Site

Website announcement box

1. Add announcement bar HTML to the top of the page:

Place this function in your child theme’s functions.php file.

/**
 * Announcement box, added to the top of the site.
 */
function custom_alert_box() { ?>

	<p class="alert-box links-main">
		<span class="badge">New</span> My custom HTML with <a href="#link">link</a>.
	</p>

<?php }

add_action( 'md_hook_before_html', 'custom_alert_box' );

In Your Code Editor…

Custom MD functions file
Don’t know what this is? Read here to get an idea.

2. Add announcement bar styles

Finally, place the following code in your style.css file:

.alert-box {
	background-color: #fffbcc;
	color: #777;
	font-size: 14px;
	line-height: 23px;
	padding: 13px 16px;
	text-align: center;
}

In Your Code Editor…

Announcement Bar Styles

Leave a Comment