Custom Code to Add a Notification Bar in WordPress

Solution for Adding a Notification Bar

Custom Code Solution

Here's a complete solution to add a notification bar using WordPress hooks. This code creates a sticky notification bar at the top of your site:

Add this code to your theme's functions.php file or a site-specific plugin:

function add_notification_bar() {
    $message = 'Your announcement message here'; // Change this message
    $bg_color = '#e74c3c'; // Change background color
    $text_color = '#ffffff'; // Change text color
    
    echo '<div id="notification-bar" style="background-color: ' . esc_attr($bg_color) . '; color: ' . esc_attr($text_color) . ';">
        <div class="notification-content">' . esc_html($message) . '</div>
        <span class="close-notice">×</span>
    </div>';
}
add_action('wp_body_open', 'add_notification_bar');

Add this CSS to your theme's stylesheet or Customizer's Additional CSS:

#notification-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    text-align: center;
    z-index: 9999;
}

.notification-content {
    max-width: 1200px;
    margin: 0 auto;
}

.close-notice {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

body.admin-bar #notification-bar {
    top: 32px;
}

Add this JavaScript to your theme's footer or enqueue it properly:

function add_notification_bar_script() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const closeButton = document.querySelector('.close-notice');
            const notificationBar = document.getElementById('notification-bar');
            
            if (closeButton && notificationBar) {
                closeButton.addEventListener('click', function() {
                    notificationBar.style.display = 'none';
                });
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_notification_bar_script');

Making it Dynamic

To make the message changeable from WordPress admin, add this to functions.php:

function register_notification_settings() {
    register_setting('general', 'notification_message');
    add_settings_field(
        'notification_message',
        'Notification Bar Message',
        'notification_message_callback',
        'general'
    );
}
add_action('admin_init', 'register_notification_settings');

function notification_message_callback() {
    $message = get_option('notification_message');
    echo '<input type="text" name="notification_message" value="' . esc_attr($message) . '" class="regular-text">';
}

Then update the notification bar function to use the saved message:

function add_notification_bar() {
    $message = get_option('notification_message');
    if (empty($message)) return;
    
    $bg_color = '#e74c3c';
    $text_color = '#ffffff';
    
    echo '<div id="notification-bar" style="background-color: ' . esc_attr($bg_color) . '; color: ' . esc_attr($text_color) . ';">
        <div class="notification-content">' . esc_html($message) . '</div>
        <span class="close-notice">×</span>
    </div>';
}

Plugin Alternative

If you prefer using a plugin, here are reliable options:

1. Hello Bar - Free with premium features
2. WP Notification Bar - Simple and lightweight
3. Simple Notice Bar - Basic but effective

These plugins offer additional features like:

• Multiple notification types
• Scheduling
• Device targeting
• Analytics
• A/B testing (premium versions)