Enable Voice Search Feature on WordPress and Other Websites

Print Page
Voice Input in WordPress

The Voice Search extension enabled voice searching in Google Chrome. Now here I will show you how to enable speech input feature in your WordPress blog and any other website.

If you have the extension installed or are on the Chrome dev build, check out the “Search” box on SumTips and you’ll see a little mic icon. You can do a search-by-voice by clicking on it.

To enable this feature on your WordPress blog open searchform.php file from your theme folder in a text editor. You might get something similar to this:

<form id="searchform" action="<?php bloginfo('home'); ?>/" method="get">
<input id="s" name="s" size="20" type="text" value="<?php _e('Search') ?>..."/>
</form>

Now add “x-webkit-speech speech onwebkitspeechchange="this.form.submit();"” to the input element box. So the final output would be:

<form id="searchform" action="<?php bloginfo('home'); ?>/" method="get">
<input id="s" name="s" size="20" type="text" value="<?php _e('Search') ?>..." x-webkit-speech speech onwebkitspeechchange="this.form.submit();" />
</form>

That’s it!

Similarly, you can enable speech input on other input boxes on any website:
<input id="si" name="si" type="text" x-webkit-speech speech error onwebkitspeechchange="do.this(true);" />

You may have noticed the “x-webkit-speech” attribute, this means it currently works only in Webkit.

Visit this page to learn what more you can do with this feature.