WordPress Top Bar Plugin: How to Add a Top Bar or Promo Bar in 5 Steps

A WordPress top bar plugin is the fastest way to add a promo bar or announcement banner to your site, with no coding. A top bar sits at the very top of every page, above your navigation, so visitors see it before they scroll a single pixel.

Unlike popups that interrupt and frustrate visitors, a top bar works passively. It creates urgency, communicates promotions, and drives action without blocking content or degrading the user experience.

In this step-by-step tutorial you will add a top bar to WordPress in 5 steps with wiseCampaign, a free top bar plugin from WordPress.org. Your promo bar will have a live countdown timer, a click-to-copy coupon code and a call-to-action button. Setup takes about 10 minutes and needs no code. Prefer code? There is a no-plugin method further down.

What you will build: A top bar like the ‘Eid Vibes, Extra Savings – Take 25% OFF’ banner below, complete with a live countdown timer, coupon code, and CTA button. Live on your site in about 10 minutes.

What is a WordPress top bar (promo bar)?

A top bar banner, also called a promo bar or announcement bar, is a full-width strip that appears at the very top of your website – above your header and navigation menu. It is one of the most effective conversion tools in WordPress because it is:

• Always visible — no scrolling required to see it
• Non-intrusive — it does not block content like a popup does
• Persistent — it follows visitors across every page of your site
• Clickable — visitors can take action directly from the bar

Top bar banners are used by ecommerce stores, SaaS companies, blogs, and agencies for a wide range of purposes:

Use case	Example top bar message
Flash sale promotion	Eid Sale – 25% off everything.
Countdown urgency	Limited offer – Hurry up!
Coupon code distribution	Use code EID25 at checkout
Important announcement	New address from April 1st
Lead generation	Get our free WooCommerce guide
Event promotion	Webinar this Thursday – register free

Why use wiseCampaign as your WordPress top bar plugin?

Most WordPress users trying to add a top bar either use a page builder like Elementor (which adds unnecessary overhead) or a plugin that only shows a line of text. wiseCampaign takes a different approach – it is a WooCommerce marketing toolkit, and its wiseBanner module is a full promo bar builder. The same plugin also includes these tools:

🎯 wiseBanner Top bar with countdown timers, click-to-copy coupons, CTA buttons and built-in analytics	🚪 Exit-Intent Popup A last-chance coupon popup when visitors are about to leave	🛒 wiseCart Side cart with a free shipping progress bar
⏳ StockBar Stock urgency bars on product and shop pages	💳 Direct Checkout Buy Now button that skips the cart page	📣 Sales Notifications Real-time purchase popups for social proof

All six tools are in the free version on WordPress.org. wiseBanner works on any WordPress site; WooCommerce is only needed to track the orders and revenue a banner brings in. wiseCampaign Pro (from $59/year) adds BOGO, bulk and spend-based discounts, seasonal banner templates, page targeting, sticky and bottom bars, and revenue analytics.

Current version: wiseCampaign 2.1.0 (November 2026). Click-to-copy coupon codes, free banner analytics (impressions, clicks, click-through rate and coupon copies) and a matching exit-intent popup are all part of wiseBanner.

What you need before starting

• A WordPress website (any theme)
• wiseCampaign installed — free from WordPress.org
• WooCommerce (optional) — only needed for order and revenue tracking
• A coupon code, if your bar shows one (in WooCommerce: Marketing → Coupons)
• 10 minutes

How to add a top bar in WordPress in 5 steps

Follow these five steps to have a live top bar banner on your WordPress site. After Step 1, everything happens in one editor with a live desktop and mobile preview.

Step 1 – Install and activate wiseCampaign

Go to WordPress Dashboard → Plugins → Add Plugin, search for wiseCampaign, click Install Now then Activate. A new WiseCampaign menu appears in your sidebar. wiseBanner is switched on by default; if you turned it off, switch it back on under WiseCampaign → Getting Started.

Step 2 – Open wiseBanner and choose a template

Click WiseCampaign → wiseBanner in your sidebar and make sure Banner (not Exit Popup) is selected at the top of the editor sidebar. Click Change Template, preview the designs and click Use Template.

• Free: 5 Basic templates — Ocean Gradient, Midnight Premium, Sunset Glow, BOGO Special and Hosting Promo
• Pro: 21 seasonal templates (Flash Sale, Halloween, Black Friday, Christmas, New Year, Valentine’s Day and Eid) with animated scenes, an offer badge and a close button

Step 3 – Add your message, coupon, countdown and CTA (Content tab)

Click the Content tab and fill in (everything here is free):

• Headline and optional Highlighted Words — e.g. Eid Vibes, Extra Savings!
• Sub-headline — e.g. Take 25% OFF across the store
• Coupon code — e.g. EID25. Visitors click the code to copy it. Place it at the top, bottom, left or right of the text.
• Countdown Timer — set the End Date & Time. Turn on Restart Countdown for daily or ongoing deals.
• Call to Action — Button Text and Button Link, e.g. Claim Your Discount pointing to your sale page
• Promotional Badge (optional) — text such as 50% OFF, or your own image

Step 4 – Style your top bar (Design tab)

Open the Design tab. Pick a gradient preset, a solid color or a background image, then set the headline and sub-headline font sizes and colors, the timer digit color, and the button colors and corner radius. The preview updates instantly; use the desktop/mobile icon at the top to check both views. Pro adds background effects (such as Snowflakes and Confetti) and button animations.

Step 5 – Choose where it shows, then save and go live

Click the Settings tab and choose:

• All Pages (free) to show the bar sitewide, or Specific Pages (Pro) such as the home page, Shop, Cart or Checkout
• Banner Position — Top (free) or Bottom (Pro)
• Sticky (Floating) Banner and a Close Button for visitors (Pro)

Click Save Changes in the top right; nothing goes live until you save. Then check that Banner Status at the top of the sidebar says Currently Active. If it does not, turn Banner Status on and confirm. Your banner is now live.

Quick tip: After activating your banner, open your site in an incognito window to see exactly what visitors see. Check both desktop and mobile views. Banner not showing? Check that Banner Status says Currently Active and that you clicked Save Changes, then clear your caching plugin’s cache.

Optional – Add a matching exit-intent popup

Click Exit Popup at the top of the wiseBanner sidebar to add a last-chance coupon popup for visitors who are about to leave. It runs alongside your top bar, shows at most once per visit and never on the checkout page. The popup is free with the Basic templates. See the exit-intent popup guide for details.

What your top bar can include – full feature breakdown

The wiseBanner editor gives you more control than most top bar plugins. Here is what you can add to your promo bar:

Countdown timer

The countdown timer is one of the most effective urgency tools available. Set an end date and time and the banner displays a live countdown of the days, hours, minutes and seconds remaining. When the timer reaches zero it shows 00 and the bar stays on your site, so switch the banner off when your sale ends, or use Restart Countdown for ongoing deals.

• Set any end date and time for your promotion
• Countdown displays in real time — no page refresh needed
• Restart automatically every few days, hours or minutes
• Add a label such as “OFFER ENDS IN:” and your own unit labels

Click-to-copy coupon codes

Rather than asking visitors to type a coupon code by hand, they click the code in the banner and it copies to their clipboard instantly. A short toast message confirms the copy so they know it worked.

• One-click coupon copy — no typing errors
• Visual confirmation after each copy
• Coupon copies are counted in Banner Analytics
• Free in every template

Call-to-action button

Every effective top bar needs a clear CTA. wiseCampaign lets you customize the button text, colors, corner radius and destination URL. Point it to a sale page, a specific product category or any other URL. Pro adds attention animations such as Pulse, Wobble and Bounce.

Gradient, color and image backgrounds

The background styling gives you full control over your banner’s appearance. Click one of the gradient presets, enter your own CSS gradient value for exact brand matching, or use a solid color or a background image.

Page targeting and position

In the free version the bar shows at the top of every page. With Pro you can show it only on the home page and the pages you pick (for example the cart page to reduce abandonment), move it to the bottom, make it sticky while visitors scroll, and add a close button. wiseBanner shows one banner at a time, so change the template and text whenever your campaign changes.

Built-in banner analytics

Click Analytics at the top of the editor and pick 7 days, 30 days, 90 days or 12 months. The free version shows impressions, clicks, click-through rate, unique visitors, coupon copies and dismissals. Pro adds orders, revenue and a conversion funnel (these need WooCommerce). Visits from administrators are not counted.

How to add a top bar in WordPress without a plugin (code)

If you only need a static text bar, you can add one with a few lines of code. Put the PHP in your child theme’s functions.php file or in a code snippets plugin, so a theme update does not remove it:

Copied!add_action( 'wp_body_open', function () {
	echo '<div class="my-top-bar">Free shipping on orders over $50 <a href="/shop/">Shop now</a>
</div>';
} );
add_action( 'wp_body_open', function () {
	echo '<div class="my-top-bar">Free shipping on orders over $50 <a href="/shop/">Shop now</a></div>';
} );

Then add this CSS under Additional CSS (Appearance → Customize in classic themes, or Appearance → Editor → Styles in block themes):

Copied!.my-top-bar { background: #111; color: #fff; text-align: center; padding: 10px 16px; font-size: 15px; }
.my-top-bar a { color: #ffd54a; font-weight: 600; margin-left: 8px; }
.my-top-bar { background: #111; color: #fff; text-align: center; padding: 10px 16px; font-size: 15px; }
.my-top-bar a { color: #ffd54a; font-weight: 600; margin-left: 8px; }

The wp_body_open hook prints the bar right after the opening body tag. Block themes and most classic themes released since WordPress 5.2 support it; if your theme does not, the bar will not appear. The code method has no countdown timer, coupon copy, scheduling or analytics, and you must edit code every time the offer changes. That is why most stores use a top bar plugin instead.

wiseCampaign top bar vs other methods – comparison

Feature	wiseCampaign	Code (wp_body_open)	Elementor	Hello Bar
Setup time	About 10 min	Quick for a static bar	30+ min	15 min
Coding required	None	PHP and CSS	None	None
Countdown timer	Yes — free	Custom JavaScript	Elementor Pro widget	—
Click-to-copy coupon	Yes — free	Custom JavaScript	Not built in	—
Order and revenue tracking	Pro (WooCommerce)	No	No	—
Page targeting	All pages free, selected pages Pro	Manual	Limited	Yes
Free version	Yes, no view limits	N/A	Limited	Up to 5,000 views/mo
Site speed impact	Minimal (unused modules not loaded)	Minimal	Heavy	External script
Additional tools included	Exit popup, side cart, stock bar and more	None	Page builder only	Popups, email capture

Want to compare dedicated plugins instead? We compare seven free and paid options in our guide to the best WordPress notification bar plugins.

Tips for a high-converting top bar banner

Setting up the banner is just the first step. Here is how to make it actually convert:

1. Be specific – not generic

Generic banners like ‘Welcome to our store’ convert poorly. Specific offers convert well. Instead of a vague message use:

Eid Sale – 25% off everything. Code EID25. Ends in 2 days 6 hours. Claim your discount.

The more specific your offer and deadline, the higher your conversion rate. Include the discount amount, the code, and the deadline – all in one banner.

2. Use real deadlines

A countdown timer that never reaches zero trains visitors to ignore it. Use real end dates. When the promotion ends, either turn off the banner or update it with your next promotion. Fake urgency damages trust; real urgency drives conversions.

3. Match your banner to the page

A 25% off clothing sale banner works on clothing product pages – but might be confusing on your contact page. With wiseCampaign Pro you can limit the bar to the home page and the pages you choose, such as Shop or Cart, so the offer always fits the page.

4. Keep the CTA button text action-oriented

Button text like ‘Claim Your Discount‘ converts better than ‘Click Here‘ or ‘Learn More‘. Use verbs that match what happens when they click: Claim, Shop, Get, Save, Start.

5. Test on mobile before going live

Many shoppers browse and buy on their phones. Use the mobile preview toggle in the wiseCampaign editor to check your banner looks right on small screens before you save it.

6. Measure, then improve

Open Banner Analytics after a few days. A low click-through rate usually means the offer or the button text needs work; few coupon copies can mean the code is hard to spot. Change one thing at a time and compare the numbers.

FAQ: adding a top bar in WordPress

Summary — your top bar checklist

Here is everything covered in this guide in a quick checklist format:

1. Install wiseCampaign from WordPress.org — free
2. Open WiseCampaign → wiseBanner in your dashboard
3. Click Change Template and pick a design that matches your brand
4. Set your headline and sub-headline text
5. Add a coupon code if applicable — visitors click it to copy it
6. Set the countdown end date (and Restart Countdown for ongoing deals)
7. Configure your CTA button text and link
8. Adjust colors and fonts in the Design tab
9. Choose where it shows in the Settings tab
10. Click Save Changes and check that Banner Status says Currently Active
11. Preview in an incognito window on desktop and mobile
12. Check Banner Analytics and improve your offer

Download wiseCampaign free from WordPress.org and have your top bar live in under 10 minutes. No coding. No monthly fees. No visitor limits.

Related guides: How to Promote Seasonal Sales with Top Bar Banners  |  How to Reduce WooCommerce Cart Abandonment  |  wiseCampaign vs OptinMonster

About wiseCampaign wiseCampaign is a free WooCommerce marketing plugin built by Wisemattic – a team of WordPress developers from Bangladesh building tools for WooCommerce store owners. It combines a top bar banner with countdown timer, an exit-intent popup, a side cart, stock urgency bars, direct checkout and sales notifications in one lightweight plugin, with BOGO and bulk discounts in Pro. Free download: wordpress.org/plugins/wisecampaign/  |  Pro: wisemattic.com/wisecampaign/