Add a Notification Bar on your WordPress Site without a Plugin

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.

New customers get $20 off your first year when you buy a Kadence bundle

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.

Black Friday Notification Bar on WebberZone

Prerequisites

Basic understanding of PHP and WordPress hooks

A website running WordPress.
Access to the theme’s functions.php file 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_content assignment creates the HTML structure for the notification bar. It includes three main components:
1. Kadence Blocks‘ Countdown timer: I recommend creating this in the block editor and then copying the code.
2. Deal description text: Tell your users what’s in it for them!
3. 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_scriptsOpens in a new window. 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_head to 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:
1. Correct hook placement
2. PHP syntax
3. Expiration date
4. 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.