easythemestore

How to Add Real-Time Notifications in WordPress

How to Add Real-Time Notifications in WordPress

Real-time notifications improve user engagement, reduce bounce rates, and boost conversions by keeping visitors informed about new content, comments, purchases, or live updates. Whether you want to notify users about new blog posts, WooCommerce orders, or form submissions, WordPress offers multiple ways to implement real-time alerts.

Here’s a step-by-step guide on how to add real-time notifications to your WordPress site—no coding required (and a developer-friendly option).


Method 1: Using a Plugin (No Coding)

Best Plugins for Real-Time Notifications

1. PushEngage (Browser Push Notifications)

🔗 https://www.pushengage.com

  • Sends instant browser push notifications (even when users are offline).
  • Works for new posts, WooCommerce orders, and custom triggers.
  • GDPR-compliant & high delivery rates.

How to Set Up:

  1. Install PushEngage from WordPress.org.
  2. Connect your site to PushEngage (free plan available).
  3. Configure triggers (e.g., “Notify subscribers when a new post is published”). Our YouTube channel; https://www.youtube.com/@easythemestore

2. OneSignal (Free Push Notifications)

🔗 https://onesignal.com

  • Free unlimited notifications.
  • Supports browser & mobile app push alerts.
  • Easy REST API integration for custom events.

Setup Steps:

  1. Install the OneSignal plugin.
  2. Create a free OneSignal account.
  3. Enter your App ID & API key in plugin settings.

3. WS Form Notifications (Form Submission Alerts)

🔗 https://wsform.com

  • Real-time email/SMS alerts when a form is submitted.
  • Works with Twilio, Slack, and Zapier.

Example Use Case:

  • Get instant Slack alerts when someone fills out a contact form.


Method 2: Real-Time Chat & Notifications (For Logged-In Users)

Plugins for Live Alerts

4. Firebase for WordPress (WebSocket Notifications)

🔗 https://wordpress.org/plugins/firebase

  • Uses Google Firebase for real-time updates.
  • Great for live chat, bidding sites, or member notifications.

5. Pusher Notifications (WebSocket-Based)

🔗 https://pusher.com

  • Developer-friendly real-time alerts.
  • Works with custom PHP/JS events.

Method 3: Custom Code (For Developers)

Using WordPress Heartbeat API + AJAX

If you need custom real-time alerts, you can use:

  1. WordPress Heartbeat API (for logged-in users).
  2. Server-Sent Events (SSE) or WebSockets (for live updates).

Example: Simple Real-Time Notification System

  1. Enqueue JavaScript in functions.php:

    function real_time_notification_script() {
        wp_enqueue_script('real-time-notify', get_template_directory_uri() . '/js/notify.js', array('jquery'), '1.0', true);
        wp_localize_script('real-time-notify', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
    }
    add_action('wp_enqueue_scripts', 'real_time_notification_script');
  2. Create a PHP AJAX handler (checks for new updates):

    add_action('wp_ajax_check_notifications', 'check_notifications_callback');
    add_action('wp_ajax_nopriv_check_notifications', 'check_notifications_callback');
    
    function check_notifications_callback() {
        $last_checked = $_POST['last_checked'];
        $new_posts = new WP_Query(array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'date_query' => array(
                'after' => $last_checked,
            ),
        ));
    
        if ($new_posts->have_posts()) {
            echo json_encode(array('new_posts' => true));
        } else {
            echo json_encode(array('new_posts' => false));
        }
        wp_die();
    }
  3. JavaScript (notify.js) to poll for updates:

    jQuery(document).ready(function($) {
        setInterval(function() {
            $.post(ajax_object.ajax_url, {
                action: 'check_notifications',
                last_checked: new Date().toISOString()
            }, function(response) {
                if (response.new_posts) {
                    alert('New post published!');
                }
            });
        }, 30000); // Check every 30 seconds
    });

Final Thoughts

Best Solution Based on Your Needs:

Use CaseBest Plugin/Method
Browser push alertsPushEngage / OneSignal
WooCommerce order alertsWooCommerce Webhooks
Form submission alertsWS Form + Zapier
Logged-in user notificationsFirebase / Heartbeat API
Custom real-time updatesWebSockets (Pusher)

Pro Tip: Combine push notifications + email alerts for maximum reach.

🚀 Start engaging users in real-time today!