How to Add Voice Search to WordPress Without a Plugin

if you want users to search your WordPress site by speaking instead of typing, then this guide is for you.

Voice search is going to become a must-have feature in 2025, especially for sites that want to remain user-friendly and accessible.

I will show you step by step how to add voice-activated search to your WordPress site without a plugin.

Why Add Voice Search in WordPress?

Now the question comes, why to add voice search in WordPress?

See, nowadays the way people interact with websites is changing. Mobile users especially like to search by speaking.

If you add voice search, then:

• User experience improves, search becomes faster and easier, especially on mobile.
• Accessibility improves, meaning people who find typing difficult can use it easily.
• SEO also benefits, as Google now prioritizes user-friendly and accessible content.
• And most importantly, your website looks modern and updated, following the latest technology trends.

How Voice Search Works

First of all, let’s talk about how voice search works.

You just need to add a small code snippet which will create a shortcode.

[voice_search]

This allows you to add a voice search box to any part of your site—be it a header, a widget, or inside posts and pages.

The process is simple: the user will click the mic button, say their search, and be taken directly to the relevant result.

Step 1: Add the Code for Voice Search

Now comes the Step —how to add the code without a plugin.

The process is this:

First of all, copy the custom code.

This code will help you create the [voice search] shortcode, create an input box, and integrate Google Chrome’s Web Speech API, which is used for voice recognition.

Copy This PHP Code

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: Where to Add the Code

Now let’s talk about where to add the code.

It’s simple, open your theme’s functions.php file.

If possible, use a child theme so that the changes don’t get deleted during future updates.

Another option is to use a code manager plugin like WPCode, which is easy and safe.

Paste the code and save it.

Step 3: Display the Voice Search Box

Now Step 3—How to display the voice search box.

Just enter the shortcode [voice search] wherever you want to display it.

You can enter this in the header through HTML or shortcode block, inside the sidebar or widgets from the WordPress Widgets menu, or in the footer or any section using Elementor, Gutenberg or the block editor.

If you want to add specifically for mobile, then it is best to put it in the mobile header, sidebar or menu for a seamless experience.

Take a real example—suppose a visitor wants to find an article on “SEO visibility” on your site.

He will click on the mic icon, say “SEO visibility” and the results will appear immediately.

You can add this voice search box to the homepage, posts, WooCommerce shop or any widget area.

This feature works on both desktop and mobile, the only condition is that the browser supports voice recognition.

Frequently Asked Questions About Voice Search in WordPress

Now some common questions arise:

Will This Voice Search Work on All Browsers?

Will this voice search work on all browsers?

No, this code uses webkitSpeechRecognition API of Google Chrome.

Meaning it will work best in Chrome and other browsers that support Web Speech API.

If the browser does not support it then the mic icon gets disabled and users can search by typing.

Will This Slow Down the Site?

Will this slow down the site?

Absolutely not.

The code is lightweight and just loads a small script and style block where the search box is visible.

There is no noticeable effect on page speed.

Can This Be Put in a Widget or Header?

Can this be put in a widget or header?

Yes, easily!

[voice_search]

Just put the shortcode in a custom HTML or widget block, be it header, footer or any section.

Can We Use a Plugin?

Can we use a plugin?

Yes, plugins are available, but most are outdated or limited.

By using custom code you get full control, without installing any extra plugin.

But if you like the plugin then type “voice search” and search in the plugin repository.

What If the User Denies Mic Access?

What if the user denies mic access?

Simple, the button will not work, and the user will be able to do normal type search.

Is It Safe and Privacy-Friendly?

Is it safe and privacy-friendly?

Absolutely.

All speech recognition runs locally in the user’s browser.

No audio is sent to your server.

You do not need special privacy notices, but you can provide a link to your privacy policy.

Can the Search Box Be Changed According to the Theme Style?

Can the search box be changed according to the theme style?

Yes.

Edit the CSS and design it according to your theme’s colors, fonts and spacing.

Will This Work on WooCommerce Too?

Will this work on WooCommerce too?

Yes!

You can add it to shop, product pages or category listings.

Is It Compatible with Elementor or Gutenberg?

Is it compatible with Elementor or Gutenberg?

Yes, easily.

You can put code in custom HTML or shortcode blocks in Elementor, Gutenberg, WPBakery, Kadence and almost all page builders.

Best Tips for Implementing Voice Search

Best tips are to place the search box where users naturally expect it, like header, top bar or sidebar.

Test on both—desktop and mobile, so that there is best usability everywhere.

Providing both voice and text search options together makes it even more accessible.

And yes, keep updating your code from time to time with new browser updates to maintain compatibility.

Conclusion

The conclusion is simple—adding voice search to WordPress is now fast, easy, and possible without a plugin.

Just follow a few steps and give your visitors a hands-free, voice-powered search experience.

Try it today and make your website more accessible and user-friendly.

If you found this guide helpful, share it with your friends and subscribe for more WordPress tips.