How to Implement a “Top Bar” in WordPress for Special Offers

Last updated on

A top bar is a great way to display persistent ads or special offers on your site without annoying your readers. Unlike regular advertisements which are lost when your user scrolls past them, the top bar “sticks” to the top (or bottom) of your site and is always present so it doesn’t get lost. This improves the chances of your audience noticing and clicking on it.

The real benefit? It’s great for mobile devices.

Normally, website owners have great trouble displaying advertisements on smartphones due to the lack of horizontal space. So all the offers in the sidebar are invisible on a responsive site. But with a top bar, we can take advantage of the relatively greater vertical space and use it to elegantly place an unobtrusive message at the top or bottom of the screen.

So let’s see how to implement a top bar in WordPress step by step. We’ll set it up, and configure some basic options – the rest is up to you to experiment!

Step 1: Install the “WP-TopBar” Plugin for WordPress

WP-TopBar is one of those rare plugins that’s completely free and does a great job with unlimited functionality. We’ll be using it to create our top bars. Start off by installing it from the plugin repository on your site by searching for it via the “Plugins->Add New” menu from the WordPress dashboard.

Install the Top Bar Plugin for WordPress

Once it’s installed and activated, it’s time to create our first top bar!

Step 2: Copy a Sample Top Bar and Open it

WP-TopBar comes with a few sample bars already built in. The best way to get started with a top bar is to take one of these samples and customize it. First, we find the new “WP TopBar” menu item on the left-hand side of the administration dashboard:

Access WP TopBar

In the resulting options screen, click the tab labeled “Sample TopBars” as shown here:

Copy Topbar Sample to Get Started

Here you’ll see a selection of top bar styles you can choose from. Pick one that seems closest to your taste and click the “Copy Topbar” link on the left-hand side as in the screenshot above. Once that’s done, click the tab “All TopBars” on the top left. You should now see the top bar you copied as one of the options.

Right now, the bar isn’t active. To get it kickstarted, we’re going to modify the text and link, and activate it afterward.

Step 3: Customize the Message and Link

Next to each top bar in the list, there’s a drop-down box labelled “Actions”. Click it and select “Main Options”:

Main Options for Selected Top Bar

This opens the primary options for the selected top bar. In our case, we want to modify the text and HTML so choose the tab labelled “TopBar Text & Image” like this:

TopBar Text & Image

There are a lot of options here. Too many to illustrate in detail. Luckily, most of them are self-explanatory. For now, we’re going to just modify the text and HTML. Scroll down the list of options until you see these two sections:

  1. Message
  2. Link Text and Link

Customize the Message and the Link

The content of the top bar is divided into these two components which are rendered separately. So for example, if you want to have a message that says:

Click here for [example.com] (link)

Then the message will be in two parts:

  1. “Click here for”
  2. [example.com] (link)

In the screenshot below, I use

  1. “This will be the text,” as the message
  2. “and this will be the link” as the anchor text
  3. https://www.example.com as the actual link

Once you’ve customized the message to read what you want, scroll all the way down and click “Update Settings” as shown here:

Update the Top Bar Settings

When the page reloads, you can see the preview of the bar and what it’ll look like before you actually activate it:

Preview the Top Bar

Now we need to adjust the scrolling options to ensure that it works the way we want it to.

Step 4: Adjust the Scrolling Options

By default, the TopBar has the following defaults:

  1. There is an initial delay of 5 seconds before it appears
  2. It appears regardless of scrolling. Which means that even if your visitors don’t scroll, they will see the top bar after the delay.

For my example, I want to change both these options. I want it to appear immediately on scroll with no delay. To do this, click the tab labeled “Main Options” and then scroll down to find the “Scroll Action” and “Start Delay” sections:

Adjust Scroll and Delay

Scroll Action On/Off

When “On”, it means the top bar will display only when the user starts scrolling the screen. When that happens, it will slide in from the chosen location. By default, it’s off – meaning that no scrolling is required.

When it’s on, the “Scroll Amount” determines how much the user needs to scroll before it appears.

Start Delay

This determines how long the system waits before the top bar appears. By default, it’s set to 5 seconds. In my example, I set it to zero – meaning that I want it to appear immediately.

When you’ve selected the options you want, go all the way down and update your settings.

Step 5: Activate the Top Bar on your Site

So far, the top bar hasn’t yet been enabled on your site. At the top of the page, you should see the following message:

“TopBar” is not enabled

To enable it, click the toggle button labeled “Enable TopBar” as shown here:

Enable the Top Bar

And now you can test your changes on the live site! Here’s how it works on my testing environment.

How to Implement a Top Bar in WordPress

And more importantly, here’s how it looks on a mobile screen:

Mobile View of TopBar

For me, this is the main benefit of the top bar. It looks very elegant on a mobile phone, thus solving the major problem of how to monetize content on a tiny device.

Additional Options of Styling, CSS, and Choosing When to Show

In this tutorial, I’ve shown you how to get started with the basic options of the top bar. But I’ve barely scratched the surface. There are a ton of other options that give you very fine control over how and where the top bar is displayed, including:

  1. Ability to show or hide on the homepage
  2. Advanced CSS styling
  3. Choosing whether the user can “close” the top bar
  4. Allowing the execution of PHP
  5. Showing Social buttons for sharing

And much, much more. Explore around and you’ll soon find the top bar an indispensable part of your site, and a vital aspect of your marketing campaign!

About Bhagwad Park

I've been writing about web hosting and WordPress tutorials since 2008. I also create tutorials on Linux server administration, and have a ton of experience with web hosting products. Contact me via e-mail!

Speak Your Mind

*