How to Add a Notification Bar to Your WordPress Website: A Comprehensive Guide
Adding a notification bar to your WordPress website can highlight important messages, promotions, or announcements. In this tutorial, I’ll walk you through creating a custom notification bar that works seamlessly with WordPress.
Since I currently use the KadenceWP theme and Kadence Blocks on WebberZone, some of these instructions reflect their edits.
The screenshot below is what we used for our Black Friday sale. For this tutorial, we’ll create a notification to display on Boxing Day. We will use the Kadence Blocks Countdown block. Alternatively, you can use any other countdown block or countdown creator.
Prerequisites
Basic understanding of PHP and WordPress hooks
- A website running WordPress.
- Access to the theme’s
functions.phpfile or the ability to create a site-specific plugin. - A basic understanding of PHP and WordPress hooks.
Step-by-Step Implementation
1. Creating the Notification Bar Function
Add the following code to your theme’s functions.php file or in a custom plugin:
/**
* Add a Boxing Day notification bar.
*/
function add_boxing_day_notification_bar() {
// Skip on specific pages if needed.
if ( is_page( array( 42, 'about-me', 'Contact' ) ) ) {
return;
}
// Check if the notification is still valid.
$end_date = strtotime( '2024-12-26 23:59:59' );
if ( time() > $end_date ) {
return;
}
// Define the notification bar content.
$block_content = '
<div class="wz-notification-bar">
<div class="wz-notification-content">
<div class="wz-notification-countdown">
<!-- wp:kadence/countdown {"uniqueID":"8550_boxing_day","date":"2024-12-26T23:59:00","timezone":"Europe/London","timestamp":1735603200000,"timeOffset":0,"timeNumbers":true} -->
<div class="wp-block-kadence-countdown kb-countdown-container kb-countdown-timer-layout-block kb-countdown-has-timer kb-countdown-align-center" data-id="8550_boxing_day">
<div class="wp-block-kadence-countdown-timer kb-countdown-timer">
<div class="kb-countdown-item kb-countdown-date-item">
<span class="kb-countdown-number"> </span>
<span class="kb-countdown-label"> </span>
</div>
</div>
</div>
<!-- /wp:kadence/countdown -->
</div>
<div class="wz-notification-text">
<span class="wz-deal-text">
<strong>Boxing Day Mega Savings:</strong> Get 40% Off All Premium Plugins!
</span>
<span class="wz-code-text">
Use CODE: <strong class="wz-code">BOXINGDAY2024</strong>
</span>
<a class="wz-notification-button" href="https://www.webberzone.com/black-friday/">
Save Now
</a>
</div>
</div>
</div>
';
// Render the block and output it.
echo do_blocks( $block_content );
}
add_action( 'wp_body_open', 'add_boxing_day_notification_bar' );Let’s break down the above code:
- The
is_page()function in the above example checks if the pages are ID 42 or post_name ‘about-me’ or post_title “Contact”. This is useful for excluding pages where you don’t want the notification to appear. Delete this check if you want to display this across all pages. - We then set an end date for the sale and compared the current time to the end time of the sale. This automatically stops the bar from displaying after the specified date and time and prevents outdated promotions from showing.
- The
$block_contentassignment creates the HTML structure for the notification bar. It includes three main components:- Kadence Blocks‘ Countdown timer: I recommend creating this in the block editor and then copying the code.
- Deal description text: Tell your users what’s in it for them!
- Coupon code and call-to-action button: I’ve linked this to my deals page.
- Finally, we render the blocks using
do_blocks()and output them. add_action( 'wp_body_open', ... )hooks the function to display immediately after the<body>tag opens and ensures that the notification is displayed at the top of the page.
2. Add Styling for the Notification Bar
Include these styles in your theme by hooking into wp_head (as per code below) or with an external stylesheet that is enqueued using wp_enqueue_scripts. Alternatively, you can add custom CSS styles using Customiser > Additional CSS. Remember to minify the styles below in your production site.
/**
* Add custom styles for the notification bar.
*/
function add_notification_bar_styles() {
?>
<style>
.wz-notification-bar {
background-color: #0a0a0a;
color: #FFF;
width: 100%;
position: relative;
z-index: 999;
}
.wz-notification-content {
max-width: var(--theme-site-width, 1290px);
margin: 0 auto;
padding: 12px 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
text-align: center;
}
.wz-notification-countdown {
background: #fff;
border-radius: 10px;
color: #000;
}
.wz-notification-countdown .kb-countdown-container {
margin: 0 !important;
padding: 5px 10px !important;
}
.wz-notification-text {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.wz-code {
color: #FFBD59;
padding: 4px 8px;
border: 1px dashed #FFBD59;
border-radius: 4px;
}
.wz-notification-button {
display: inline-block;
background: #FFBD59;
color: #000;
padding: 8px 20px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
}
.wz-notification-button:hover {
background: #ffd08f;
color: #000;
transform: translateY(-1px);
}
/* Mobile Styles */
@media (max-width: 768px) {
.wz-notification-content {
flex-direction: column;
padding: 16px 20px;
gap: 16px;
}
.wz-notification-text {
flex-direction: column;
gap: 12px;
}
.wz-deal-text,
.wz-code-text {
display: block;
}
}
/* Kadence Countdown Timer Adjustments */
.wz-notification-countdown .kb-countdown-timer {
gap: 8px !important;
}
.wz-notification-countdown .kb-countdown-item {
background: transparent !important;
padding: 0 !important;
}
.wz-notification-countdown .kb-countdown-number {
font-size: 16px !important;
font-weight: bold;
}
.wz-notification-countdown .kb-countdown-label {
font-size: 12px !important;
text-transform: uppercase;
}
</style>
<?php
}
add_action('wp_head', 'add_notification_bar_styles');The above code:
- Creates a function to add custom CSS
- Hooks into
wp_headto inject styles into the page<head> - Uses responsive design principles
- Includes hover effects and mobile responsiveness
3. Optional: Add Body Class for Theme Adjustment
/**
* Add a body class when the notification bar is present.
*
* @param array $classes Array of body classes.
*
* @return array Updated array of body classes.
*/
function add_notification_bar_body_class( $classes ) {
$end_date = strtotime( '2024-12-02 23:59:00' );
if ( time() <= $end_date ) {
$classes[] = 'has-notification-bar';
}
return $classes;
}
add_filter( 'body_class', 'add_notification_bar_body_class' );The above code:
- Adds a CSS class to the
<body>tag when the notification is active. - Allows theme-specific adjustments (e.g., padding, layout).
- Provides additional styling flexibility.
4. KadenceWP: Disable Sticky Header
If you had enabled a sticky header, as I had, you would need to disable this. You can find this under Customize > Header > Sticky Header.
Key Considerations when adapting this to your WordPress site.
Customization Options
- Modify the background color
- Change the text and button styles
- Adjust the expiration date
- Add or remove elements as needed
Best Practices
- Keep the notification brief and clear
- Use contrasting colours
- Ensure mobile responsiveness
- Provide a clear call to action
Troubleshooting
- If the bar doesn’t appear, check:
- Correct hook placement
- PHP syntax
- Expiration date
- Conflict with other plugins
Advanced Techniques
- Use transients for performance
- Create an admin option to enable/disable
- Add cookie-based display logic
Compatibility
- Works with most WordPress themes
- Tested with Kadence theme
- Minimal impact on site performance
Conclusion
Adding a notification bar is a powerful way to communicate important information to website visitors. This method provides a flexible, customizable solution that can be easily adapted to various use cases.
