How to Add A Custom Sticky Header Opt-in Bar on WordPress

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.
~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~*~~

Alert Your Readers and Capture Subscribers

 
With a Sticky Header Opt-in Bar (a.k.a Top Bar, Notification Banner or Hello bar) you can alert your readers of your current deals or display an opt-in or freebie for your email list. Share a quote of the day or other tidbit of information and grab the readers attention.
 
If you would prefer to add a WordPress plugin there are lots of options out there.
 
For example, the “Hello Bar” or “Sumo me” WordPress plugins are quite popular. You will need to sign up for an account with HelloBar or Sumome to set it up. A couple other plugin options “WP Notification Bar”, “Simple Banner” also came up in my search.
 
I have not tested or tried these plugins yet.
 
Adding an opt-in bar using a plugin tends to slow down your site loading speed.
 
Related: Add your own Cookie Notice on WordPress
(Also the Sticky Header bar is different on this post if you want to check it out live).
 

Adding the Custom Top Header Bar on WordPress

 
Before you start this tutorial, it is important to take a backup. If you don’t have a backup solution yet see this post for step-by-step instructions on setting up Updraft Plus to save your backup to your Google Drive account.
 
We will use the header/footer plugin to add the Custom Sticky Header Opt-in Bar to the top of your site. If you don’t currently use a header/footer plugin this code can be added directly to your footer.php file right before the closing body tag <body>. If you are not sure how to modify your theme files, see this post. The links open in a new tab so you won’t lose your spot here.
 

Here are some examples of how you can modify the notification banner.
This one would link to a landing page.
 
Example Top Bar Notification

A Subscription Prompt in Black
Top Bar Subscribe Prompt black

Here is an Subcription prompt to a landing page in Dark Red color
Red Notification Banner Example

You can see the Sticky Header Opt-in Bar live on our other site too. Abundant Blogger
 

Video Tutorial of Setting up the Custom Sticky Header Bar


 

Let’s get started

It may seem counter-intuitive but save this code in the footer.php file of your active theme before the ending body tag </body> or in the footer portion of a headers/footers plugin.

We save this code in the footer so that all elements of the post are loaded and available when the opt-in bar displays correctly on screen.

When you paste the Style and HTML portion of the code to the Snippet your security Plugin may give an alert to confirm it is you the admin making this change. see here for details

Install the Header Footer Code Manager Plugin if not already installed.

Then click on HFCM on your WordPress menu.

Then click on the Add Snippet button.

From this snippet, you can exclude specific pages or posts, or even specify specific categories or different posts/pages and have separate opt-in banners show on those pages. How neat is that!!

Fill in the snippet information like this to test on a specific Testing page, you will need to have this page published first.

Add snippet to test page first

Paste in the code below, modify the text and link(s) to what you want to display and click Save or Update.
 
I have highlighted the main parts you are likely to need to change below, a break down and explanation of the code is provided below.
 
 

<!-- wpba_topbar -->
<style>
.optin {
/* Height is currently set for one line of Text on the Sticky Header Banner */
/* To switch to one of the other heights add comment mark /* at the front of the line below, "1 line of text" */
/* Then remove the /* in front of the height you want to use.

/* 3 lines of text appear on largest screen */
  /* height: calc(75px + (85 - 75) * ((100vw - 300px) / (1600 - 300)));
/* 2 lines of text appear on largest screen */
  /*height: calc(80px + (60 - 80) * ((100vw - 300px) / (1600 - 300)));
/* 1 line of text appear on largest screen */
    height: calc(65px + (45 - 65) * ((100vw - 300px) / (1600 - 300))); /* */
}
/* id="optin" in css is #optin */
#optin {
   padding-top:5px;
   padding-left:5px;
   right:0;
   top:0;
   width:100%;
   z-index:9000;
   font-size:13px;
   background-color:darkgoldenrod; /* Optin bar color */
   color:#D3D3D3; /* Font color on Optin Bar if not a link/not h4 */
   text-align:center;
   position:fixed;
   padding-bottom:10px;
}
/* To target a specific h4 element on the page add the parent element like below ".optin" is the parent div. To style two or more elements the separate them with a comma like below */
.optin h4, .optin h4 a {
   color:#D3D3D3; /*h4 test and h4 link font color */
   z-index:10001;
   margin:0;
   font-family:arial;
   line-height:1;
   text-align:center;
   margin:10px 10px 0;
   font-size:calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
#optin-close {
   position:fixed;
   display:inline-block;
   right:5px;
   top:-8px;
   font-size:1.5em;
   z-index:10000;
   color:white; /* Close button × color */
   padding-left:10px;
}
</style>
<!-- Start the HTML Code -->
<div id="optin" class="optin" style="display:none;top:0;">
   <h4>
     <a href="/your-link/" target="_blank" rel="noopener">
       Thought of the day, "You miss every chance that you don't take"
     </a>
   </h4>
</div>
<div id="optin-close" onclick="close_wpba_topbar()">×</div><!-- wpba_topbar styles and html -->
<!-- wpba_topbar styles and html -->
<!-- wpba_topbar Script -->
<script>
//Setup Sticky Header Optin Bar
//Show the optin banner
   document.getElementById("optin").style.display = "block";
// Get the height of the banner and move the body of the post down to offset
   var divh = document.getElementById('optin').offsetHeight;
   document.getElementsByTagName("body")[0].style.paddingTop= divh + 'px';

window.onresize = function() {AdjustBannerOnResize()};
//On resize of the screen
function AdjustBannerOnResize() {
   var divh = document.getElementById('optin').offsetHeight;
   document.getElementsByTagName("body")[0].style.paddingTop= divh + 'px';
}

// Set a unique name for the session cookie in (also below) where it says topbar, if you have separate Optin bars, give each one a unique cookie name.
//If Session Storage is available to be used
if(sessionStorage){
   //Check if the user has closed the banner, keep it closed on all pages/refresh till session closes
   if (sessionStorage.getItem("topbar") !== null) {
     document.getElementById("optin").style.display = "none";
     document.getElementById("optin-close").style.display = "none";
     //Set this to the ID of the object at the top of the screen that was moved to show the banner
     document.getElementsByTagName("body")[0].style.paddingTop = "0px";
   }
}

//Close the Optin Bar
// Set a unique name for the session cookie here where it says topbar. If you have separate Optin bars, give each one a unique cookie name.
function close_wpba_topbar() {
   sessionStorage.setItem("topbar", "closed");
   document.getElementById("optin").style.display = "none";
   document.getElementById("optin-close").style.display = "none";
   document.getElementsByTagName("body")[0].style.paddingTop = "0px";
}
</script>
<!-- end wpba_topbar Script -->

Note: when looking at your sticky header the admin bar covers it when you are logged in to your site. If you go to Users on the WordPress menu, then select your account. Uncheck “show toolbar” to test without it showing. Then save. Just remember to re-enable it when you are done testing.
 
Uncheck show toolbar when viewing site to test optin bar
 
The HFCM plugin we are using will only allow us to select a specific page if it is published.
What I do is publish a testing page to use to test my changes. Set it to noindex, no archive and just use the direct link to access it.
 
Just don’t add your testing page to your menu – as you don’t want visitors to this page. Set that page as noindex so Google doesn’t show it on searches.
 

Then clear your caches and type your site into the browser address bar and confirm the Sticky Header Opt-in Bar notification displays as expected.
 

Once you’ve tested and are happy with the Sticky Header Opt-in Bar, set it live.

Here is an example of selecting to show the banner Sitewide – then you can select to exclude specific pages or posts; such as, your Policies pages.
HFCM Sitewide

 
 

 
 

Here is an example of selecting to show on specific categories like so:
HFCM Specific Categories

 
 

The break down and explanation

There are 3 parts to the Custom Sticky Header Opt-in Bar Notification you can use as is or modify as you see fit.

  1. The CSS Style
  2. The HTML code.
  3. The Javascript to make it work.

 

The CSS Style

The CSS style is used to set the size and branding colors.

Check out this site for a list of the CSS color codes.

 

<style>
.optin {
/* Height is currently set for one line of Text on the Sticky Header Banner */
/* To switch to one of the other heights add comment mark /* at the front of the line below, "1 line of text" */
/* Then remove the /* in front of the height you want to use.

/* 3 lines of text appear on largest screen */
  /* height: calc(75px + (85 - 75) * ((100vw - 300px) / (1600 - 300)));
/* 2 lines of text appear on largest screen */
  /*height: calc(80px + (60 - 80) * ((100vw - 300px) / (1600 - 300)));
/* 1 line of text appear on largest screen */
    height: calc(65px + (45 - 65) * ((100vw - 300px) / (1600 - 300)));
}
/* id="optin" in css is #optin */
#optin {
   padding-top:5px;
   padding-left:5px;
   right:0;
   top:0;
   width:100%;
   z-index:9000;
   font-size:13px;
   background-color:darkgoldenrod;
   color:#D3D3D3;
   text-align:center;
   position:fixed;
   padding-bottom:10px;
}
/* To target a specific h4 element on the page add the parent element like below ".optin" is the parent div. To style two or more elements the separate them with a comma like below */
.optin h4, .optin h4 a {
   color:#D3D3D3;
   z-index:10001;
   margin:0;
   font-family:arial;
   line-height:1;
   text-align:center;
   margin:10px 10px 0;
   font-size:calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
   line-height: calc(1em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
#optin-close {
   position:fixed;
   display:inline-block;
   right:5px;
   top:-8px;
   font-size:1.5em;
   z-index:10000;
   color:white;
   padding-left:10px;
}
</style>

 

The HTML code

 
The first div sets the Text of your alert or message for your reader. Add your link here if applicable.
 
The second div configures the closing × on the top right and sets javascript close_wpba_topbar() to run when the reader clicks the ×.
 

<!-- Start the HTML Code -->
<div id="optin" class="optin" style="display:none;top:0;">
   <h4>
     <a href="/your-link/" target="_blank" rel="noopener">
       Thought of the day, "You miss every chance that you don't take"
     </a>
   </h4>
</div>
<div id="optin-close" onclick="close_wpba_topbar()">×</div><!-- wpba_topbar styles and html -->

 

The Javascript code

This code

  • Sets the opt-in bar to display on the post.
  • Gets height of the opt-in bar
  • Sets the padding-top on the post body tag to same height as the opt-in bar

Setting the padding-top on the body tag moves your post content down so that the opt-in bar sits above your content, rather than over top.
 

<script>
//Setup Sticky Header Optin Bar
//Show the optin banner
   document.getElementById("optin").style.display = "block";
// Get the height of the banner and move the body of the post down to offset
   var divh = document.getElementById('optin').offsetHeight;
   document.getElementsByTagName("body")[0].style.paddingTop= divh + 'px';
</script>

This code resizes the opt-in if the window size changes (maximized or made smaller etc.) Try it now, resize the window on this post and see how it works.

<script>
window.onresize = function() {AdjustBannerOnResize()};
//On resize of the screen
function AdjustBannerOnResize() {
   var divh = document.getElementById('optin').offsetHeight;
   document.getElementsByTagName("body")[0].style.paddingTop= divh + 'px';
}
</script>

 

 
This code checks if the Sticky Header Opt-in Bar has been closed this session. If so, keeps it hidden till the browser is closed. If not, continues to display the notification banner.
 

Set a unique name for the session cookie if you use more than one Sticky Header Optin Bar on your site.

For example, if this is your main site wide sticky header, you could all your cookie swtopbar, remember to set the same name for both the session Storage and the close function on each optin bar.

<script>
//If Session Storage is available to be used
if(sessionStorage){
   //Check if the user has closed the banner, keep it closed on all pages/refresh till session closes
   if (sessionStorage.getItem("topbar") !== null) {
     document.getElementById("optin").style.display = "none";
     document.getElementById("optin-close").style.display = "none";
     //Set this to the ID of the object at the top of the screen that was moved to show the banner
     document.getElementsByTagName("body")[0].style.paddingTop = "0px";
   }
}
</script>

 

This code configures the Close button on the Sticky Header Opt-in Bar and sets a session cookie, so the banner stays closed if the visitor clicks an internal link.

 

<script>
function close_wpba_topbar() {
   sessionStorage.setItem("topbar", "closed");
   document.getElementById("optin").style.display = "none";
   document.getElementById("optin-close").style.display = "none";
   document.getElementsByTagName("body")[0].style.paddingTop = "0px";
}
</script>
</script>

 

Security Alerts when adding this code

 
You may see these alerts from your Security Plugin, confirming that it is you the admin making these changes, we use Wordfence.

Wordfence Firewall Rules info

 
You will need to Whitelist this action
 
HFCM Wordfence Notice

 
You’ll be prompted to click Continue to resubmit the form.
 
Confirm Form Submission click continue

Wordfence all set refresh

Then refresh the page, and click Save or Update again.

Did you Setup the Sticky Header Opt-in Bar?

Let us know in the comments if you’ve set this up on your site so we can take a look. Feel free to ask questions to suggest improvements.

You’ll find you’ll need to make adjustments to fit your site colors, font-size, banner size. But these are the steps to get started.

Hope this tutorial is helpful and that you enjoy it!

Got blogging questions? Join my Facebook group here WP Blogger Assist Questions Advanced WordPress user with coding knowledge? Advanced Coding on WordPress

Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

Leave a Reply

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