Learn how to create your first announcement bar with HashBar. This guide walks you through every step from navigating to the editor to publishing your first bar on your website.
Note: Features marked (PRO) require HashBar Pro. All other features are available in the free version.
Prerequisites
- WordPress 5.0 or higher installed
- HashBar plugin installed and activated
- Administrator access to your WordPress dashboard
Step 1: Navigate to Announcement Bar
From your WordPress dashboard, go to HashBar → Announcement Bar. You’ll see the announcement bar list page where all your bars are managed.
Click the “Create New” button to create your first announcement bar.
Step 2: Choose a Template
The editor opens with the Templates tab. Choose from 18 professionally designed templates to get started quickly.
Available Templates
| Template | Best For |
|---|---|
| Classic | General announcements |
| Sale Alert | Promotions and discounts |
| Free Shipping | Shipping threshold offers |
| Info Banner | General information |
| Countdown Sale | Time-limited offers |
| Coupon Display | Discount codes |
| Minimal Elegant | Clean, subtle messaging |
| Urgent Alert | Important notices |
| Holiday Special | Seasonal promotions |
| Limited Stock | Scarcity messaging |
| Trust Builder (PRO) | Social proof |
| New Launch (PRO) | Product launches |
| Premium Gold (PRO) | Premium offers |
| Summer Vibes (PRO) | Seasonal campaigns |
| Social Media (PRO) | Social engagement |
| Bundle Deal (PRO) | Bundle offers |
| VIP Exclusive (PRO) | VIP promotions |
| Early Bird (PRO) | Early-bird offers |
Tip: You can also start with a blank bar and design it from scratch. Simply skip the Templates tab and go directly to the Content tab.
Step 3: Add Your Content
Switch to the Content tab to configure your bar’s message and call-to-action button.
Message
- Type your announcement message in the text field (up to 500 characters).
- To add multiple rotating messages, click the “Add Message” button.
- Set the Rotation Interval (5-60 seconds) to control how quickly messages cycle.
Call-to-Action Button
- Toggle Enable CTA Button to show a button on your bar.
- Enter the Button Text (e.g., “Shop Now”, “Learn More”).
- Set the Button URL to the destination page.
- Choose whether the link opens in a new tab or the same window.
Step 4: Set Position
Go to the Position tab to control where and how your bar appears.
| Setting | Options | Description |
|---|---|---|
| Bar Position | Top / Bottom | Display the bar at the top or bottom of your page |
| Sticky | On / Off | Bar stays visible as visitors scroll |
| Close Button | Enable / Disable | Allow visitors to dismiss the bar |
| Close Position | Left / Right | Where the close button appears |
Tip: Enable sticky mode for maximum visibility. Your bar will stay at the top or bottom of the screen as visitors scroll through your page.
Step 5: Publish Your Bar
- Give your bar a title at the top of the editor (this is for your reference only and is not displayed on the frontend).
- Review your bar in the Live Preview panel at the top of the editor.
- Click the “Publish” button.
Your announcement bar is now live on your website! Visit your site’s frontend to verify it appears correctly.
Step 6: Customize Further (Optional)
Once your basic bar is running, explore additional tabs to enhance it:
| Tab | What It Does |
|---|---|
| Targeting | Control which pages, devices, and locations see your bar |
| Countdown | Add a countdown timer to create urgency |
| Coupon | Display a coupon code with one-click copy |
| Schedule | Set start and end dates for your bar |
| Design | Customize colors, fonts, backgrounds, and spacing |
| Animation | Add smooth entry and exit animations |
Quick Example: Sale Announcement Bar
Here’s a quick example to create a sale announcement bar:
- Select the “Sale Alert” template
- Change the message to: “Summer Sale! Get 25% off everything. Use code SUMMER25”
- Set button text to “Shop Now” and link to your shop page
- Position: Top, Sticky: On
- Go to the Countdown tab and set a Fixed Date timer to your sale end date
- Publish
Note: Make sure your sale end date is set correctly in the countdown timer. The timer will count down to this date in real-time for all visitors.
What’s Next?
Now that your first announcement bar is live, explore these guides to unlock more features:
- Announcement Bar Editor Guide – Complete tab-by-tab reference for every setting
- Countdown Timer Guide – Create urgency with Fixed, Evergreen, and Recurring timers
- Coupon Display Guide – Show discount codes with one-click copy
- Targeting & Triggers Guide – Control who sees your bar and when
- Analytics Guide – Track views, clicks, and conversions
- A/B Testing Guide – Test different bar variants to find the best performer (PRO)
- Use Cases & Recipes – Real-world examples with step-by-step configurations
That’s it! You’ve successfully created your first announcement bar with HashBar. If you need additional assistance, feel free to contact our support team.