September 7, 2023

Internal WordPress Notification System with JetEngine, JetFormBuilder, and Elementor

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

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!


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

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 = "";
            $new_value = $cct_id;
            $new_value = $meta_value.",".$cct_id;
            $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 <>');
            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;

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:

jQuery(document).ready(function($) { 

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


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!

Required Resources

JetFormBuilder Logo
Free Options
JetEngine Logo
Payment required
Elementor Logo
Free Options
Credit to Moxet Khan
Moxet Khan is a YouTuber who specializes in solving complex WordPress scenarios with simple logic. He provides tutorials and walkthroughs on how to resolve various WordPress issues and challenges, such as fixing common errors, troubleshooting plugin conflicts, optimizing website performance, and more.
Internal WordPress Notification System with JetEngine, JetFormBuilder, and Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.