Creating a Hello Bar with WordPress

Email lists are powerful. In a world crowded with a plethora of social networks, from Facebook to Snapchat, email is still one of the most powerful marketing channels.

Giants like Kissmetrics, Buffer, Michael Hyatt, and Jeff Goins agree that building and marketing to an email list is one of the best moves you can make for your brand. But actually doing that is much easier said than done. If you’ve tried to collect emails from your site, you know how slow of a process it can be.

You might have heard of Hello Bar. It creates a thin bar at the top of your site that spans the screen’s length. Readers can conveniently enter their email into the opt-in box.

It sounds simple, and it is, but that’s why it works. If you use the Hello Bar right, you can get a jaw-dropping amount of emails. The numbers are crazy, Derek Halpern at DIYThemes got 1,180 emails in a month (He posted more about it on Social Triggers).

The only downside is the click limit for free users. If you use the free Hello Bar, you’ll have a 100-click limit on your bar. That means you won’t be able to collect 101 emails without upgrading. There’s also a watermark that doesn’t go away without a Pro plan. While their paid plans are reasonably priced, you don’t need to upgrade because you can build your own Hello Bar for free.

With a little basic WordPress manipulation, you can create your very own Hello Bar clone. Those giants I linked to earlier don’t necessarily love Hello Bar, they love the Hello Bar concept. And you can build that same concept for absolutely no cost. You can also integrate it with your email marketing service. I’ll be showing you how to integrate it with MailChimp.

If you’re a WordPress novice, fear not––all you have to do is install a couple of plugins and change some settings. It’s that simple, and the result is a nice, appealing top bar in the Hello Bar style that you can modify to your heart’s content.

And for those who favor more versatility in the way of coding, we’ll also go over how to code a bar from scratch. But even that’s not complicated.

So if you’re ready, let’s get started.

Creating a Top Bar in WordPress

1) Get your tools ready.

To do this project, you’ll need the following:

• WordPress account
• MailChimp account
• The MailChimp for WordPress plugin
• The MailChimp Top Bar plugin

2) Connect WordPress and MailChimp.

Go to your dashboard and open the MailChimp for WordPress plugin. You should see a section titled MailChimp API Settings. In this area, there’s a small link underneath the API Key box that reads “Get your API key here.” Click on that link and log in to your MailChimp account.

Now click “Create a Key.” Your API key should now show up on the page. Highlight it and copy it to your clipboard.

Head back to the MailChimp for WordPress plugin. Enter your key into the API Key box and save your changes. Your WordPress and MailChimp are now connected.

3) Modify your top bar.

Now we’ll get to the good stuff. Navigate to the Top Bar plugin, which appears beneath the “MailChimp for WP” heading on the left sidebar. One of the best elements of this plugin is its simplicity. You don’t have to mess with any forms; it’s quite literally plug and play.

Once you click on the Top Bar plugin, you’ll see the Bar Settings. Here, you can modify what your bar will say. You can change the bar text, the button text, and the email placeholder text.

You can also select which list you want the submitted emails to go to. This comes in handy if you need a devoted email list solely for your site signups or if you want to segment your lists.

Now head over to the Appearance tab. While this menu doesn’t have a lot of options, it does have a lot of power. You can position your bar to be at the top or the bottom of the page. For true Hello Bar style, you’ll want to position it at the top.

You can also change the size of the bar. The largest size is the closest to the size of a Hello Bar, and it also provides the most visibility. Surprisingly, it’s not obtrusive. Finally, you can modify colors and decide if you want a sticky bar.

On the Messages menu, you can change the wording of the different messages your new subscriber will receive, like a success message. You can also redirect the subscriber to a page upon subscribing. This is extremely useful if you’re funneling your subscribers to a landing page or a free offer that you included as a signup bonus.

To make your last few tweaks, go to the Advanced menu. Choose whether or not you want your subscribers to double opt-in (which is highly recommended). The second option gives you the ability to update existing subscribers whenever someone new signs up. For obvious reasons, leave this one at “no.”

Save all of your changes, and head to your homepage!

4) Test everything out and make any final changes.

Sign up for your own list, and make sure everything works properly. Are you redirected to the right page? Does your email show up in your MailChimp account? If so, you’re good to go! Your Hello Bar-style bar is now ready to build your email list.

Creating a Top Bar With Code

The most obvious advantage of creating a Hello Bar-style top bar from scratch is the flexibility. You can add CSS and JavaScript to modify the bar and add extra elements like animation. This is also a simple process, so even if you’re afraid of code, you can do this.

1) Set up your MailChimp form.

There’s a little bit of extra work required here. Instead of the Top Bar plugin handling the form creation, you’ll have to do it yourself.

In your WordPress dashboard, hover over the MailChimp for WP heading and choose “Forms” from the menu that appears. Title your form, choose a corresponding list, and click “add new form”.

On the next screen, you’ll be able to edit your form. You can edit the code directly, and there’s also menus for Messages, Settings, and Appearance. This is similar to the Top Bar plugin.

For this example, we’ll be using a simple form:

<input type="email" name="EMAIL" placeholder="Your email address" required />

<input type="submit" value="Sign up" />

Once you’ve set up your menu the way you want it, click “get shortcode.” It’s right under the name of your form. The shortcode will pop up; copy it to your clipboard.

2) Edit the HTML.

Hover over the Appearances heading in the sidebar and select Editor. From here, you’ll want to go to the header.php file for your theme.

You’ll want to figure out where to place your form in the code. I placed mine right before the closing </head> tag. Note: I used the Twenty Sixteen theme for experimenting, but any theme will work.

Here’s the code I used:

<div class="page-header">

<center>

< ?php echo do_shortcode('[mc4wp_form id="53"]'); ?>

</center>

</div>

This increases the page header so there’s enough room for the form. It then inserts the form via the PHP function do_shortcode(). Finally, I centered the form for a nice aesthetic.

The MailChimp shortcode will be unique for each user, so it won’t always read mc4wp_form id=“53” because the number ID will be different. Just paste your unique shortcode inside those brackets, and you’ll be good to go.

3) Edit the CSS.

Next, in the style.css file, I modified the page header simply, as follows:

.page-header {
    height: 100px;
}

And that’s it. The result is a functional yet rough top bar for your site. It’s not complete, but it’s the basic framework for you to experiment with. You can almost endlessly customize it with CSS and JavaScript, and if you want to do that, check out this article by Daymuse.

Conclusion

Whether you choose to go with the basic WordPress version or the more customizable code version, you can have a shiny new top bar within a few minutes. Now you can get all the benefits of a Hello Bar without the cost.

And if you’re looking for a completely free, dynamic bar that comes ready to go, check out our very own Random Hello Bar plugin (you should be seeing it in action right now).

No matter which route you choose to go, there’s no doubt that a top bar is one of the best marketing tools for your site or blog. Get one today, and you could be seeing spectacular results before you know it.

Frequently Asked Questions about Creating a Hello Bar with WordPress