How to Add a Search Bar to WordPress Menu

In a previous post, I showed you how to add a sticky sidebar to a WordPress blog with the help of a plugin. Today, I want to show you how to add a search bar to WordPress menus.

Before I show you how to add a search bar in WordPress menus without knowing how to code, let’s explore why a search box is important on a blog.

Why is Search Box Important on a Blog?

Imagine your website as the search engine users visit to find what they’re looking for—thousands of documents, pages, posts, whiteboards, videos, etc…buried in your website.

When users visit your website, the only pages they can reach directly are the ones labeled in the navigational menu, footer area, recent posts, featured posts, and pages.

You must give users the means to access your previously published content quickly. This will help them to find the information they’re looking for without leaving your website.

They can look up your website content using tags, categories, keywords, phrases, etc.

A search box is a mini search engine limited to only pulling content from your website.

For a smooth user experience, you need to have a search box on your website. You never know what content users might be searching for within your content archives.

To take it further, here is a list of other benefits of having a search box on your website.

1. Increase Duel Time

The easier people find what they’re looking for on your website, the likelihood they will stay longer than expected.

If users can’t find exactly what they’re looking for with a few clicks, they’re more likely to check out your closest competitors.

With a search bar on your website, you’re allowing users to explore your website as much as possible.

2. Learning More About Your Audience Interest

If the search box is connected to your Google Analytics, you can explore the data to see how often a particular query is searched.

This will help you to understand your audience’s interest. The type of content your users like to read.

You can then use the information to make a better marketing plan, edit existing content, create dedicated content pages, etc.

For an eCommerce site, this tactic could greatly benefit your advantage. For example, if a lot of people are searching for a “red Gucci bag,”

The next thing you may want to do is bring a dedicated red Gucci bag page to the website front. Make it easily accessible to your users, and give it more exposure.

3. People are Used to Searching Functions

With social media sites’ rise and heavy usage among internet users, most people are now accustomed to a search function.

So having a search bar on the website is not a matter of choice; it is now part of a good web design practice.

People use the search function on social media sites to look up a lost friend, find job opportunities, search profiles, photos, videos, hashtags, etc…

Online users are now more internet savvy than before. You’re not doing yourself any good if you have no search function on your website.

Now that we’ve discussed the importance of having a search box on your website let’s see how to create a search box in the navigational menu.

How to Add a Search Bar in The Header WordPress Menu

WordPress lets you add a search box to any widget-ready area on your blog by default.

But for some reason, as in my case, you may want to add a search box on the navigation menu or other website areas.

Fortunately, many WordPress plugins let you quickly add a search bar to any part of the website, including the blog navigational menu.

One of which is the Ivory Search WordPress Plugin.

This is the plugin we will use for this Ivory search tutorial. It’s simple, straightforward, and easy to configure or set up.

You’re good after installation and activation if you only need to add a search bar in the WordPress header without any extras. I will show you how to use the Ivory search plugin to add a search bar to the WordPress menu.

So, let’s stay on this page together…

To install the plugin, you can either install it via your admin area or through the WordPress.org plugin repository.

If installing via WordPress admin, type Ivory search in the search box, and there you have it.

Here is the link if you prefer to download it via the WordPress.org website.

After activation, go to Ivory Search>>>Menu Search within your WordPress admin area to select where you want the search bar to appear on the navigational menu.

The plugin will automatically add the search box to your blog’s primary header menu by default.

You can make the changes here if you want it in a different location, like in the footer menu or different menu locations.

You can also select the position of the search box in the navigational menu here. It could be at the start or the last item on the menu list.

Also, you can select your preferred search form style on this page. At the time of writing this line, the Ivory search plugin has five different search box styles:

• Default.
• Dropdown.
• Sliding.
• Full Width.
• Pop up

Selecting which search form will control the navigation menu function is beneath these features. This is helpful if you have multiple search boxes created.

Ivory Search Plugin Search Forms Page

You have more options to play with on the Ivory Search forms page.

Let’s see a few things you can do here.

First, you may want to add a search box to a post or page directly. Or have different search box functionalities on different pages.

To add a search box to pages or post directly, go to Ivory search >>>Search forms, then follow the instructions.

By default, there’s a search box shortcode available on this page you can copy and paste into the page.

This will add the default search box to that page.

But to define your search box functions, you must create a new one and configure the settings.

Search

So click on Add New Search Form, and give it a name for identification purposes.

You have a few settings to tweak to have your search form function the way you want. And even customize its colors to fit your blog design.

Exclude

The “Exclude” function allows you to define the excluded content in the WordPress search bar. You can select a list of posts or pages to exclude from the search result.

This gives you total control over the blog content you want people to discover via the search box.

In the Pro version of the Ivory Search Plugin, you can exclude a selected author’s posts from the search results.

This option might be helpful for multi-author blogs.

Design

The design button allows you to customize your form how you like it. You can customize the colors, text, and style to fit your blog look and design.

Ajax

The “Ajax section” lets you enable the Ajax and Woocemmerce functionalities for your search form. But you’ll need to install and activate the woocommerce plugin to use the woocommerce function.

Option

And lastly, the options section gives you access to many other settings options. Here you can define how many results to show per page.

The option to highlight search terms and posts that include all search terms or not. There are more search options to define here.

Once you’re done defining your search form settings, you can preview it on the blog to see how it works for your audience.

Remember to click the Save button once you’re done with each set.

Conclusion…Add a Search Bar to WordPress Menu

If you need to add a search bar to WordPress navigational menus, this tutorial will help you achieve that.

Ivory Search is one of the best WordPress plugins for adding a search bar to the navigation menu in any WordPress blog.