How to Add a Hello Bar to Your WordPress Site (and Why Everyone is Doing It)

Want to boost your conversion rates? That’s what hello bars are all about. Whether you want to add email subscribers, advertise special deals, drive traffic to a landing page, or make a site-wide announcement, hello bars get the job done.

What are hello bars? Hello bars, more generically called notification bars, are the bars added to either the top or bottom of a webpage to deliver a targeted message. In most cases, they’re sticky, meaning they stay put as you scroll up or down. They usually deliver a marketing message, but their use isn’t limited to marketing, and they are implemented by many, many websites.

Notification bars are popular in part because they can be used to accomplish a variety of goals:

  • Run a blog? A newsletter can provide a huge boost in repeat traffic and a notification bar can be used to add email subscribers.
  • Have an announcement that you need every one of your visitors to see? A notification bar can display a short message and a link to a page with additional information.
  • Running a limited-time promotion? Use a notification bar to let visitors know about the time-sensitive offer.
  • Hiring and think your site visitors will want to know about it? Notification bars are a great way to say “We’re hiring!”

Setting up a hello bar is easy and there are several different ways to go about adding one to your WordPress website. However, before you jump into implementation, it’s important to think through and develop a plan for how you will use a notification bar.

Continue reading, or jump ahead using these links:

Hello Bar: Pros, Cons and Best Practice

Notification bars can be awesome. You can use them to display a targeted message that reaches every visitor. They aren’t obtrusive, yet can be quite eye-catching, and they’re flexible enough to be used to deliver many different types of messages.

However, hello bars can also be ineffective if poorly implemented. If a notification bar is too unobtrusive visitors may ignore it. Popups, long derided as annoying, at least ensure that your visitor must notice your message. If you message is urgent enough to justify interrupting a visitors time spent on site, a popup might be a better option. In addition, notification bars offer limited real estate and are usually only effective delivering a very short sentence and link. If you need to display a more complex message a notification bar may not be up to the task.

With that in mind, here are three things you can do to make sure your hello bar is as effective as possible:

  • Make it stand out. Seriously, make it pop. Don’t go crazy, but remember that a hello bar isn’t blocking anyone’s view like a popup, so make it really stand out with strong colors are generous fonts.
  • Select notification bar text carefully. If you aren’t a wordsmith, find one. Notification bar messages must be clear, succinct, and powerful to be effective.

How Sites Use Hello Bars

Hello bars are everywhere in the WordPress community and are used for a variety of purposes. Here are five examples of notification bars being used at popular WordPress blogs and companies to get your creative juices flowing.

wpmu dev blog screenshot

WPMU DEV

We look no further than this blog for our first example of a hello bar. This notification bar appears if you visit our blog without being logged in. If you want to see it in action, just open up a private or incognito browser window and take a look. After opening the page scroll down until the hello bar appears.

There are a few things you should notice about this hello bar. First, we use a bright color and bold uppercase text to draw attention to the most important words in the message. Second, the hello bar offers something tangible: 14 days of free access and an ongoing discount. Offering something tangible goes a long way toward boosting the effectiveness of a hello bar.

WPEngine website screenshot

WP Engine

WP Engine utilizes a bold color design and offers a tangible reward. This notification bar is made up entirely of a bold orange color, which makes the entire bar stand out. It appears on the WP Engine blog page and delivers a marketing message that sells WP Engine services based on multiple benefits: a 20% discount, faster sites, and improved conversions.

Personally, I suspect that the performance of this notification bar could be improved. If I worked with WP Engine I would want to perform A/B testing with two modifications to see if the performance of the notification bar could be improved.

  1. I would shorten and simplify the message. Selling three different features in one short message is too much.
  2. I would increase the font weight and size so that the message is easier to read.

My suspicion is that this particular hello bar would perform better with those modifications, and A/B testing could be used to identify the text and design that produced the best results.

ManageWP website screenshot

ManageWP

The hello bar at ManageWP takes things in an entirely different direction.

This notification bar is a hybrid design that includes site navigation nested in the notification bar. Much like WPMU DEV’s hello bar, this notification bar attempts to sell ManageWP services with a free trial. However, unlike both WPMU DEV and WP Engine, the ManageWP notification bar is very subdued and blends into the overall color scheme and design of the page.

Since ManageWP has blended the navigation bar into the notification bar, the use of a more subdued design makes sense. In this case, the notification bar exists as part of a core component of the site and not as a standalone marketing widget. Making it jump off the page is unnecessary when the functionality of the navigation menu will naturally draw attention to the message.

iThemes website screenshot

iThemes

The iThemes notification bar is a classic example of hello bar marketing. The design of the notification bar causes it to stand out from the rest of the page and the message it delivers is targeted and urgent.

Using a notification bar to deliver a time-sensitive message can be effective as long as it isn’t overdone. Use a notification bar to display a “special” or “limited-time” offer all of the time, and visitors will quickly catch on that the offer isn’t nearly as “special” as you’re making it out to be.

WPBeginner website screenshot

WP Beginner

And now for something entirely different.

The notification bar at WP Beginner takes things in a new direction and promotes new content rather than a product or service. Why is this? The answer has to do with the fact that WP Beginner is an entirely different kind of site than any of the others we’ve looked at so far.

At WPMU DEV, we don’t include any affiliate links in our blog posts. So, while we certainly want you to frequent our blog and read every post, we don’t make money when you read our blog and click on the links in our articles. We are a premium WordPress products company that just happens to have the best WordPress blog on the web. WP Beginner operates on an entirely different revenue model. Their goal is to drive the highest volume of traffic possible to their blog, keep those eyeballs on their blog for as long as possible, and get visitors to click on the affiliate links included in the posts and sidebars.

When you think about the WP Beginner business model, encouraging site visitors to visit other popular, click-inducing content makes a lot of sense. It keeps visitors reading (and clicking) for longer and increases their chances of earning a commission when you buy hosting or a WordPress product from a link on their site.

Hello bars occupy prime real estate on your website. Don’t use them flippantly. Use them to deliver important messages.

To be clear, I’m not criticizing WP Beginner. I point this out to make a related point: Use a notification bar to sell whatever it is that makes money for your business.

That’s the thing you need to take away from these is examples. What is your business built on? How does your website earn money? That is the thing you need to advertise with a notification bar.

  • Do you earn money with an email newsletter? Advertise your newsletter with a notification bar.
  • Do you earn money by selling products or services? Advertise those products and services with a notification bar.
  • Do you earn money with affiliate links embedded into blog posts and article? Advertise your most clickworthy content with a notification bar.

How to Add a Hello / Notification Bar

If you want to add a notification bar to your WordPress website, you’ve got quite a few options to consider. If you like knowing exactly what’s going on in your site’s code and have some basic HTML and CSS skills you could make your own. If you want more functionality, there are many notification bar plugins available from the WordPress Plugin Directory.

There are also several website marketing widget services such as Hello Bar, SumoMe, and GetSiteControl that integrate nicely with WordPress and offer notification bars and other website marketing widgets.

Roll Your Own

screenshot from tutorial on making your own css alert bar
Let Joshua Hibbert teach you How to Make a Pure CSS Alert Bar

Notification bars can be created with pure HTML and CSS. That means you can add one to a WordPress website by modifying just two files: header.php and style.css. As always, before making manual modifications to a WordPress website, always create a backup and set up a child theme.

If you’re already a competent front-end programmer you can check out right now and get to work. However, if you want a tutorial to walk you through the process of creating the notification bar, here are two options to consider:

Once you’ve created the notification, you can add it to your WordPress site by adding the relevant CSS to your theme’s style.css file and the HTML to your theme’s header.php file.

    Next Steps…

    There you have it. Eight different ways you can add a notification bar to your WordPress website that will help you achieve your conversion goals.

    So, what’s the next step?

    Before you jump into trying out some of these tools, take a few minutes to think through the goal you want to achieve with a notification bar. What is it you hope to accomplish?

    • Do you want to add email subscribers?
    • Do you want to drive traffic to a product landing page?
    • Do you want to let users know about an important announcement?

    It’s important to know what you want to accomplish before you start trying to figure out how to do it. Settle on your conversion goals, and then take the time to see if one of the tools we’ve presented can help you accomplish what you’ve set out to do.

    Editor’s Note: This post has been updated for accuracy and relevancy. [Originally Published: July 2016 / Revised: March 2022]

    This content was originally published here.