Do you want to add a search bar to your WordPress navigation menu?
By default, WordPress lets you add search to your website sidebar, footer, and other widget-ready areas. However, many users prefer to have the WordPress search box in the navigation menu because it is easily noticeable on the top.
In this article, we will show you how to easily add a search bar to your WordPress menu without having any coding knowledge.
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 user experience on your website and boosts engagement.
This is why most usability experts recommend adding a search option in the navigation menu, so users can easily find it. However, the default WordPress search widget is limited to only widget-ready areas.
Luckily, there are many different WordPress search plugins which let you add the search bar to different locations on your site including menus.
For this tutorial, 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 your website’s performance.
With that said, let's take a look at how to add a search bar to your WordPress navigation menu.
Adding a Search Bar to WordPress Navigation Menu
Upon activation, you need to visit Appearance » Menus to add the search page to your WordPress menu. Once there, make sure that the Primary menu is selected.
Next, click on SearchWP Modal Search Forms to reveal the menu item’s settings. Notice that the plugin has automatically added the default search template. You should select it and then click on the ‘Add to menu’ button.
The new Native WordPress Modal Search Form menu item will be added to the right column. You’ll need to click on it to expand its settings.
You’ll need to rename the navigation label to ‘Search’ and then click on the Save Menu button to save the settings.
You can see the new Search menu item by visiting your WordPress website. The popup search box will automatically take on the appearance of your theme, as you can see in these two screenshots from our test website.
Adding Ajax Powered Live Search
We can take make our search form even more user friendly by adding live search results using Ajax technology. This will automatically update the search results as your visitors type their queries.
Once activated, the plugin will immediately start to work. It will automatically add live search results to all of your search forms.
To see it in action, simply visit your WordPress website and type in a search query. The search results will appear as you type.
To customize your search even more, 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 learn how to choose the best WordPress hosting or see our list of useful tips to speed up WordPress and boost performance.