How to add an announcement bar to the top of your website

Website announcement box

In addition to the handy admin settings Marketers Delight adds to your WordPress dashboard, your site can be extended even further with a Child Theme to add any kind of features you want.

To give you a basic idea of what you can you do with some different MD code snippets, I’m going to show you how to add an announcement bar like in the screenshot above to your own site.

1. Make sure you have a child theme activated

It’s best to keep the changes you make separate so they aren’t overwritten when you update MD to a new version by placing code snippets in your /wp-content/themes/child-theme/ folder.

You can download the official MD starter child theme from your account or use your own.

Child theme resources

2. Add announcement bar HTML before header

Place the following function in your child themes 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.

The announcement bar is a small block of HTML with our text in it. You can also add links, bold/italicize text, and other kinds of post styles

We put that HTML inside of the custom_alert_box() function (which you can rename) so we can add that HTML to the top of the site with add_action:

add_action( 'md_hook_before_html', 'custom_alert_box' );

If you change your function name for any reason, also be sure to update the second parameter here to match your new function name. The md_hook_before_html is an MD hook that is located at the top of your site to add your own content to.

3. 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;
}

This creates the CSS styles that will format the announcement bar, text, links, and badge. You can of course write any kind of custom CSS you want to further adjust the announcement bar.

In Your Code Editor…

Announcement Bar Styles

10 comments add yours

  1. Going to play around with this. Been wanting to do this but didn’t want to buy another plugin.

    Thanks for another useful tutorial!

    • This would be a good feature in MD, but I figured it would be worth showing off the simplicity of going custom. Eager to see how you use it yourself!

  2. Real good idea for a post.

    I see so many damn ‘Hello Bars’ on people’s sites these days that honestly, they are a turn off.

    I think doing something like this is way more simple, fresh & effective.

    • I understand the convenience side of those services, but paying $XX a month to embed a JavaScript code that basically does the same thing as this little bit of HTML boggles my mind!

  3. I would like to know how to make it sticky? So that it visible until user wants to close it 🙂 is that possible? If it’s not too hard, could you show us how to do it?

  4. Hey Lauri!

    I will write up a tutorial on how to make this sticky tonight and post it in the forums, but I’ll have to take some time another night to come up with a way to make it closable—that takes a little extra time to get right.

    I actually have plans to release a simple “hello bar” as an MD addon with that close feature in it. Maybe I’ll have to get that out sooner than I thought!

    Stay tuned. 😀

    Edit: here you go!

  5. I’m loving my new announcement bar (no plugin needed!)

    I’ve been using it as a call-to-action and it’s been converting pretty well.

    Definitely a good idea for anyone looking to subtly promote something on (or off) your site.

Leave a Comment