How to Create a WordPress Notification Bar Without a Plugin

Using notification bars in WordPress can be a great way to announce things, increase your CTR and engagement, and are awesome for affiliate marketing. The one big problem with a lot of the 3rd party notification bar plugins and services are they are horrible when it comes to web performance. So follow this tutorial below on how to create a WordPress notification bar without a plugin, and therefore not affect your performance!

Slow WordPress Notification Bar Options

Here are some of the 3rd party notification bar plugins and services I have tried:

• Hello Bar (horrible when it comes to performance, don’t like linking to 3rd party assets)
• WP Notification Bar Pro (I am usually a big fan of MTS, but their plugin adds around 150-200ms)
• BugMeBar (A very fast plugin, but the animations make it appear sluggish. Almost perfection solution.)

How to Create a WordPress Notification Bar

Below are the simple steps to create a WordPress notification bar without a plugin. This is just simple HTML, but works great and since there is no close button, there is no cookie being placed. That is one of the reasons it is faster.

Step 1

This will vary a little bit depending upon your WordPress theme, but for most you can simply edit your header.php file.

Step 2

Here is the HTML I am using for my notification bar. You will want to put in right below the </head>. Obviously you can change the header to say whatever you want.

<div id="dabar" class="hide_on_mobile">Your website message.</div>

Step 3

You will then need to add some custom CSS to make it look good.  Here is my CSS. You can tweak the color and font colors to your liking. If your WordPress theme doesn’t have a custom CSS panel, you can simply add it to the WordPress Customizer under “Additional CSS.”

#dabar{
background: #2c3644;
color: #fff;
font-size:16px;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}
#dabar a {color: #ffffff; border-bottom: 1px dotted;}

By default, the bar will be static and disappear when you scroll down. That is my personal preference. But if you want your bar to be fixed and stay there when a visitor scrolls down, simply use the modified CSS below with the position set and z-index.

#dabar{
background: #2c3644;
color: #fff;
font-size:16px;
position: fixed;
z-index:1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}
#dabar a {color: #ffffff; border-bottom: 1px dotted;}

And that is it! Here is an example of how it looks on the site.

Optional – Hide on Mobile

You might have noticed that in the HTML I had a class called, hide_on_mobile. This allows me to hide it mobile devices. Simply add the additional CSS.

@media only screen and (max-width:480px) {
.hide_on_mobile {
display: none !important;}
}

Now you can enjoy a super fast notification bar without the overhead of 3rd party scripts or animations. If this tutorial on how to create a WordPress notification bar was helpful, please let me know below. My brother and I just created the WP Coupons plugin and so who knows, we might create more plugins, such as a notification bar focused on performance.