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
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 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.
First, you need to install and activate the SearchWP Live Ajax Search plugin. See our step by step guide on how to install a WordPress plugin.
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.
If you liked this guide, then please consider subscribing to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Rawan says
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?
jafrin says
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
WPBeginner Support says
It would depend on the specifics you’re looking for but for a starting point we would recommend taking a look at our article below:
https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/
Admin
Erin says
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
WPBeginner Support says
For customizing the results page you would want to check with the plugin’s support and they should be able to assist.
Admin
Okereke Divine says
As usual, wpbeginner has always been helpful. Thanks alot
WPBeginner Support says
You’re welcome, glad our guide could be helpful
Admin
Parwez says
Sir, how did u create logo, search bar and menu in header side by side
WPBeginner Support says
Our theme is custom created so we manually set that up with the creation of the theme
Admin
Angelica says
Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.
WPBeginner Support says
You’re welcome, glad our article could be helpful
Admin
Rochelle says
I would like the search item to appear as the first item in the menu, not the last. Is this possible?
WPBeginner Support says
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
Anupam Kumar says
Hi,
How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,
Thanks
WPBeginner Support says
For understanding CSS and how we set up our icons, you would want to take a look at our article here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Rubb says
The explain it not right, the screens images is wrong and I think it is the wrong plugin
WPBeginner Support says
It appears the plugin has updated since this article was last updated, we will take a look into updating this post.
Admin
James King says
This doesn’t work guys. There’s no such plugin for a start.
WPBeginner Support says
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
Raymond says
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!
WPBeginner Support says
We strive to make the solutions as simple as possible for our users which is why our articles tend toward plugins. This way if a user is not comfortable editing their site’s files they have a plugin option that can be easily removed from their site should it not work for them.
Also, it’s not as simple as all plugins slow down your site. Poorly coded plugins slow down your site. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/
Admin
Ann says
why does my setting doesnt have an ADD TO SEARCH MENU
Dan Conway says
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.
Aditi Bisen says
Hi,
Can we choose whether the search appears only for mobile/tablet version and not for desktop?
Ihsan says
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.
Damith says
No, You don’t need to become developer or professional to make small custom CSS.