Okay, here's a WordPress plugin structure that provides a basic user-to-user messaging system using Vue.js 3 (Options API) and Bootstrap 5.3. This plugin will: 1. Create necessary database tables on activation. 2. Provide a shortcode `[user_messaging_interface]` to display the messaging UI. 3. Use AJAX to communicate between the Vue frontend and WordPress backend. 4. Allow logged-in users to search for other registered users. 5. Allow users to compose and send messages to selected recipients. 6. Display received messages in an inbox view. 7. Mark messages as read when viewed. **Plugin Structure:** /wp-content/plugins/ └── wp-user-messaging/ ├── wp-user-messaging.php (Main plugin file) ├── js/ │ └── user-messaging-app.js (Vue.js application code) └── css/ └── user-messaging-style.css (Optional custom styles) ``` prefix . 'wum_messages'); define('WUM_RECIPIENTS_TABLE', $wpdb->prefix . 'wum_message_recipients'); /** * Create database tables on plugin activation. */ function wum_activate_plugin() { global $wpdb; require_once(ABSPATH . 'wp-admin/includes/upgrade.php'); $charset_collate = $wpdb->get_charset_collate(); // Messages Table $sql_messages = "CREATE TABLE " . WUM_MESSAGES_TABLE . " ( id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT, sender_id BIGINT(20) UNSIGNED NOT NULL, subject VARCHAR(255) DEFAULT '' NOT NULL, content LONGTEXT NOT NULL, sent_at DATETIME DEFAULT '0000-00-00 00:00:00' NOT NULL, PRIMARY KEY (id), KEY sender_id (sender_id) ) $charset_collate;"; dbDelta($sql_messages); // Recipients Table $sql_recipients = "CREATE TABLE " . WUM_RECIPIENTS_TABLE . " ( id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT, message_id BIGINT(20) UNSIGNED NOT NULL, recipient_id BIGINT(20) UNSIGNED NOT NULL, read_at DATETIME DEFAULT NULL, PRIMARY KEY (id), KEY message_id (message_id), KEY recipient_id (recipient_id), UNIQUE KEY message_recipient (message_id, recipient_id) ) $charset_collate;"; dbDelta($sql_recipients); } register_activation_hook(__FILE__, 'wum_activate_plugin'); /** * Enqueue scripts and styles. */ function wum_enqueue_scripts() { // Only enqueue on pages where the shortcode might be present // A more robust check would involve checking post content for the shortcode if (is_singular()) { // Basic check, adjust if needed global $post; if (has_shortcode($post->post_content, 'user_messaging_interface')) { // Bootstrap CSS wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css', [], '5.3.3' ); // Bootstrap Icons wp_enqueue_style( 'bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css', [], '1.11.3' ); // Optional Custom CSS wp_enqueue_style( 'wum-style', WUM_PLUGIN_URL . 'css/user-messaging-style.css', ['bootstrap-css'], WUM_VERSION ); // Vue.js 3 (Production version) wp_enqueue_script( 'vue-js', 'https://unpkg.com/vue@3/dist/vue.global.prod.js', // Use .js for development [], '3.4.27', // Check for latest Vue 3 version true // Load in footer ); // Bootstrap JS Bundle (includes Popper) wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js', [], // No dependency on Vue needed here '5.3.3', true ); // Plugin's Vue App JS wp_enqueue_script( 'wum-app-js', WUM_PLUGIN_URL . 'js/user-messaging-app.js', ['vue-js', 'jquery'], // Add jquery dependency for AJAX nonce WUM_VERSION, true ); // Localize script to pass data to Vue app wp_localize_script('wum-app-js', 'wum_data', [ 'ajax_url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('wum_ajax_nonce'), 'current_user_id' => get_current_user_id(), 'text' => [ // Add translatable strings here if needed 'loading' => __('Loading...', 'wp-user-messaging'), 'error' => __('An error occurred.', 'wp-user-messaging'), 'messageSent' => __('Message sent successfully!', 'wp-user-messaging'), 'noRecipients' => __('Please select at least one recipient.', 'wp-user-messaging'), 'noContent' => __('Please enter message content.', 'wp-user-messaging'), 'confirmRemoveRecipient' => __('Remove this recipient?', 'wp-user-messaging'), ] ]); } } } add_action('wp_enqueue_scripts', 'wum_enqueue_scripts'); /** * Shortcode to display the messaging interface. */ function wum_messaging_shortcode() { if (!is_user_logged_in()) { return '

' . __('Please log in to view your messages.', 'wp-user-messaging') . '

'; } // This div is where the Vue app will mount return '

Loading Messaging Interface...

'; } add_shortcode('user_messaging_interface', 'wum_messaging_shortcode'); // --- AJAX Handlers --- /** * Check nonce and user login status for AJAX requests. */ function wum_check_ajax_request() { check_ajax_referer('wum_ajax_nonce', 'nonce'); if (!is_user_logged_in()) { wp_send_json_error(['message' => 'Authentication required.'], 403); } } /** * AJAX handler for searching users. */ function wum_ajax_search_users() { wum_check_ajax_request(); $search_term = isset($_POST['search']) ? sanitize_text_field(wp_unslash($_POST['search'])) : ''; $current_user_id = get_current_user_id(); if (empty($search_term)) { wp_send_json_success([]); return; } $users_query = new WP_User_Query([ 'search' => '*' . esc_attr($search_term) . '*', 'search_columns' => ['user_login', 'user_nicename', 'user_email', 'display_name'], 'number' => 10, // Limit results 'exclude' => [$current_user_id], // Exclude self 'fields' => ['ID', 'display_name'], ]); $users = $users_query->get_results(); wp_send_json_success($users); } add_action('wp_ajax_wum_search_users', 'wum_ajax_search_users'); /** * AJAX handler for sending a message. */ function wum_ajax_send_message() { wum_check_ajax_request(); global $wpdb; $recipient_ids = isset($_POST['recipients']) && is_array($_POST['recipients']) ? array_map('absint', $_POST['recipients']) : []; $content = isset($_POST['content']) ? wp_kses_post(wp_unslash($_POST['content'])) // Allow basic HTML : ''; $sender_id = get_current_user_id(); if (empty($recipient_ids)) { wp_send_json_error(['message' => 'No recipients selected.'], 400); return; } if (empty(trim($content))) { wp_send_json_error(['message' => 'Message content cannot be empty.'], 400); return; } // Insert message $message_inserted = $wpdb->insert( WUM_MESSAGES_TABLE, [ 'sender_id' => $sender_id, 'content' => $content, 'sent_at' => current_time('mysql', 1), // GMT time 'subject' => '', // Subject not implemented in this version ], ['%d', '%s', '%s', '%s'] ); if (!$message_inserted) { wp_send_json_error(['message' => 'Failed to save message.'], 500); return; } $message_id = $wpdb->insert_id; $errors = []; // Insert recipients foreach ($recipient_ids as $recipient_id) { if ($recipient_id === $sender_id) continue; // Prevent sending to self via UI manipulation $recipient_inserted = $wpdb->insert( WUM_RECIPIENTS_TABLE, [ 'message_id' => $message_id, 'recipient_id' => $recipient_id, 'read_at' => null, ], ['%d', '%d', null] ); if (!$recipient_inserted) { $errors[] = "Failed to add recipient ID: " . $recipient_id; // Consider cleanup strategy if some recipients fail } } if (!empty($errors)) { // Partial success, maybe log errors? Send success anyway for now. error_log("WUM Send Message Errors: " . implode(', ', $errors)); } wp_send_json_success(['message' => 'Message sent successfully.']); } add_action('wp_ajax_wum_send_message', 'wum_ajax_send_message'); /** * AJAX handler for getting messages (inbox). */ function wum_ajax_get_messages() { wum_check_ajax_request(); global $wpdb; $current_user_id = get_current_user_id(); $results = $wpdb->get_results($wpdb->prepare( "SELECT m.id AS message_id, m.content, m.sent_at, mr.read_at, m.sender_id, u.display_name AS sender_name FROM " . WUM_MESSAGES_TABLE . " AS m JOIN " . WUM_RECIPIENTS_TABLE . " AS mr ON m.id = mr.message_id JOIN {$wpdb->users} AS u ON m.sender_id = u.ID WHERE mr.recipient_id = %d ORDER BY m.sent_at DESC LIMIT 100", // Add pagination later if needed $current_user_id )); // Format dates or other data if needed before sending foreach ($results as $row) { // Example: Format date nicely $row->sent_at_formatted = date(get_option('date_format') . ' ' . get_option('time_format'), strtotime($row->sent_at)); $row->is_read = !is_null($row->read_at); } wp_send_json_success($results); } add_action('wp_ajax_wum_get_messages', 'wum_ajax_get_messages'); /** * AJAX handler for marking a message as read. */ function wum_ajax_mark_as_read() { wum_check_ajax_request(); global $wpdb; $message_id = isset($_POST['message_id']) ? absint($_POST['message_id']) : 0; $current_user_id = get_current_user_id(); if ($message_id <= 0) { wp_send_json_error(['message' => 'Invalid message ID.'], 400); return; } $updated = $wpdb->update( WUM_RECIPIENTS_TABLE, ['read_at' => current_time('mysql', 1)], // Set read time to now (GMT) [ 'message_id' => $message_id, 'recipient_id' => $current_user_id, 'read_at' => null // Only update if currently unread ], ['%s'], // format for read_at ['%d', '%d', null] // format for where clause ); if ($updated === false) { // Could fail if already read or DB error wp_send_json_error(['message' => 'Failed to mark message as read or already read.'], 500); } else { wp_send_json_success(['message' => 'Message marked as read.']); } } add_action('wp_ajax_wum_mark_as_read', 'wum_ajax_mark_as_read'); ?> const { createApp, ref, reactive, computed, onMounted, watch } = Vue; // Simple debounce function function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func.apply(this, args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } createApp({ setup() { // --- Reactive State --- const isLoading = ref(false); const errorMessage = ref(''); const successMessage = ref(''); const activeView = ref('inbox'); // 'inbox', 'compose', 'viewMessage' const messages = ref([]); const currentMessage = ref(null); // For viewing a single message const searchTerm = ref(''); const searchResults = ref([]); const isSearching = ref(false); const newMessageRecipients = ref([]); const newMessageContent = ref(''); const isSending = ref(false); // --- Computed Properties --- const unreadCount = computed(() => { return messages.value.filter(msg => !msg.is_read).length; }); const recipientIds = computed(() => { return newMessageRecipients.value.map(r => r.ID); }); // --- Methods --- const showView = (viewName) => { activeView.value = viewName; currentMessage.value = null; // Reset message view errorMessage.value = ''; successMessage.value = ''; if (viewName === 'compose') { resetComposeForm(); } }; const resetComposeForm = () => { searchTerm.value = ''; searchResults.value = []; newMessageRecipients.value = []; newMessageContent.value = ''; isSending.value = false; }; const makeAjaxRequest = async (action, data = {}) => { isLoading.value = true; errorMessage.value = ''; successMessage.value = ''; // Clear previous success message const formData = new FormData(); formData.append('action', action); formData.append('nonce', wum_data.nonce); // Use localized nonce for (const key in data) { if (Array.isArray(data[key])) { data[key].forEach(item => formData.append(key + '[]', item)); } else { formData.append(key, data[key]); } } try { const response = await fetch(wum_data.ajax_url, { method: 'POST', body: formData, }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); if (!result.success) { throw new Error(result.data?.message || wum_data.text.error); } return result.data; // Return data on success } catch (error) { console.error(`AJAX Error (${action}):`, error); errorMessage.value = error.message || wum_data.text.error; throw error; // Re-throw to be caught by calling function if needed } finally { isLoading.value = false; } }; const fetchMessages = async () => { try { const data = await makeAjaxRequest('wum_get_messages'); messages.value = data || []; } catch (error) { // Error already handled in makeAjaxRequest } }; const debouncedSearch = debounce(async () => { if (searchTerm.value.length < 2) { searchResults.value = []; isSearching.value = false; return; } isSearching.value = true; try { const data = await makeAjaxRequest('wum_search_users', { search: searchTerm.value }); // Filter out already selected recipients const selectedIds = new Set(recipientIds.value); searchResults.value = (data || []).filter(user => !selectedIds.has(user.ID)); } catch (error) { searchResults.value = []; // Clear results on error } finally { isSearching.value = false; } }, 300); // 300ms debounce const addRecipient = (user) => { if (!recipientIds.value.includes(user.ID)) { newMessageRecipients.value.push(user); searchTerm.value = ''; // Clear search term searchResults.value = []; // Clear results } }; const removeRecipient = (userId) => { if (confirm(wum_data.text.confirmRemoveRecipient)) { newMessageRecipients.value = newMessageRecipients.value.filter(r => r.ID !== userId); } }; const sendMessage = async () => { if (newMessageRecipients.value.length === 0) { errorMessage.value = wum_data.text.noRecipients; return; } if (!newMessageContent.value.trim()) { errorMessage.value = wum_data.text.noContent; return; } isSending.value = true; try { const data = await makeAjaxRequest('wum_send_message', { recipients: recipientIds.value, content: newMessageContent.value }); successMessage.value = data?.message || wum_data.text.messageSent; resetComposeForm(); showView('inbox'); // Go back to inbox after sending fetchMessages(); // Refresh inbox } catch (error) { // Error message already set by makeAjaxRequest } finally { isSending.value = false; } }; const viewMessage = async (message) => { currentMessage.value = message; activeView.value = 'viewMessage'; errorMessage.value = ''; // Clear errors when viewing // Mark as read if not already read if (!message.is_read) { try { await makeAjaxRequest('wum_mark_as_read', { message_id: message.message_id }); // Update the message in the local list const index = messages.value.findIndex(m => m.message_id === message.message_id); if (index !== -1) { messages.value[index].is_read = true; messages.value[index].read_at = new Date().toISOString(); // Approximate } } catch (error) { // Log or display a less intrusive error if marking read fails console.error("Failed to mark message as read:", error); } } }; // --- Watchers --- watch(searchTerm, (newValue) => { if (newValue.length >= 2) { debouncedSearch(); } else { searchResults.value = []; // Clear results if search term is short } }); // --- Lifecycle Hooks --- onMounted(() => { fetchMessages(); }); // --- Return state and methods --- return { isLoading, errorMessage, successMessage, activeView, messages, currentMessage, searchTerm, searchResults, isSearching, newMessageRecipients, newMessageContent, isSending, unreadCount, // Methods showView, fetchMessages, addRecipient, removeRecipient, sendMessage, viewMessage, }; }, template: `

Inbox

Your inbox is empty.

From: {{ message.sender_name }}

New

Compose Message

To:

Searching...

{{ user.display_name }}

No users found.

Message:

Message

From: {{ currentMessage.sender_name }}
Received: {{ currentMessage.sent_at_formatted }}

` }).mount('#user-messaging-app'); /* Optional: Add custom styles here */ #user-messaging-app .list-group-item { cursor: pointer; } #user-messaging-app .nav-link .badge { font-size: 0.7em; vertical-align: middle; } /* Style for search results dropdown */ #recipient-search + .list-group { max-height: 200px; overflow-y: auto; border: 1px solid #dee2e6; border-top: none; /* Avoid double border */ } **How to Use:** 1. **Install the Plugin:** * Create the folder `wp-user-messaging` inside your `/wp-content/plugins/` directory. * Place the three files (`wp-user-messaging.php`, `js/user-messaging-app.js`, `css/user-messaging-style.css`) inside the `wp-user-messaging` folder as shown in the structure. 2. **Activate the Plugin:** Go to your WordPress Admin -> Plugins and activate the "WP User Messaging" plugin. This will create the necessary database tables. 3. **Add the Shortcode:** Create a new WordPress page (e.g., "Messages") and add the shortcode `[user_messaging_interface]` to its content area. Publish the page. 4. **Access Messaging:** Logged-in users can now visit the "Messages" page you created. They will see the Vue.js interface allowing them to view their inbox and compose new messages by searching for other registered users. **Important Notes:** * **Security:** The code includes basic nonce checks and ensures users are logged in for AJAX actions. Input is sanitized (`sanitize_text_field`, `absint`) and output for message content uses `wp_kses_post` to allow some HTML while preventing malicious scripts (adjust `wp_kses_post` rules if needed, or use stricter sanitization like `esc_html` if no HTML is desired). `v-html` in Vue is used to render the potentially HTML content; ensure you trust the sanitization done by `wp_kses_post`. * **Error Handling:** Basic error messages are displayed. More robust error handling could be added. * **Dependencies:** This plugin relies on external CDNs for Vue.js and Bootstrap. If you prefer local copies, you'll need to download them and adjust the `wp_enqueue_scripts` paths. * **Scalability:** For sites with a *very* large number of users or messages, the database queries might need optimization (e.g., better indexing, pagination for the inbox). * **No Real-time:** This is a polling-based system. Users need to refresh the inbox (or the page) to see new messages. Real-time updates would require WebSockets or similar technology, adding significant complexity. * **Styling:** Basic Bootstrap styling is applied. You can customize further in `user-messaging-style.css`. * **Subject Line:** This version omits the subject line for simplicity, but the database table includes a field if you want to add it later. * **Translation:** Basic text strings are hardcoded. For translation, you would wrap strings in `__()` or `_e()` functions and generate `.pot` / `.po` / `.mo` files.