Hi Julie,
Which themes did you test the plugin with? Are there any other active plugins that make changes to the search form?
Some guesses out of the blue:
- The markup for the search form is completely different, so the plugin doesn’t recognize the form anymore.
- A CSS error that causes the microphone to be hidden
- A JavaScript error (check the console output in Chrome using Cmd+Alt+I)
It would be very helpful if one of these sites is online so I could test it right away.
Cheers,
Pascal
Thread Starter
Julie
(@habannah)
I appreciate you helping me figure this out Pascal — I wouldn’t know where to begin! I find it difficult to believe that all three themes are in conflict with the plugin, and yet, the only other search plugin I’m using is Relevanssi, which is running on each site.
The themes and sites are:
-Atahualpa (site not live)
-Graphene (GreenNiackery.com)
-Parabola (MiscellaNiackery.com)
Search forms are at the bottom right, just above the footer. The search forms at the top of the sites are Google AdSense scripts.
Thanks again!
It seems like all three themes use search forms with different markup which wasn’t supported by this plugin.
I just added some improvements to the plugin which should accommodate these situations, i.e. the microphone button should be shown. Download the current beta version from GitHub and upload it to your site (replacing the voice-search folder): https://github.com/swissspidy/voice-search/archive/master.zip
When it works, I’ll update it here on WordPress.org.
Another problem, which is almost impossible for the plugin to detect, is the layout of the search form (e.g. black microphone on a dark background).
For example, on greenniackery.com, you’d want to add some CSS like this to position the microphone button inside the search form:
.voice-search-button { right: 75px; margin-top: -2px; }
.voice-search-mic:before { background: #bab867; }
On miscellaniackery.com it would be more like this:
.voice-search-button { right: 25px; }
.voice-search-holder, .voice-search-holder:after, .voice-search-holder:before, .voice-search-mic, .voice-search-mic:after { background: #96968d; }
I’d recommend the Jetpack CSS module for this, or another plugin that allows you to insert custom CSS to the site.
Let me know how it works!
Thread Starter
Julie
(@habannah)
Thanks very much, Pascal! I’ll download it and get back to you ASAP… And thanks for the CSS codes — I wouldn’t have guessed that was an issue!
Thread Starter
Julie
(@habannah)
Hi Pascal, I uploaded the new version. Still testing on a laptop using Chrome. I deactivated (but did not delete) the 1.0 version of the plugin, and activated the 1.0.1-beta version. I applied the css you suggested for each site.
1) Everything works perfectly for the site using Atahualpa 🙂 The only css I used for this site was:
.voice-search-button { right: 25px; }
2) Everything looks good for the site using Parabola (in terms of appearance, using your suggested css), but it doesn’t actually work. I click on the mic and the popup asks me to allow the use of the mic. I click yes and “Start Talking” appears on the search bar, but when I talk, nothing happens…
3) For the site using Graphene, there is still no mic appearing, even with your suggested css, so it seems not to be working at all… I have double-checked and the new beta version is indeed active, and the older version is inactive. I also tried setting the margin to 100 instead of 75, but that didn’t do anything 🙁
Thanks so much for your help with this! It really is a cool plugin 🙂 Do you think Firefox and Explorer will support it in the near future?
2) Regarding the other site with the Parabola theme, everything works for me here. I just said some random words and Chrome recognized them. If it doesn’t for you, try this demo site to see if the feature works in general.
3) Regarding the site using Graphene theme, it looks like you’re using Better WordPress Minify, which somehow doesn’t load the voice search JavaScript and CSS at all. Deactivate the plugin and test it again. If it works, you need to adjust the minify configuration.
Browser support isn’t great so far, but the Web Speech API is under consideration for IE and it looks like Firefox is already working on adding support.
Thread Starter
Julie
(@habannah)
2) Strangely, it still didn’t work when I first tried this morning. I thought maybe it was an issue with text colour, since “Start Talking” disappeared after I said something. So I pressed the search button and it ran a blank search, redirecting me to the “No Search Results” page, which also has a search form. I tried Voice Search again from there and it worked. So then I tried the search form above the footer again, and it worked, too. And I tried them both again and again, and everything works. Weird! And yay 🙂
3) Better WordPress Minify has an option to select which files NOT to minify, so I added both the Voice Search JS & CSS files to the list, and Voice Search works great now 🙂
Thanks for all the help figuring this out!
