Do you want to add a search bar to your WordPress navigation menu?
By default, WordPress lets you add a search section on 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 You Should Add a Search Bar in Menu?
A site search makes it easy for your users to find what they’re looking for without leaving your 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 have chosen the Ivory Search free plugin. It allows you to create new custom search forms and enhance the default WordPress search.
With that said, let’s take a look at how to add a search bar to your WordPress menu.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
Adding a Search Bar to WordPress Menu
First thing you need to do is to install and activate the Ivory Search plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit Ivory Search » Search Forms page to create a new search form.
The plugin automatically adds the default search form, so you can quickly review its settings and add it to your WordPress menu.
Search settings allow you to select which content on your website should be included in the site search.
The ‘Includes’ section lets you choose which post types, posts, pages, category, custom fields, etc. should be included in the search query. You need to review the options and click the Save Form button.
Next, there is the ‘Excludes’ section, which lets you define the content that you don’t want to show in search results. Once done, click the Save Form button again to store your settings.
The ‘AJAX’ section lets you enable AJAX functionality for your search form.
The ‘Options’ section lets you define how many results to show per search page along with other advanced settings.
Now your custom WordPress search form is ready. Once again, don’t forget to save your settings.
After that, the next step is to add the search form to your navigation menu. Simply go to Ivory Search » Settings page to configure the search bar to your WordPress menu.
On this page, you will see the ‘Select Menu’ tab. From here, you can simply toggle the menu where you would like to add the search bar.
This list of menus (Primary Menu and Footer Menu) belongs to your WordPress template. If you change the template of your site, then the list will be automatically updated with the available menus from your template.
After that, you can choose the search style from the Form Style accordion below.
The plugin allows you to display the search form in five different styles: Default, dropdown, sliding, full width, and popup.
If you like, you can further customize the options by going to the ‘Settings’ section below ‘Menu Search’.
From there, you can add your search form to the header, footer, manage mobile display for search, and more. These settings will also help in controlling the search results for your users.
Once you are satisfied, make sure to save your settings. After that, you can head over to your website to see the search bar in the WordPress navigation menu.
We hope this article helped you learn how to add a search bar to a WordPress menu. You may also want to see our list of most 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.
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.
As usual, wpbeginner has always been helpful. Thanks alot
You’re welcome, glad our guide could be helpful
Sir, how did u create logo, search bar and menu in header side by side
Our theme is custom created so we manually set that up with the creation of the theme
Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.
You’re welcome, glad our article could be helpful
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
Hi,
How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,
Thanks
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/
The explain it not right, the screens images is wrong and I think it is the wrong plugin
It appears the plugin has updated since this article was last updated, we will take a look into updating this post.
This doesn’t work guys. There’s no such plugin for a start.
Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this
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!
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/
why does my setting doesnt have an ADD TO SEARCH MENU
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.
Hi,
Can we choose whether the search appears only for mobile/tablet version and not for desktop?
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.
No, You don’t need to become developer or professional to make small custom CSS.