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.
Thanks for this great post Brian! No need to use SumoMe or other modal software that slows down your website
Definitely agree :)
Used hello bar for about 1.5 year but removed it after comparing site speed with and without it. Was lucky enough to find this site, great post indeed!
thanks, just removed the plugin & replaced it!
Kudos Brian! you saved my ass today. Thank you!
Haha, glad it was helpful Dave!
hi there! thank you for this post, although this didn’t work for me , i am thinking maybe its because my menu bar stays on top as you scroll down, maybe i can’t have both features on the site??
i am using a template, do you have any idea what else I can do to get this code running properly :)?