BEGINNER'S GUIDE

How to Add Search to WordPress Menu? (+ How to Remove) 

Last Updated: 8 mins By: Priyanka Panjiyar

Want to know how to add search to WordPress menu? Then, this article is exactly what you’ve been looking for.  

WordPress, by default, grants you the chance to add search to your sidebar, footer, and widget area. However, adding a search bar to navigation menu is more equitable. The main reason is, it’s more convenient and easier to find a search bar on the menu.  

Below, in this article, we’ve explained how you can add a search to WordPress menu. And for those who want to remove them, don’t worry, we’ve covered that part as well.  

So, without further ado, let’s start.  

Importance of Adding Search to WordPress Menu 

We’ve already mentioned above why adding search to WordPress menu is important. Other than that, there are a few other benefits which are listed below: 

  • Users can easily look for related information through search bar. This helps in better engagement and improves user experience.  
  •  Yet another benefit of adding the search bar is the lesser bounce rate.  

These are some common advantages you get if you add search to WordPress menu. Now, let’s get into the steps on how to add search to WordPress navigation menu.  


How to Add Search to WordPress Navigation Menu? 

1. Using a WordPress Theme 

A hassle-free way to enable search icon on the header main area is by using a WordPress theme. After giving it some thought, we’ve come to the conclusion that Zakra is the perfect theme for this. Currently, Zakra has 60K+ active installations.  

Zakra New Homepage

Moreover, this WordPress theme is highly customizable, SEO optimized, and optimized for speed. It also provides seamless integration with popular WordPress plugins such as WooCommerce, Elementor, Everest Forms, Masteriyo LMS, and much more. Moving forward, let’s install Zakra and add search to your WordPress menu.  

Install and Activate Zakra  

First thing first, Zakra theme should be active on your WordPress dashboard. To do that, navigate to Appearance >> Themes from the sidebar. Thereafter, click on the Add New button.  

Add New Theme

Next, type Zakra on the search bar. Once it appears on the search result, click on the Install button, and lastly hit the Activate button.  

Search Zakra

If you want a detailed guide, please go through this YouTube tutorial on how to install the free version of Zakra theme.  

You can also import a demo of your choice. Zakra offers 80+ demos suitable for every kind of website.  

Note: Most of the Zakra theme demo includes a search icon by default. The tutorial below is for those who imported a demo without a search icon but, want to enable it. For example, in this demo search icon is not avialable.

Zakra EduSkill Demo

Enable Search Icon on the Header Main Area 

To enable the search icon on the header area, navigate to Appearance >> Customize.  

Customization Navigation

Next, go to Header >> Header Main Area. Simply toggle on the Enable Search Icon button. Don’t forget to click on the Publish button at the end.  

Enable Search Icon

If you see the preview of your site, you’ll notice the search icon in the header area.  

Search Icon WordPress Add Search to Menu

How to Remove Search Icon from Header Main Area 

Before we dive into how to remove search from the WordPress menu, let’s take a peek at why to remove search from the menu.  

In our opinion, it’s not a brilliant idea to remove the search form because of the benefits we’ve mentioned above. Nevertheless, you might want to remove the search icon because it can interfere with the user experience.  

So, we now know why anyone would want to remove search from the WordPress menu. It’s time to take action. Undoubtedly, using the theme that’s currently active on your dashboard is the most convenient way to remove the search field.  

We’re not sure about other WordPress themes but with Zakra, removing the search bar should be as easy as pie. Without further ado, let’s get into the process. 

Disable Search Icon from Header Main Area 

Similar to the above process, navigate to Appearance >> Customize >> Header >> Header Main Area. Then, toggle off the Enable Search Icon button and hit the Publish button.  

Disable Search Icon

And that’s it, you’ve successfully removed the search icon from your menu. 

2. Using a WordPress Plugin 

Another easiest way to add a search to WordPress navigation menu would be using a plugin. The question is which plugin to use? Well, choosing a user-friendly and easy-to-use plugin is the ideal thing to do. And, one of the best plugins that fulfill all these requirements has to be the Ivory Search plugin.  

Ivory Search Plugin

The Ivory Search plugin currently has 90,000+ active installations. This plugin not only allows you to enhance the features of default WordPress search but also create new custom search forms. To add more, you can create an unlimited number of custom search forms and configure each form individually.  

Install and Activate Ivory Search Plugin 

To begin with, install and activate the plugin on your WordPress dashboard. All you need to do is navigate to Plugins >> Add New menu from your dashboard. Type the name of the plugin on the search bar. Thereafter, click on Install, and lastly hit the Activate button.  

Ivory Search Plugin Activate

For more clear explanation, please go through this article on how to install a WordPress plugin.  

Create a New Search Form 

After the successful installation of the plugin, go to Ivory Search >> Search Forms from the sidebar menu. On the next page, you can see four different forms already exists namely – Custom Search Form, Default Search Form, AJAX Search Form, AJAX Search Form for WooCommerce.  

Ivory Search Forms

You can choose a form, copy the shortcode, and paste it into the post, page, or text widget content.  

Alternatively, you can create a new search form by clicking on the Add New Search Form button.

Add New Search Form

Add Title of your search form.  Further, each form contains sections – Search, Exclude, Design, AJAX, and Options. Below, we’ve discussed all the sections briefly.  

  1. Search: From this section, you can Configure Searchable Content. You can configure what a search form should be able to search.  
  2. Exclude: As the name suggests, you can decide the contents that should be excluded from the search form.
  3. Design: Customize the color, text, and style of the search form.
  4. AJAX: AJAX option helps your user to load data from the server without a browser page refresh.
  5. Options: From here you can control the overall functionality of the search form.  

Lastly, Save Form. Soon after shortcode will be generated that you can copy and paste later.  

Add New Search Form Settings

Display Search Form in WordPress Menu 

After you’ve successfully created a search form, let’s display it in your WordPress menu. Go to Ivory >> Menu Search.  

Ivory Menu Search

Now, toggle on the menu of your choice under the Display search form on selected menus and Save it. You can Display search form on selected menu locations as well.

Menu Search Options

Other than that, you can also Select menu search form style, Select color, and Hide/Display search form close icon.  Additionally, the plugin allows you to Add menu title to display in place of search icon, Add class to search form menu item, and Add Google Custom Search (CSE) search form code that will replace default search form.  

Menu Search Settings

From Select search form that will control menu search functionality option you can choose which search form you want to display on your menu. For example, here we’ve selected the form we just created.  

Select Custom Search Form

And that’s it, this is how you can create and display search form on your WordPress menu using the Ivory Search Plugin.  


Wrapping It Up! 

Whether you want to add search form to your menu or remove it, we’ve covered both methods for you. Use a plugin like Ivory Search or Zakra theme to enable a search icon. With Zakra you can also disable the search icon as per your choice.  

And that’s it from our side on how to add search to WordPress menu. Hope this article was helpful to you. If it was then, please share it with your friends and family on your social media. You can also follow us on Twitter and Facebook for regular updates and exciting news.  

Before you go, here’s an interesting article on how to create LMS with WordPress and teach online. You can also go through the best blog hosting services for WordPress.  

Disclaimer: Some of the links in the post may be affiliate links. So if you purchase anything using the link, we will earn affiliate commission.
How to Add Search to WordPress Menu? (+ How to Remove) 

Priyanka Panjiyar

An enthusiastic Technical Writer and a Blogger. She spends her free time painting, watching movies and series, and listening to music. You can also connect with her on Twitter @Priyanka9502 and LinkedIn @priyanka panjiyar

Scroll to top

Pin It on Pinterest