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.

Shortly after I published the post where I showed you how to add a sticky sidebar, I switched to a no sidebar blog post layout.

As you can see, there is no sidebar anymore on this blog.

I love the no sidebar blog layout because it brings the content to the front and center of the user’s view without any distraction. This will make reading more enjoyable and inviting to the eyes.

It also improves the reading experience as there are no bells and whistles on the page. Only what really matters is left on the page.

But as good as it may be, there is one little problem that comes along with it…

The search box on the sidebar no longer has its place. And there seems to be no space for it on the blog anymore. So I was left with either to add the search box to the navigational menu, header section, or the footer area.

Adding the search box to the footer area is a quick fix. Since the footer area is a widget-ready section, it makes it an easier option to think of.

But for a better user experience, the search box can’t be in the blog footer area.

It won’t be seen quickly.

A lot of users might not even notice it if it’s placed in the footer area. And for the header section, I thought of pushing down the navigational menu, thereby giving too much space to the header area.

So, I decided to add the search bar to WordPress menus.

Before I proceed to show you how to add a search bar in WordPress menus without knowing how to code, let’s explore some of the reasons 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 could reach directly are the ones labeled in the navigational menu, footer area, recent posts, featured posts, and pages.

You need to 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 by using tags, categories, keywords, phrases, etc.

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

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 can 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 giving users the chance to explore your website as much as they can.

#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 content marketing plan, edit existing content, create dedicated content pages, etc.

For an eCommerce site, this tactic could be of great benefit to 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 Search Functions

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

So it is not even a matter of choice to have a search bar on the website; 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 talked about 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 search bar in header WordPress Menu

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

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

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’re going to use for this Ivory search tutorial. It’s simple, straightforward, and easy to configure or set up.

In fact, if you only need to add a search bar in the WordPress header without any extras, you’re good after installation and activation. 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 you’re 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.

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

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

You have the option to select the position of the search box in the navigational menu here, too. It could either be at the start or the last item on the menu list.

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

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

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

Ivory Search Plugin Search Forms Page

On the Ivory Search forms page, you have more options to play with.

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 if you want to define your search box functions, you need to create a new search box 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 it. 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 in 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 useful for multi-author blogs.

Design

The design button gives you access to customize your form the way 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 search 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 now preview it on the blog to see how it works for your audience.

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

Conclusion…

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.