Above Header Bar – Email Signup, Social Links & more

$5

A simple above header widget area displaying in any theme header, with custom styling options for adding your email signup, social links, shop cart, navigation menu and more.

Instant Access
| Questions? Ask Here
Categories: ,

Easily add a widget area above your WordPress website header if it’s not included in your current theme (it also works if you already do and want to add an extra section). With Above Header Bar, you can add up to three widgets inline above your header to display:

  • Social links
  • Email signup form
  • Navigation links
  • Shop cart
  • and more

Fully responsive and comes with a custom options page so you can change the background color, text color and links colors easily. By default, if your theme header is sticky the Above Header Bar will also automatically be sticky.

You’ll be able to add and display up to three widget areas inside the Above Header Bar from any of the widget types available inside your site.

Adding an email sign-up form is as simple as adding a custom HTML widget, and pasting in your cleaned up, raw form code from Mailchimp, ConvertKit or any other email provider so long as you have the email embed code. See the documentation tab for further information on how to get the embed codes.

This plugin works with any theme with a <header> section, which 99% of WordPress websites have. To check that yours does have a <header> section, inspect your website page on Chrome and look for: <header> inside the <body> section, like this:

ps. if it’s there, the new section will appear above the highlighted section named <header>

Sold at a one-time cost of just $5 with access to any updates from your account – essentially you’re buying me a cup of coffee 😉

Documentation

Installation
  1. Download the plugin in your account, under downloads.
  2. Once you’ve downloaded the plugin files, navigate to your WordPress admin dashboard > plugins > add new > upload plugin.
  3. Customize your Above Header Bar with the plugin options page, selecting your background color, text color and links color.
  4. Navigate to your site’s Customize panel or under Appearance > Widgets to add your email signup, social links or other content. Once You add content, the Above Header Bar will display.
Setting up your email signup form
  1. Go to your website administration dashboard > Appearance > Customize or Appearance > Widgets
  2. Add a Custom HTML widget to the Above Header Bar widget area (see image)
  3. Paste in your email service provider’s raw form HTML code (see below for how to get this) – the plugin will style the form to fit within your website theme.
How to get your raw email HTML code
For Mailchimp –
  1. In your Mailchimp account and under your list, go to Audience > Signup Forms > Embedded Forms
  2. Copy the full form code and paste it into a text editor (TextEdit for example – avoid Word as it formats the text)
  3. In your text editor, search for “form action”.
  4. This line of the code will have a URL in it starting https:// – copy the entire URL (see screenshot here)
  5. Download this (your clean form code) and open it in a text editor.
  6. In the file, replace YOUR FORM ACTION URL with the form action URL you copied in step 4.
  7. This is now the code to paste inside the HTML widget – you can modify the text shown by editing the HTML, making sure to keep the formatting.
  8. To remove a field, remove the line the field is on.
For ConvertKit –

  1. Go to your ConvertKit account >Landing Pages And Sign Up Forms > your form > Embed > HTML
  2. Copy the form HTML code & find your form action URL
  3. Find your form ID by searching for data-sv-form on the <form> line
  4. Find your unique ID by searching for data-uid on the <form> line
  5. Download the clean form code here.
  6. Replace YOUR FORM ACTION URL with your form action URL
  7. Replace YOUR FORM ID with the form ID
  8. Replace YOUR UNIQUE ID with your unique ID
  9. This is now the code to paste inside the HTML widget – you can modify the text shown by editing the HTML, making sure to keep the formatting.
  10. To remove a field, remove the line the field is on.
For Drip –

  1. Go to your Drip account > Forms > your form > Design > Embedded
  2. Copy the form HTML code & find your form action URL
  3. Download the clean form code here
  4. Replace YOUR FORM ACTION URL with your form action URL
  5. Replace YOUR FORM ID with the form ID provided in Drip (see the instructions under the embed code)
  6. This is now the code to paste inside the HTML widget – you can modify the text shown by editing the HTML, making sure to keep the formatting.
  7. To remove a field, remove the line the field is on.
For MailerLite –

  1. Go to your MailerLite account > Forms > your form (or direct to embed code)
  2. Copy the form HTML code & find your form action URL
  3. Find your form ID by searching for data-code on the <form> line
  4. Download the clean form code here
  5. Replace YOUR FORM ACTION URL with your form action URL
  6. Replace YOUR FORM ID with the form ID
  7. This is now the code to paste inside the HTML widget – you can modify the text shown by editing the HTML, making sure to keep the formatting.
  8. To remove a field, remove the line the field is on.

Is your email service provider not in this list? Contact me

FAQs

How do I access my purchase?

Directly in your account after checkout (see the “My Account / Login” link at the top left of the page). During checkout, you’ll create an account so you can always access your purchases whenever you want.

How long do I have access to my purchases?

Forever sound good? Once you’ve registered you’ll have access for as long as you retain your account on this website and the website is live. I don’t plan on going anywhere so you have all the time you need.

What support do you offer after purchase?

You’ll be able to ask for help if you get stuck, and I do all I can to make it so it doesn’t get to that, to begin with. I work hard to create items, courses and templates that are easy to use and to provide everything you need.

If I change my mind – can I get a refund?

Due to the fully digital nature of these products we cannot provide refunds. Please ask any questions you may have about this product before purchase to make sure it’s the right fit for you and your business.

Haven’t found the answer you were looking for? Email here

Reviews

There are no reviews yet.

Be the first to review “Above Header Bar – Email Signup, Social Links & more”

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

Pin
Share
Tweet
Buffer
Email