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.
More from this author
- 9 of the Best WordPress Portfolio Plugins
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 on 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
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 centred 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.
