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 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.

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.

The post How to Add a Search Bar to WordPress Menu (Step by Step) appeared first on WPBeginner.

from WPBeginner https://ift.tt/2LlJxFj
More links is https://mwktutor.com