How To Add A Top Bar Mailchimp Opt-In

MailChimp Top Bar Opt-In for WordPress
A top bar email sign up is a nice way to boost your opt-ins without being overly obnoxious. Especially with the current trend toward one column blogs, without a sidebar, it’s a great solution for making an opt-in prominent without being an eyesore. Here’s an example of what I’m talking about:

Top Bar Email Opt In

I wanted to add a top bar email opt in to a site and was prepared to have to research and test a few plugins, maybe fiddle with some styles and generally sink a little bit of time into the whole endeavour.

However I was able to get the job done in less than 15 minutes thanks to a couple of wondrous plugins.

You will need:

How To Set Up Your Top Bar

  1. Install & activate MailChimp for WordPress
  2. Install & activate MailChimp Top Bar
  3. Go to the MailChimp for WP settings and connect the plugin with your MailChimp account:
    MailChimp API
  4. Then make sure your MailChimp lists are displayed below, click Renew Lists if not
  5. Go to MailChimp for WP > Top Bar to configure your opt-in.
  6. The options are very intuitive, but make sure you set the following:
    • Select which MailChimp list sign ups should go into.
      top bar - choose MailChimp list
    • Go to the Appearance tab to choose a color scheme to match your site.
      MailChimp Top Bar
    • Position: Top is the default but you can have it at the bottom instead
  7. Hit Save – Boom! The bar is on your site!

mailchimp top bar

So what’s the catch?

Ah, cynical are we?
If you’re looking for one, you may consider the fact that it only includes the email field as a catch. However you can add an extra field with a small amount of code.

But that’s about it. I love the fact that this plugin does one thing and does it well – it’s easy to use, looks good and is very lightweight.
Overall, a quick, painless way to boost your email list.

Weekly WordPress Tips To Your Inbox

  • This field is for validation purposes and should be left unchanged.

This Post Has 5 Comments

  1. Sarah

    Got stuck at first hurdle, cos the mailchimp plugin says WordPress.Org and I’m on wp.com.

    Have I misunderstood?

    1. Lucy

      Indeed, this is specifically for self-hosted WordPress, not WordPress.com

  2. KDBY

    Thank you for this post. I have tried multiple time to insert the attached code to my functions.php file, but I’m curious if there is a particular area I should paste the text in this file – because sometimes the code text shows up on my homepage by the top bar, and other times I can’t even visit my site (the screen is just white).

    Do you have a suggestions or clues as to why this may be happening and how I can successfully add the first name field to my top bar?

    Thank you again,
    KDBY

    1. Lucy

      It sounds like you’re certainly pasting it in the wrong place, and/or that something is wrong with your code.
      You should be able to put it at the bottom of your functions.php. If the file has a closing PHP tag: ?> then your code should go before that.
      A safer method might be to use the My Custom Functions plugin, since if your code would cause a white screen (due to an error in the code), it will warn you.

  3. Rael Hall

    Thanks Very helpful

Leave a Reply

Your email address will not be published. Required fields are marked *