A search bar might be just what you need to enhance your site’s navigation and boost user engagement.
WordPress, by default, allows you to add search to your sidebar, footer, and widget area.
However, adding a search bar to the navigation menu is more equitable. The main reason is that finding a search bar on the menu is more convenient and accessible.
This article explains how to add a search to the WordPress menu.
So, without further ado, let’s start.
Importance of Adding Search to WordPress Menu
Having a search on your WordPress menu allows users to find what they’re looking for easily. As someone who lands on your page, the first thing your eyes will meet is the menu.
This improves user experience and increases user engagement, allowing them to explore more of your site and find more.
Users needn’t spend much effort, which indirectly lowers your site’s bounce rate.
These are some common advantages of adding a search to the WordPress menu. Now, let’s get into the steps for adding a search to the WordPress navigation menu.
How to Add Search to WordPress Navigation Menu?
We’ll add search to our WordPress menu in two ways: one with a theme and the other with a plugin. Feel free to use either method!
1. Using a WordPress Theme
Using a WordPress theme is a hassle-free way to enable the search icon in the header’s main area. After some thought, we’ve concluded that Zakra is the perfect theme for this. Currently, Zakra has 50K+ active installations.
Moreover, this WordPress theme is highly customizable, SEO optimized, and optimized for speed. It also seamlessly integrates with popular WordPress plugins such as WooCommerce, Elementor, Everest Forms, Masteriyo, etc. Let’s install Zakra and add search to your WordPress menu.
Step 1: Install and Activate Zakra
First, the Zakra theme should be active on your WordPress dashboard. To do that, navigate to Appearance >> Themes from the sidebar. After that, click on the Add New button.
Next, type Zakra into the search bar. Once it appears in the search results, click the Install and Activate buttons.
If you want a detailed guide, please go through this tutorial on how to install a WordPress theme.
You can also import a demo of your choice. Zakra offers 100+ 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 available.
Step 2: Enable the Search Icon on the Header Main Area
To enable the search icon on the header area, navigate to Appearance >> Customize.
Next, go to Header >> Header Main Area. Toggle on the Enable Search Icon button. Don’t forget to click on the Publish button at the end.
If you see the preview of your site, you’ll notice the search icon in the header area.
2. Using a WordPress Plugin
Another easiest way to add a search to the WordPress navigation menu would be to use a search plugin. The question is, which plugin should I use?
Well, choosing a user-friendly and easy-to-use plugin is ideal. The Ivory Search plugin is one of the best for fulfilling all these requirements.
The Ivory Search plugin currently has 100,000+ active installations. This plugin allows you to enhance the features of the default WordPress search and create new custom search forms.
You can create unlimited custom search forms and configure each form individually to add more.
Step1: Install and Activate the Ivory Search Plugin
To begin with, install and activate the plugin on your WordPress dashboard. Navigate to the Plugins >> Add New menu from your dashboard. Type the plugin’s name in the search bar. Then click on Install and hit the Activate button.
For more clear explanation, please go through this article on how to install a WordPress plugin.
Step 2: Create a New Search Form
After the plugin has been successfully installed, go to Ivory Search >> Search Forms from the sidebar menu.
On the next page, you can see four different forms already exist: a Custom Search Form, a Default Search Form, an AJAX Search Form, and an AJAX Search Form for WooCommerce.
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 the Title of your search form. Each form contains sections: Search, Exclude, Design, AJAX, and Options. Below, we’ve discussed all the sections briefly.
- Search: From this section, you can Configure Searchable Content. You can configure what a search form should be able to search.
- Exclude: As the name suggests, you can decide what content should be excluded from the search form.
- Design: Customize the search form’s color, text, and style.
- AJAX: The AJAX option helps your user load data from the server without refreshing the browser page.
- Options: From here, you can control the overall functionality of the search form.
Lastly, Save Form. Soon after, a shortcode will be generated that you can copy and paste later.
Step 3: 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.
Now, toggle on the menu of your choice under the Display search form on selected menus option and click the Save button. You can also display the search form on selected menu locations.
In addition, you can select the menu search form style, select the color, and hide/display the search form close icon.
Additionally, the plugin allows you to add a menu title to display in place of the search icon, a class to the search form menu item, and a Google Custom Search (CSE) search form code that will replace the default search form.
You can choose which search form to display on your menu from the Select search form that will control the menu search functionality option. For example, here, we’ve selected the form we just created.
And that’s it. Using the Ivory Search plugin, you can create and display a search form on your WordPress menu.
Wrapping It Up!
We’ve covered both methods to add search bar to your WordPress menu using the Zakra theme or the Ivory Search plugin.
That’s it from our side on how to add search to the WordPress menu. We hope this article was helpful to you. If it was, please share it with your friends and family on social media.
You can also follow us on X and Facebook for regular updates and exciting news.
Before you go, here’s an interesting article on creating LMS with WordPress and teaching online. You can also go through the best hosting services for WordPress.