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:
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
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:
< ?php echo do_shortcode('[mc4wp_form id="53"]'); ?>
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:
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
How can I customize the design of my Hello Bar in WordPress?
Customizing the design of your Hello Bar in WordPress is quite simple. You can change the color, font, size, and even the message of your Hello Bar. To do this, go to the settings of your Hello Bar plugin. Here, you will find various options to customize the design. You can choose a color that matches your website’s theme, select a font that is easy to read, and write a compelling message that will attract your visitors. Remember, the goal is to make your Hello Bar as attractive and engaging as possible.
Can I use Hello Bar on a non-WordPress website?
Yes, you can use Hello Bar on a non-WordPress website. Hello Bar is a versatile tool that can be used on any website, regardless of the platform it is built on. To install Hello Bar on a non-WordPress website, you will need to add a piece of code to your website’s header. This code can be found on the Hello Bar website after you create your account and customize your bar.
Is Hello Bar mobile-friendly?
Absolutely! Hello Bar is designed to be fully responsive, meaning it will adapt to any screen size, including mobile devices. This ensures that your visitors will have a consistent experience, regardless of the device they are using to access your website.
Can I track the performance of my Hello Bar?
Yes, you can track the performance of your Hello Bar. The Hello Bar dashboard provides detailed analytics that show how your bar is performing. You can see how many times your bar has been viewed, clicked, and even how many leads it has generated. This data can help you make informed decisions about how to improve your Hello Bar and increase its effectiveness.
How can I add a call-to-action button to my Hello Bar?
Adding a call-to-action button to your Hello Bar is a great way to encourage your visitors to take a specific action, such as signing up for a newsletter or purchasing a product. To add a call-to-action button, go to the settings of your Hello Bar plugin and select the ‘Button’ option. Here, you can customize the text, color, and link of your button.
Is it possible to schedule my Hello Bar?
Yes, it is possible to schedule your Hello Bar. This feature allows you to set specific times and dates for your bar to appear on your website. This can be particularly useful if you want to promote a time-sensitive offer or event.
Can I use Hello Bar to collect email addresses?
Yes, you can use Hello Bar to collect email addresses. This is a great way to build your email list and stay in touch with your visitors. To do this, simply add a form to your Hello Bar and connect it to your email marketing service.
Is Hello Bar compatible with all WordPress themes?
Yes, Hello Bar is compatible with all WordPress themes. However, if you encounter any issues, it’s recommended to reach out to the support team of your theme or the Hello Bar plugin for assistance.
Can I use Hello Bar for free?
Yes, there is a free version of Hello Bar available. However, the free version has limited features compared to the premium version. If you need more advanced features, you might want to consider upgrading to the premium version.
How can I uninstall Hello Bar from my WordPress website?
Uninstalling Hello Bar from your WordPress website is as simple as deactivating and deleting the plugin. To do this, go to your WordPress dashboard, click on ‘Plugins’, find the Hello Bar plugin, click ‘Deactivate’, and then ‘Delete’.