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
Participants
