WordPress Voice Search Optimization: Complete Implementation Guide

Your task is to create a complete and working code for WordPress code snippet that I can paste directly into the Code Snippets plugin on my WordPress site.

What I Want This Snippet To Do:
- Create a voice search shortcode that adds a microphone button to any page/post
- When clicked, it should listen for voice input using the Web Speech API
- Convert the speech to text and perform a live search on my WordPress site
- Display search results in a dropdown or overlay without page refresh
- Make it mobile-friendly and accessible
- Include basic styling that works with most themes

Requirements:
- The code should be self-contained
- Focus on making it functional first. I will ask for polishing/optimization later.
- If you want to call an API, don't use ajax, call it from JS using "await fetch"

Shortcode & CSS Naming Rules:
- Prefix all shortcodes with `cvg_` to avoid naming conflicts.
- If the snippet includes CSS, prefix all class names with `cvg-` to avoid conflict with the site's theme.

<?php
/**
 * WordPress Voice Search Optimization Snippet
 * Add voice search capability to WordPress using Web Speech API
 * Created by: Dimu Harshana - CeeVeeGlobal.com
 */

// Create the voice search shortcode
function cvg_voice_search_shortcode($atts) {
    $atts = shortcode_atts(array(
        'placeholder' => 'What are you looking for?',
        'button_text' => 'Search',
        'max_results' => 8
    ), $atts);
    
    return '<div class="cvg-voice-search-container">
        <div class="cvg-search-input-wrapper">
            <input type="text" id="cvg-voice-search-input" placeholder="' . esc_attr($atts['placeholder']) . '" />
            <button id="cvg-voice-search-btn" class="cvg-voice-btn" title="Voice Search">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2C13.1 2 14 2.9 14 4V10C14 11.1 13.1 12 12 12C10.9 12 10 11.1 10 10V4C10 2.9 10.9 2 12 2M19 10V12C19 15.9 15.9 19 12 19C8.1 19 5 15.9 5 12V10H7V12C7 14.8 9.2 17 12 17C14.8 17 17 14.8 17 12V10H19Z"/>
                </svg>
            </button>
        </div>
        <div id="cvg-voice-search-results" class="cvg-search-results"></div>
    </div>';
}
add_shortcode('cvg_voice_search', 'cvg_voice_search_shortcode');

// Add CSS and JavaScript
function cvg_voice_search_scripts() {
    ?>
    <style>
    .cvg-voice-search-container {
        max-width: 600px;
        margin: 20px 0;
        position: relative;
    }
    
    .cvg-search-input-wrapper {
        display: flex;
        align-items: center;
        border: 2px solid #e1e5e9;
        border-radius: 8px;
        overflow: hidden;
        background: white;
    }
    
    #cvg-voice-search-input {
        flex: 1;
        padding: 12px 16px;
        border: none;
        outline: none;
        font-size: 16px;
        background: transparent;
    }
    
    .cvg-voice-btn {
        padding: 12px 16px;
        background: #0073aa;
        color: white;
        border: none;
        cursor: pointer;
        transition: background 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cvg-voice-btn:hover {
        background: #005a87;
    }
    
    .cvg-voice-btn.cvg-listening {
        background: #dc3545;
        animation: cvg-pulse 1s infinite;
    }
    
    @keyframes cvg-pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    .cvg-search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #e1e5e9;
        border-radius: 8px;
        max-height: 400px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
    }
    
    .cvg-search-result {
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .cvg-search-result:hover {
        background: #f8f9fa;
    }
    
    .cvg-search-result:last-child {
        border-bottom: none;
    }
    
    .cvg-result-title {
        font-weight: 600;
        margin-bottom: 4px;
        color: #0073aa;
    }
    
    .cvg-result-excerpt {
        font-size: 14px;
        color: #666;
        line-height: 1.4;
    }
    
    .cvg-no-results {
        padding: 20px;
        text-align: center;
        color: #666;
    }
    
    @media (max-width: 768px) {
        .cvg-voice-search-container {
            margin: 15px 0;
        }
        
        #cvg-voice-search-input {
            font-size: 16px; /* Prevents zoom on iOS */
        }
    }
    </style>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('cvg-voice-search-input');
        const voiceBtn = document.getElementById('cvg-voice-search-btn');
        const resultsContainer = document.getElementById('cvg-voice-search-results');
        
        if (!searchInput || !voiceBtn || !resultsContainer) return;
        
        let recognition = null;
        let isListening = false;
        
        // Check if browser supports speech recognition
        if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            recognition = new SpeechRecognition();
            recognition.continuous = false;
            recognition.interimResults = false;
            recognition.lang = 'en-US';
            
            recognition.onstart = function() {
                isListening = true;
                voiceBtn.classList.add('cvg-listening');
                voiceBtn.title = 'Listening...';
            };
            
            recognition.onend = function() {
                isListening = false;
                voiceBtn.classList.remove('cvg-listening');
                voiceBtn.title = 'Voice Search';
            };
            
            recognition.onresult = function(event) {
                const transcript = event.results[0][0].transcript;
                searchInput.value = transcript;
                performSearch(transcript);
            };
            
            recognition.onerror = function(event) {
                console.error('Speech recognition error:', event.error);
                isListening = false;
                voiceBtn.classList.remove('cvg-listening');
            };
        } else {
            voiceBtn.style.display = 'none';
        }
        
        // Voice search button click
        voiceBtn.addEventListener('click', function() {
            if (!recognition) return;
            
            if (isListening) {
                recognition.stop();
            } else {
                recognition.start();
            }
        });
        
        // Regular search on input
        let searchTimeout;
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            const query = this.value.trim();
            
            if (query.length < 2) {
                resultsContainer.style.display = 'none';
                return;
            }
            
            searchTimeout = setTimeout(() => {
                performSearch(query);
            }, 300);
        });
        
        // Perform search function
        async function performSearch(query) {
            if (!query.trim()) return;
            
            try {
                const response = await fetch('/wp-json/wp/v2/search?search=' + encodeURIComponent(query) + '&per_page=8');
                const results = await response.json();
                
                displayResults(results);
            } catch (error) {
                console.error('Search error:', error);
            }
        }
        
        // Display search results
        function displayResults(results) {
            if (results.length === 0) {
                resultsContainer.innerHTML = '<div class="cvg-no-results">No results found. Try different keywords.</div>';
                resultsContainer.style.display = 'block';
                return;
            }
            
            let html = '';
            results.forEach(result => {
                html += `
                    <div class="cvg-search-result" onclick="window.location.href='${result.url}'">
                        <div class="cvg-result-title">${result.title}</div>
                        <div class="cvg-result-excerpt">${result.excerpt || ''}</div>
                    </div>
                `;
            });
            
            resultsContainer.innerHTML = html;
            resultsContainer.style.display = 'block';
        }
        
        // Close results when clicking outside
        document.addEventListener('click', function(event) {
            if (!event.target.closest('.cvg-voice-search-container')) {
                resultsContainer.style.display = 'none';
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'cvg_voice_search_scripts');
?>

[cvg_voice_search]

[cvg_voice_search placeholder="Start speaking..." button_text="Find It" max_results="10"]