Easy methods to Add a Search Bar to WordPress Menu (Step by Step)

5 minutes read

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

By default, WordPress allows you to add a search part in your web site sidebar, footer, and different widget-ready areas. Nonetheless, many customers desire to have the WordPress search field within the navigation menu as a result of it’s simply noticeable on the highest.

On this article, we’ll present you how one can simply add a search bar to your WordPress menu with out having any coding data.

Why You Ought to Add a Search Bar in Menu?

A website search makes it straightforward on your customers to seek out what they’re searching for with out leaving your web site. It helps enhance person expertise in your web site and boosts engagement.

This is the reason most usability specialists advocate including a search possibility within the navigation menu, so customers can simply discover it.

Nonetheless, the default WordPress search widget is restricted to solely widget-ready areas.

Fortunately, there are lots of totally different WordPress search plugins which allow you to add the search bar to totally different places in your website together with menus.

For this tutorial, we’ve chosen the Ivory Search free plugin. It permits you to create new customized search varieties and improve the default WordPress search.

With that stated, let’s check out how one can add a search bar to your WordPress menu.

Including a Search Bar to WordPress Menu

Very first thing it’s essential do is to put in and activate the Ivory Search plugin. For extra particulars, see our step-by-step information on how one can set up a WordPress plugin.

Upon activation, it’s essential go to Ivory Search » Search Kinds web page to create a brand new search type.

Ivory Search Include Options

The plugin robotically provides the default search type, so you’ll be able to rapidly evaluation its settings and add it to your WordPress menu.

Search settings will let you choose which content material in your web site needs to be included within the website search.

The ‘Contains’ part allows you to select which put up varieties, posts, pages, class, customized fields, and many others. needs to be included within the search question. That you must evaluation the choices and click on the Save Type button.

Subsequent, there’s the ‘Excludes’ part, which helps you to outline the content material that you just don’t need to present in search outcomes. As soon as performed, click on the Save Type button once more to retailer your settings.

Ivory Search Exclude Options

The ‘AJAX’ part allows you to allow AJAX performance on your search type.

Ivory WordPress Search Bar AJAX Settings

The ‘Choices’ part allows you to outline what number of outcomes to indicate per search web page together with different superior settings.

Define Search Results Per Page in Ivory Search Plugin

Now your customized WordPress search type is prepared. As soon as once more, don’t overlook to save lots of your settings.

After that, the following step is so as to add the search type to your navigation menu. Merely go to Ivory Search » Settings web page to configure the search bar to your WordPress menu.

On this web page, you will note the ‘Choose Menu’ tab. From right here, you’ll be able to merely toggle the menu the place you wish to add the search bar.

Select WordPress Menu to Show Search Bar

This record of menus (Main Menu and Footer Menu) belongs to your WordPress template. In the event you change the template of your website, then the record will likely be robotically up to date with the out there menus out of your template.

After that, you’ll be able to select the search model from the Type Type accordion beneath.

The plugin permits you to show the search type in 5 totally different kinds: Default, dropdown, sliding, full width, and popup.

Ivory Search Form Styles

In the event you like, you’ll be able to additional customise the choices by going to the ‘Settings’ part beneath ‘Menu Search’.

From there, you’ll be able to add your search type to the header, footer, handle cellular show for search, and extra. These settings may also assist in controlling the search outcomes on your customers.

Ivory Search More Settings

As soon as you’re happy, make certain to save lots of your settings. After that, you’ll be able to head over to your web site to see the search bar within the WordPress navigation menu.

Search Bar in WordPress Menu Preview

We hope this text helped you learn to add a search bar to a WordPress menu. You may additionally need to see our record of most helpful tricks to velocity up WordPress and increase efficiency.

In the event you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Fb.

Facebook Twitter LinkedIn Whatsapp Pocket

Related Posts:

Do you need to make a dropdown menu and add it to your WordPress web site? A dropdown menu reveals an inventory of hyperlinks as you’re taking your mouse over an merchandise on the menu. We use a dropdown menu on WPBeginner, go forward and take your mouse ov...
To search on Instagram without an account, you can follow these steps:Open your preferred web browser and visit the Instagram website. On the homepage, you will see a search bar at the top of the screen. Click on it to begin your search. Enter the desired keyw...
Probably the most essential step in optimizing your WordPress web site for search engine optimization is including it to Google Search Console (previously Google Webmaster Instruments). Google Search Console presents particular webmaster instruments to assist...
To find search queries in Google Analytics, follow these steps:Log in to your Google Analytics account.In the left-hand menu, select "Behavior" and then click on "Site Search" followed by "Search Terms".You will see a list of search que...
To show a toolbar in Adobe Photoshop, you can go through the following steps:Launch Adobe Photoshop by double-clicking its icon.After the application is open, you will see a menu bar at the top of the screen. Look for the "Window" option in the menu ba...
To find an Instagram account using a phone number, follow these steps:Open the Instagram app: Launch the Instagram application on your smartphone or go to the Instagram website on your computer. Access the search bar: Locate the search bar at the bottom of the...