Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add a Search Bar to WordPress Menu (Step by Step)

Do you want to add a search bar to your WordPress navigation menu?

By default, WordPress lets you add search to your website’s sidebar, footer, and other widget-ready areas. However, many users prefer to have the WordPress search box in the navigation menu because it is easier for visitors to find.

In this article, we will show you how to easily add a search bar to your WordPress menu without having any coding knowledge.

Adding a Search Bar to WordPress Menu

Why Add a Search Bar to the WordPress Navigation Menu

A search bar makes it easy for your users to find what they’re looking for without leaving your WordPress website. It helps improve the user experience and boosts engagement.

This is why most website designers and experts recommend adding a search option in the navigation menu, so users can easily find it. However, by default you can only add the WordPress search widget to widget-ready areas such as the sidebar.

Luckily, there are many different WordPress search plugins which let you add the search bar to different areas on your site including navigation menus.

In this guide, we’ll use the free SearchWP Modal Search Form. It’s easy to use, looks great with any theme, and won’t have a negative impact on your website’s performance.

With that said, let’s see how to add a search bar to your WordPress navigation menu.

Adding a Search Bar to WordPress Navigation Menu

The first thing you need to do is to install and activate the SearchWP Modal Search Form plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Appearance » Menus to add the search page to your WordPress menu. Once there, make sure you select the Primary menu.

Make Sure the Primary Menu Is Selected

Next, click on SearchWP Modal Search Forms to see the menu’s settings. Here, you can see that the plugin has automatically added the default ‘Native WordPress’ search template.

You can go ahead and select ‘Native WordPress’ and then click on the ‘Add to menu’ button.

Click the 'Add to Menu' Button

WordPress will now add the new Native WordPress Modal Search Form to the right-hand column. You can give the section a click to expand it and see its settings.

It’s a good idea to change the navigation label to ‘Search’ so your visitors know that this is a search field. Then, click on the Save Menu button to save your changes.

Rename the Navigation Label to 'Search'

Now, if you visit your WordPress blog, you’ll see a new Search bar in the navigation menu.

The search box will automatically take on the appearance of your WordPress theme, as you can see in the following images.

Search Preview

Adding Ajax Powered Live Search

You can make your search form even more user-friendly by adding live search results using Ajax technology. This will automatically show the visitor relevant search results as they’re typing their query, just like you see with Google.

First, you need to install and activate the SearchWP Live Ajax Search plugin. For more information, please see our step by step guide on how to install a WordPress plugin.

Once activated, the plugin will automatically add live search to all of your forms without you having to configure any settings.

To see the live Ajax search in action, simply visit your WordPress website and type in a search query. The search results will show up as you type.

Live Search Preview

This is a great start, but there are ways to create an even more powerful search experience for your visitors. For more information, see our complete guide on how to improve WordPress search with SearchWP.

We hope this article helped you learn how to add a search bar to a WordPress menu. You may also want to see our expert pick of the best live chat software for small businesses or see our list of useful tips to speed up WordPress and boost performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

28 CommentsLeave a Reply

  1. These plugins are untested for WP version 5.8.1

    Is it still ok to install them or is there other plugins that are tested for that version?

  2. hi
    This video is very helpful for me.But I want bar menu is like amazon page .Please help me .How do create big search bar like in amazon page

  3. Is there a way to display the results that are generated by the plugin differently? I get a list of images and descriptions but they display images in all different sizes. I would like them to display in the same way as my product pages do with 24 results per page, and 4 columns.
    thank you

    • For customizing the results page you would want to check with the plugin’s support and they should be able to assist.

      Admin

    • Our theme is custom created so we manually set that up with the creation of the theme :)

      Admin

  4. Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.

  5. I would like the search item to appear as the first item in the menu, not the last. Is this possible?

    • It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement :)

      Admin

  6. Hi,

    How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,

    Thanks

    • It appears the plugin has updated since this article was last updated, we will take a look into updating this post.

      Admin

    • Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this :)

      Admin

  7. Why is every solution on this website a plugin? Plugins bloat websites and slow them down; one would expect you to know that. There are better solutions than installing a plugin for everything!

    • Not sure if it is due to an update but I noticed the same thing. But it seems the option can be found under ‘Ivory Search > Settings’ then you should be presented with the first settings which are ‘Menu search’ and the first expandable option to select a menu to add it to.

  8. Hi,
    Can we choose whether the search appears only for mobile/tablet version and not for desktop?

  9. unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.

Leave a Reply to jafrin Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.