How to Add a Search Bar to WordPress Menu

"This Post contains affiliate links; we earn commissions if you shop through the links on this page."

featured image - how to add search bar to WordPress

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.

search result for Ivory search plugin in WordPress admin area

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.

Setting page in Ivory Search Plugin

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

Form Style options in Ivory Search Plugin

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.

Add new search form button in Ivory Search WordPress plugin

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.

Setting options in Ivory Search plugin

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.

Design settings in Ivory Search settings page

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.

Ajax and Woocommerce settings in Ivory Search Plugin

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.

Options settings in Ivory Search

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.

9 thoughts on “How to Add a Search Bar to WordPress Menu”

  1. Hello Shamsudeen,

    Adding a search bar on the website is very important. there are many themes available that have an option to set the search bar to the Navigation menu. You have mentioned everything very clearly here.

    Regards,
    Vishwajeet Kumar

  2. Shamsudeen,

    After reading this post, I have noticed your sticky menu and of course, the sticky search box. Most the themes come with search box by default, but the special functionalities like adding it to the navigation menu, sticking as the user scrolls, etc. can make the job easier for the visitors to use it. Thanks for covering this topic on your blog space.

  3. Hey Shamsudeen, hope you’ve been well!

    Thanks for letting me know about this plugin, accessible site search can be very important especially in certain niches.

    On my larger sites right now I’m using the search plugin Relevanssi as I’ve found the search results to be far more relevant than WordPress’ built-in search, it allows you to tweak what factors cause posts to rank above others which I really like.

    I do see this has some options that I don’t believe Relevanssi has, like the ablility to highlight the results or fuzzy matching. I may have to try it out at some point!

    – James McAllister

    1. Hi, James,

      Good to have you here once again, thanks for reading through.

      I haven’t read about Relevanssi until now, so thanks for the mention.

      Stay safe, stay healthy.

  4. Hey SHAMSUDEEN ,

    Awesome and well-explained post. Glad to say that you have provided helpful guide for adding a search bar to WordPress navigation menu. I really like & appreciate that way you have explained & elaborated the things in such a step-by-step process guide that are true enough to understand. While scrolling through your blog post i have noticed that you have also discussed about an importance of search bar using good points that are really providing a good understanding and making a concept very clear. Yes i completely agree with your words that adding a search bar on website are so important & provides good advantages, whereas including a search bar on a site increases duel time and helps in understanding an audience interest. Your each listed steps ( including images ) for creating a search bar in WordPress menu using a plugin are so clear, well-elaborated and offcourse easy to understand. Following the steps will be a great help for WordPress users and allows them for creating a search bar for their WordPress site easily.

    After going through this complete guide i really gain ideas and am sure tat this post is definitely going to help lots of people, readers and especially WordPress users. This post will also helps readers in understanding the importance of including a search bar on WordPress site. Fabulous work and keep sharing more similar post.

    Eventually thanks for sharing your knowledge, ideas and such an informative post.

    Regards
    -Aadarsh

  5. Hi Shamsudeen,
    thank for the tip. I want to add search bar to my nav bar as my theme doesn’t have it enabled by default.
    I think there’s value in making life easier for site visitors:)

    Cheers!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.