How to Add Voice Search to Your WordPress Site (Works on Mobile Too!)

Hey, what’s up everyone. Welcome back to my website, and let’s check how we can add a voice search feature in our WordPress website. So, as you can see, either user can search through text or directly voice command it to search anything on your website.

Live Demo of Voice Search

So, let’s check how it works. So suppose I want to search for this article, SEO visibility. So let’s check how it works. SEO visibility. And as you can see, it automatically goes to the SEO visibility article.

Now let me search for any other term, Google. And here it is. And let me search keyword rank. How many keywords can you rank for? And as you can see, this is the search result. Before reading continue I suggest you to read following article How to Enable Categories & Tags in Pages.

Mobile Compatibility

So, in this way, you can add a voice search feature, and it will also work in mobile. So let me switch to mobile view. Let me click on the menu, and here it is. So let me search for it. Google keyword.

Implementation Guide

So, let’s check how we can implement this voice search in our WordPress website. And before that, if you found this article helpful, then make sure to hit the like button.

Step 1: Install WPCode Plugin

All right, now I am in the WordPress dashboard. Here you need to use a code manager plug-in, so here just go to Plugins and click on Add New, and you can simply search for code manager. So I am searching for WP Code, and here I’m using the WP Code Insert Header and Footer plus Custom Code Snippet. So make sure to install and activate this plug-in.

Step 2: Add Custom PHP Snippet

And after that, you will see a code snippet button. Just click on that, and here just click on Add New. I will click on Add Your Custom Code Snippet, and here make sure to select PHP Snippet. Let me add voice search. Now we need to copy a code like this. Let’s paste this, and let me activate this code snippet. And let’s hit save.

Step 3: Add Shortcode to Header

After that, we need to add a shortcode where I want to display the search field. So for this, what I can do is, I will go to Appearance, click on Customize, and I will go to Header. Let me click on the plus, and I will add an HTML block. Here, I will click on Setting, and I need to paste a shortcode like this: boy search. So let me copy that, and let me paste it here. Now it will add a voice search feature like this.

Step 4: Add Shortcode to Mobile View

Now, if you want to add it to mobile, then just click on Mobile, click on Here, click on HTML, and click on the Setting. Paste this shortcode like this, so that it will add the same search field in the mobile device as well.Step 5: Add to Sidebar or Footer

Now, let’s expand it. Let me open a page, and suppose I want to add it in the sidebar. Then I will go back, go to Widgets, click on Sidebar One, and let me replace the existing search field. I will click on Plus, and I will search for Custom HTML block, or I will search for Shortcode and paste this shortcode like this. Let’s publish this, and let me close this.

So, as you can see, we have the search field enabled here in the header section, and you can also display it in the footer section or in the sidebar.

Final Test and Conclusion

So, let’s test this. So let me type something like “keyword” and let it work by typing the text or by clicking on voice search. So let me do that. Google seat formulas and here it is. This is how it will automatically search for the content within the website, and it is very easy to implement.

You can use the shortcode whether you are using Kadence theme or if you are using Elementor or any other page builder. You can easily insert the shortcode to display the search box.

So, if you found this article helpful, don’t forget to hit the like button and subscribe to our channel for more articles like this that are coming in the future. And don’t forget to ring the bell icon.

Thank you.