How to Build a Full Messaging Platform Using jetEngine, Elementor in Wordpress

How to Build a Full Messaging Platform Using jetEngine, Elementor in Wordpress
Description

Learn how to build a complete messaging platform in WordPress using JetEngine and Elementor. This comprehensive tutorial guides you through creating custom database tables, building message listings, designing message template pages, and developing forms for sending messages. Discover how to use query variables, query builders, dynamic visibility, and more to create a robust and dynamic messaging system. Perfect for developers and WordPress enthusiasts looking to enhance their site’s functionality.

CODE 1: GET USERMETA DATA BY ID

// Add custom callback for getting usermeta data by ID

add_filter( ‘jet-engine/listings/allowed-callbacks’, function( $callbacks ) {

$callbacks[‘my_jet_engine_get_custom_usermeta’] = __( ‘Get usermeta data by ID’, ‘your-text-domain’ );

return $callbacks;

} );

// Add arguments for the custom callback

add_filter( ‘jet-engine/listings/allowed-callbacks-args’, function( $args ) {

// Fetch usermeta keys from the database

$user_meta_keys = get_auto_user_meta_keys();

$args[‘user_meta_data_to_get’] = array(

‘label’ => __( ‘Usermeta Data to get’, ‘your-text-domain’ ),

‘type’ => ‘select’,

‘default’ => ”,

‘options’ => $user_meta_keys,

‘condition’ => array(

‘dynamic_field_filter’ => ‘yes’,

‘filter_callback’ => array( ‘my_jet_engine_get_custom_usermeta’ ),

),

);

return $args;

} );

// Modify dynamic field callback arguments

add_filter( ‘jet-engine/listing/dynamic-field/callback-args’, function( $args, $callback, $settings ) {

if ( ‘my_jet_engine_get_custom_usermeta’ === $callback ) {

$args[] = ! empty( $settings[‘user_meta_data_to_get’] ) ? $settings[‘user_meta_data_to_get’] : ”;

}

return $args;

}, 10, 3 );

// Custom function to get usermeta data by ID

function my_jet_engine_get_custom_usermeta( $user_id, $meta_key ) {

return get_user_meta( $user_id, $meta_key, true );

}

// Function to get auto usermeta keys

function get_auto_user_meta_keys() {

global $wpdb;

$usermeta_keys = $wpdb->get_col( $wpdb->prepare( “SELECT DISTINCT meta_key FROM $wpdb->usermeta” ) );

return array_combine( $usermeta_keys, $usermeta_keys );

}

CODE 2: GET USERMETA IMAGE BY ID

// Add a custom callback function ‘get_usermeta_image_by_id’ to the allowed callbacks for Jet Engine listings.

add_filter(‘jet-engine/listings/allowed-callbacks’, function ($callbacks) {

$callbacks[‘get_usermeta_image_by_id’] = __(‘Get usermeta image by ID’);

return $callbacks;

});

// Add a custom field to the dynamic field filter settings for the image callback.

add_filter(‘jet-engine/listings/allowed-callbacks-args’, function ($args) {

$args[‘user_image_meta_key’] = array(

‘label’ => __(‘Usermeta Image Key’, ‘jet-engine’),

‘type’ => ‘text’,

‘default’ => ”,

‘condition’ => array(

‘dynamic_field_filter’ => ‘yes’,

‘filter_callback’ => array(‘get_usermeta_image_by_id’),

),

);

$args[‘image_size’] = array(

‘label’ => __(‘Image Size’, ‘jet-engine’),

‘type’ => ‘select’,

‘default’ => ‘thumbnail’, // Set ‘thumbnail’ as the default size

‘options’ => array(

‘thumbnail’ => __(‘Thumbnail’, ‘jet-engine’),

‘medium’ => __(‘Medium’, ‘jet-engine’),

‘large’ => __(‘Large’, ‘jet-engine’),

‘full’ => __(‘Full’, ‘jet-engine’),

),

‘condition’ => array(

‘dynamic_field_filter’ => ‘yes’,

‘filter_callback’ => array(‘get_usermeta_image_by_id’),

),

);

$args[‘default_image’] = array(

‘label’ => __(‘Default Image URL’, ‘jet-engine’),

‘type’ => ‘text’,

‘default’ => ”,

‘condition’ => array(

‘dynamic_field_filter’ => ‘yes’,

‘filter_callback’ => array(‘get_usermeta_image_by_id’),

),

);

return $args;

});

// Add callback arguments for the ‘get_usermeta_image_by_id’ callback.

add_filter(‘jet-engine/listing/dynamic-field/callback-args’, function ($args, $callback, $settings) {

if (‘get_usermeta_image_by_id’ === $callback) {

$args[] = !empty($settings[‘user_image_meta_key’]) ? $settings[‘user_image_meta_key’] : ”;

$args[] = !empty($settings[‘image_size’]) ? $settings[‘image_size’] : ‘thumbnail’;

$args[] = !empty($settings[‘default_image’]) ? $settings[‘default_image’] : ”;

}

return $args;

}, 10, 3);

// Define the custom callback function ‘get_usermeta_image_by_id’ to retrieve and return image by meta key and size.

function get_usermeta_image_by_id($user_id, $meta_key, $image_size = ‘thumbnail’, $default_image = ”) {

$image_url = ”;

// Retrieve image URL based on the provided meta key

$image_data = get_user_meta($user_id, $meta_key, true);

if ($image_data) {

// Handle different image data structures, e.g., single ID, URL, or array of URLs and IDs

if (is_array($image_data)) {

// If it’s an array, get the first URL or ID

$first_item = reset($image_data);

if (is_numeric($first_item)) {

// If it’s an ID, get the image URL based on the selected size

$image_url = wp_get_attachment_image_url($first_item, $image_size);

} elseif (filter_var($first_item, FILTER_VALIDATE_URL)) {

// If it’s a URL, use it directly

$image_url = $first_item;

}

} elseif (is_numeric($image_data)) {

// If it’s a single ID, get the image URL based on the selected size

$image_url = wp_get_attachment_image_url($image_data, $image_size);

} elseif (filter_var($image_data, FILTER_VALIDATE_URL)) {

// If it’s a URL, use it directly

$image_url = $image_data;

}

}

// Use default image if no valid URL is obtained

if (!$image_url && $default_image && filter_var($default_image, FILTER_VALIDATE_URL)) {

$image_url = $default_image;

}

// Render the image only if a valid URL is obtained

if ($image_url) {

echo ‘<img src=”‘ . esc_url($image_url) . ‘” alt=”User Image”>’;

}

}

CODE 3: SCROLL TO AND REMOVE NOTIFICATION MESSAGE JETFORMBUILDER

<script>

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

function scrollToMessage() {

var message = $(‘.jet-form-builder-message–success, .jet-form-builder-message–error’);

if (message.length) {

// Scroll to the message

$(‘html, body’).animate({

scrollTop: message.offset().top – 100 // You can adjust the offset as needed

}, 500);

// Remove success message after 2 seconds

if (message.hasClass(‘jet-form-builder-message–success’)) {

setTimeout(function() {

message.fadeOut(500, function() {

$(this).remove();

});

}, 5000);

}

}

}

scrollToMessage();

var observer = new MutationObserver(function(mutations, obs) {

scrollToMessage();

});

observer.observe(document.body, {

childList: true,

subtree: true

});

});

</script>

How to Build a Full Messaging Platform Using jetEngine, Elementor in Wordpress
May 29, 2024
Participants
YouTube video
Play Video
Tags : JetEngine | JetFormbuilder
What you think about How to Build a Full Messaging Platform Using jetEngine, Elementor in Wordpress ?
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}