How to Put a Floating Ad Bar Strip on Your WordPress Site


Have you ever seen sites that have some type of ad running across the very top of their pages? And have you ever noticed that with many of them, even when you scroll down the page, those ad strips manage to stay right there at the top of the page?

Here’s a screen shot of Darren Rowse’s extemely popular Problogger.net site with such a “floating” ad. (And you know if Darren is using it, he’s tested its effectiveness.)

How to Make Your Own Floating Ad Strip

I went looking for a plugin that would do this for me, but I couldn’t find one suitable. All the ones that I found were either broken, or they had other issues (such as putting links into you site).

But not to worry, making your own is not so tough. It only takes three steps.

 

Step 1 – Put Your Info in Your Header File

In your header.php file (Appearance > Editor > Header – header.php), put whatever text or images you’d like to show up in your ad strip directly AFTER the following snippet of code:

</head>

You will need to put your info in a “div” so that you can style it in your CSS file. For example, I set up a link to go to an offer on my site in the following way. (You could put whatever you like here, even a image.)

 

<div id="top-strip">

<a href="http://www.mywebsite.com/my-ad/">Check Out My Offer</a>

</div>

 

Here’s what that code looks like in my actual file:


(Make sure you save the changes.)

 

Step 2 – Style Your Ad Strip

Next we’re going to style the ad strip. If you don’t style it, it won’t “float” when the user scrolls down the page, and it will just appear as a link on the far left side of your page like the following ….

Go into your stylesheet and place the following styles at the bottom of the page. You can play with these to get your bar looking the way you like. (Appearance > Editor > Stylesheet – style.css)

#top-strip {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  margin-bottom:15px;
  background-color: #FFFF99;
  color: #FFFF66;
  border-bottom: solid #000000;
  padding: 5px 0 5px 0;
  text-align: center;
  font-size: 12px;
  font-family: Verdana, Arial, Tahoma;
  font-weight: bold;
}

 

(Make sure you save the changes.)

 

Step 3 – Remove the Admin Bar

Finally, the last step is to remove the top Admin bar that shows up for logged in users. If you don’t remove this, then it will cover your ad strip if a user is logged into your site.

 

Remove the bar for everyone:

If you would like to simply remove the Admin bar for everyone, including the Administrator, then you can pop the following line of code into your functions file. (Appearance > Editor > Theme Functions – functions.php)

add_filter( ‘show_admin_bar’, ‘__return_false’ );

 

Remove the bar for only certain users:

If you would like to keep the admin bar active for certain users (such as for yourself – the administrator), then you can get a plugin that will allow you to do that.

There are a number of plugins that will allow you to do this. The WP Custom Admin Bar is one I found that does the trick nicely.

 

The Result

And here’s the result. You get a new Ad Strip Bar at the top of your page that will always stay at the top.

 

Photo: Outdoor advertising construction from BigStock