How to Add Voice Search Option in WordPress
Ever wanted to search your WordPress site just by speaking? Now it’s possible! With the rise of voice technology, more users expect voice-enabled features. In this tutorial, we’ll show you how to add voice search functionality to your WordPress website using a simple custom shortcode. No plugin required!
How to Add Voice Search in WordPress (Step-by-Step)
Here’s how you can integrate a voice search feature into your WordPress site using custom code.
Step 1: Add the Custom Code to Your Theme or Plugin
You can add the following code to your theme’s functions.php file or by using a code manager plugin. This code creates a shortcode [voice_search] that you can place anywhere you want your voice search box to appear.
function universal_voice_search_shortcode() {
static $included = false;
$uid = uniqid('vs_');
ob_start();
?>
<form role="search" method="get" class="voice-search-form" action="<?php echo esc_url(home_url('/')); ?>">
<div class="voice-search-wrapper">
<input type="text" name="s" id="<?php echo $uid; ?>_input" placeholder="Search by text or voice..." aria-label="Search" />
<button type="button" class="voice-search-mic" id="<?php echo $uid; ?>_mic" aria-label="Voice Search">
<!-- SVG Mic Icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z"/></svg>
</button>
</div>
</form>
<?php if (!$included): ?>
<style>
.voice-search-form {
max-width: 100%;
}
.voice-search-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.voice-search-wrapper input[type="text"] {
flex: 1;
padding: 10px 44px 10px 12px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
}
.voice-search-mic {
position: absolute;
right: 8px;
background: black;
border: none;
border-radius: 50%;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
z-index: 1;
transition: background 0.3s ease;
}
.voice-search-mic:hover {
background: #005a87;
}
.voice-search-mic svg {
fill: white;
width: 22px;
height: 22px;
pointer-events: none;
}
@media (max-width: 600px) {
.voice-search-wrapper input[type="text"] {
font-size: 15px;
padding: 10px 44px 10px 10px;
}
.voice-search-mic {
width: 32px;
height: 32px;
}
.voice-search-mic svg {
width: 18px;
height: 18px;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const searchForms = document.querySelectorAll('.voice-search-form');
searchForms.forEach(form => {
const input = form.querySelector('input[type="text"]');
const mic = form.querySelector('.voice-search-mic');
const defaultPlaceholder = input.placeholder;
if ('webkitSpeechRecognition' in window) {
const recognition = new webkitSpeechRecognition();
recognition.lang = (navigator.language || '').startsWith('hi') ? 'hi-IN' : 'en-US';
recognition.continuous = false;
mic.addEventListener('click', () => {
recognition.start();
input.placeholder = 'Listening...';
});
recognition.onresult = function (event) {
const transcript = event.results[0][0].transcript;
input.value = transcript;
form.submit();
};
recognition.onend = () => {
input.placeholder = defaultPlaceholder;
};
recognition.onerror = (event) => {
input.placeholder = 'Voice error';
setTimeout(() => {
input.placeholder = defaultPlaceholder;
}, 2000);
};
} else {
mic.disabled = true;
mic.title = "Voice search not supported";
}
});
});
</script>
<?php $included = true; endif;
return ob_get_clean();
}
add_shortcode('voice_search', 'universal_voice_search_shortcode');Step 2: Use the Shortcode in Your Pages
After adding the above code:
- Go to any Page, Post, or Widget area.
- Paste the shortcode:
[voice_search]
- Save and preview the page.
You’ll now see a search bar with a microphone icon. Tap or click the mic and speak your query — the search will happen automatically.
Step 3: Make Sure You’re Using a Compatible Browser
This functionality only works on browsers that support the webkitSpeechRecognition API — currently on Google Chrome (desktop and Android), and other chromium based browsers like Brave, Microsoft Edge etc. If a user opens your site on another browser, the mic button will be disabled with a tooltip.
Why Use Voice Search in WordPress?
FAQs About Voice Search in WordPress
Final Thoughts
Adding voice search to your WordPress site not only improves usability but also aligns your site with modern trends. Whether you run a blog, an eCommerce store, or a business website — this simple feature can make a big difference.
Try it out, and give your visitors a smarter way to search!
Article by
Abhishek padhi
Abhishek is an Indian digital entrepreneur with years of experience in Blogging and SEO. He shares practical, step-by-step tutorials to help Bloggers & Content Creators grow their online presence effectively.
