Internal WordPress Notification System with JetEngine, JetFormBuilder, and Elementor

So you’re interested in setting up an internal notification system on your WordPress site, huh? Great choice! Notifications are like little nudges that keep your users engaged. Today, we’re going to walk you through how to set up your very own WordPress Notification System using JetEngine, JetFormBuilder, and Elementor. Ready? Let’s dive in!

Pre-requisites

Before we jump in, let’s make sure you’ve got all the essentials:

• A WordPress site up and running
• JetEngine Plugin installed
• JetFormBuilder Plugin installed
• Elementor Plugin installed

Got all that? Awesome, let’s get started!

Understanding the Connection Between CCT and User Table for Member Notifications

First things first, let’s talk about how Custom Content Types (CCT) connect with the WordPress user table. In WordPress, the user table stores basic information like user ID, username, email, etc. We’re going to add an extra meta field called “notifications” to this table. This is where we’ll store the IDs of the notifications we create. This extra field acts like a special folder where all your member notifications will be stored.

Creating User Meta and CCT for an Internal Notification System

Now, let’s set up the infrastructure for our internal notification system. We’ll create a Custom Content Type (CCT) specifically for notifications.

1. Go to your WordPress dashboard.
2. Navigate to JetEngine > Meta Boxes.
3. Create a new text field and name it “notifications.”
4. Now go to JetEngine > Custom Content Types.
5. Create a new CCT and name it “notifications.”
6. Add a single field (called _Notification) to this CCT to store the notification content.

This CCT will act as the backbone for our internal notification system, storing all the messages you want to send out to your members.

Creating a JetForm and Hook

Next, we’ll create a form using Jet Form Builder. This form will have two fields: one for the notification content and another for sending it via email.

1. Navigate to JetFormBuilder in your WordPress dashboard.
2. Create a new form.
3. Add two fields: one for the notification content and another for email.
4. Add actions for inserting CCT and creating a hook.

Here’s a sample hook code snippet for your reference:

add_action( 'jet-form-builder/custom-action/send_notification', function( $request, $action_handler ) {
    
    $cct_id = $request['inserted_cct_notifications'];
    $email_notify = $request['email_notify'];
    $notification_details = $request['notification_details'];

    $users = get_users();
    
    foreach ($users as $user) {
        $user_id = $user->ID;
        $user_email = $user->user_email;
        $meta_value = get_user_meta($user_id, 'notifications', true); 
        $new_value = "";
    
        if(empty($meta_value))
        {
            $new_value = $cct_id;
        }
        else
        {
            $new_value = $meta_value.",".$cct_id;
        }
    
        if(!empty($email_notify))
        {
            $txt = "Hello, there is a new notification in the system with following content.<br/><br/>".$notification_details;
            $headers = array('Content-Type: text/html; charset=UTF-8','From: Dr. Wien <info@drwien.ae>');
            wp_mail( $user_email , "System Notification", $txt, $headers);
        }
    
        update_user_meta($user_id, 'notifications', $new_value); 
    }	

    
    
}, 10, 2 );



function get_data() {
    
    if (isset($_POST['new_meta_value'])) {
        
        $user_id = get_current_user_id(); 
        
        $new_meta_value = $_POST['new_meta_value'];
        $old_meta_value = explode(",", get_user_meta($user_id, 'notifications', true));

        $remove_notification_id = array_diff($old_meta_value, array($new_meta_value));
        $result = implode(",", $remove_notification_id);
        
        update_user_meta($user_id, 'notifications', $result); 
        return true;
        wp_die();
    }
}

add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );

Source: SoftEmblems

Designing Single CCT for Notifications

Time to give your notifications a makeover! We’ll use Elementor to design a template for each notification.

1. Go to JetEngine > Listing.
2. Create a new listing for your CCT and call it Single Notification.
3. Open it with Elementor and design your template.

This is where you can get creative. Add dynamic fields, style your text, and make your notifications stand out.

Implementing Dropdown Notifications

Let’s make these notifications easily accessible to your users. We’ll add a dropdown bar in the header where all the notifications will appear.

1. Open Elementor and go to your site’s header template.
2. Add a dropdown widget.
3. Configure the widget to display notifications by linking it to your CCT.

jQuery Code and Functionality

We’ll use some jQuery to make the notifications interactive. Specifically, we’ll allow users to mark notifications as read.

Here’s a sample jQuery code snippet:

<script> 
jQuery(document).ready(function($) { 
    

    $(document).on('click',".fa-check-circle",function () {    
        var cct_id =  $(this).siblings('.jet-listing-dynamic-field__content').text();
          
            jQuery.ajax({
            type: "post",
            dataType: "json",
            url: "/wp-admin/admin-ajax.php", 
            data: {
                action:'get_data', 
                new_meta_value: cct_id
            },
            success: function(response){
            location.reload();
        }
        });
     
    });

}); 
</script>

Source: SoftEmblems

Query Builder for Fetching Notifications

Finally, we’ll set up a query to fetch these notifications and display them to the user.

1. Go to JetEngine > Query Builder.
2. Create a new query and configure it to fetch notifications from your CCT.

Administration and User Experience

Last but not least, let’s test everything to make sure it’s working as expected.

1. Send a test notification from the admin panel.
2. Log in as a user and check if the notification appears in the dropdown.
3. Click the tick icon next to the notification to mark it as read.

Conclusion of this WordPress Notification System Tutorial

Congratulations, you’ve successfully set up an internal WordPress Notification System using JetEngine, JetFormBuilder, and Elementor! Now you can easily manage member notifications right from your dashboard. It’s a fantastic way to keep your users engaged and informed. Happy notifying!