WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add a Search Bar to WordPress Menu (Step by Step)

How to Add a Search Bar to WordPress Menu (Step by Step)

Last updated on September 4th, 2019 by Editorial Staff
136 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add a Search Bar to WordPress Menu (Step by Step)

Do you want to add a search bar to your WordPress navigation menu?

By default, WordPress lets you add a search section on your website sidebar, footer, and other widget-ready areas. However, many users prefer to have the WordPress search box in the navigation menu because it is easily noticeable on the top.

In this article, we will show you how to easily add a search bar to your WordPress menu without having any coding knowledge.

Adding a Search Bar to WordPress Menu

Why You Should Add a Search Bar in Menu?

A site search makes it easy for your users to find what they’re looking for without leaving your website. It helps improve user experience on your website and boosts engagement.

This is why most usability experts recommend adding a search option in the navigation menu, so users can easily find it.

However, the default WordPress search widget is limited to only widget-ready areas.

Luckily, there are many different WordPress search plugins which let you add the search bar to different locations on your site including menus.

For this tutorial, we have chosen the Ivory Search free plugin. It allows you to create new custom search forms and enhance the default WordPress search.

With that said, let’s take a look at how to add a search bar to your WordPress menu.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Adding a Search Bar to WordPress Menu

First thing you need to do is to install and activate the Ivory Search plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Ivory Search » Search Forms page to create a new search form.

Ivory Search Include Options

The plugin automatically adds the default search form, so you can quickly review its settings and add it to your WordPress menu.

Search settings allow you to select which content on your website should be included in the site search.

The ‘Includes’ section lets you choose which post types, posts, pages, category, custom fields, etc. should be included in the search query. You need to review the options and click the Save Form button.

Next, there is the ‘Excludes’ section, which lets you define the content that you don’t want to show in search results. Once done, click the Save Form button again to store your settings.

Ivory Search Exclude Options

The ‘AJAX’ section lets you enable AJAX functionality for your search form.

Ivory WordPress Search Bar AJAX Settings

The ‘Options’ section lets you define how many results to show per search page along with other advanced settings.

Define Search Results Per Page in Ivory Search Plugin

Now your custom WordPress search form is ready. Once again, don’t forget to save your settings.

After that, the next step is to add the search form to your navigation menu. Simply go to Ivory Search » Settings page to configure the search bar to your WordPress menu.

On this page, you will see the ‘Select Menu’ tab. From here, you can simply toggle the menu where you would like to add the search bar.

Select WordPress Menu to Show Search Bar

This list of menus (Primary Menu and Footer Menu) belongs to your WordPress template. If you change the template of your site, then the list will be automatically updated with the available menus from your template.

After that, you can choose the search style from the Form Style accordion below.

The plugin allows you to display the search form in five different styles: Default, dropdown, sliding, full width, and popup.

Ivory Search Form Styles

If you like, you can further customize the options by going to the ‘Settings’ section below ‘Menu Search’.

From there, you can add your search form to the header, footer, manage mobile display for search, and more. These settings will also help in controlling the search results for your users.

Ivory Search More Settings

Once you are satisfied, make sure to save your settings. After that, you can head over to your website to see the search bar in the WordPress navigation menu.

Search Bar in WordPress Menu Preview

We hope this article helped you learn how to add a search bar to a WordPress menu. You may also want to see our list of most useful tips to speed up WordPress and boost performance.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

136 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

25 Comments

Leave a Reply
  1. jafrin says:
    Aug 13, 2020 at 1:20 am

    hi
    This video is very helpful for me.But I want bar menu is like amazon page .Please help me .How do create big search bar like in amazon page

    Reply
    • WPBeginner Support says:
      Aug 13, 2020 at 10:51 am

      It would depend on the specifics you’re looking for but for a starting point we would recommend taking a look at our article below:

      https://www.wpbeginner.com/plugins/how-to-let-users-filter-posts-and-pages-in-wordpress/

      Reply
  2. Erin says:
    May 28, 2020 at 8:16 pm

    Is there a way to display the results that are generated by the plugin differently? I get a list of images and descriptions but they display images in all different sizes. I would like them to display in the same way as my product pages do with 24 results per page, and 4 columns.
    thank you

    Reply
    • WPBeginner Support says:
      May 29, 2020 at 9:24 am

      For customizing the results page you would want to check with the plugin’s support and they should be able to assist.

      Reply
  3. Okereke Divine says:
    Apr 16, 2020 at 11:18 am

    As usual, wpbeginner has always been helpful. Thanks alot

    Reply
    • WPBeginner Support says:
      Apr 17, 2020 at 10:39 am

      You’re welcome, glad our guide could be helpful :)

      Reply
  4. Parwez says:
    Mar 31, 2020 at 10:02 am

    Sir, how did u create logo, search bar and menu in header side by side

    Reply
    • WPBeginner Support says:
      Mar 31, 2020 at 10:10 am

      Our theme is custom created so we manually set that up with the creation of the theme :)

      Reply
  5. Angelica says:
    Jan 4, 2020 at 9:21 am

    Really helpful! I find the default style is not visually pleasing, but the sliding option works a treat. Thanks for this.

    Reply
    • WPBeginner Support says:
      Jan 6, 2020 at 11:19 am

      You’re welcome, glad our article could be helpful :)

      Reply
  6. Rochelle says:
    Dec 19, 2019 at 3:39 pm

    I would like the search item to appear as the first item in the menu, not the last. Is this possible?

    Reply
    • WPBeginner Support says:
      Dec 20, 2019 at 3:24 pm

      It would depend on your specific theme but if you reach out to the plugin’s support they will be able to help you change the placement :)

      Reply
  7. Anupam Kumar says:
    Sep 8, 2019 at 3:50 am

    Hi,

    How to style the social icons like you did in your site for, with those gaps and lines , i dont know css,

    Thanks

    Reply
    • WPBeginner Support says:
      Sep 9, 2019 at 9:38 am

      For understanding CSS and how we set up our icons, you would want to take a look at our article here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

      Reply
  8. Rubb says:
    May 1, 2019 at 4:29 am

    The explain it not right, the screens images is wrong and I think it is the wrong plugin

    Reply
    • WPBeginner Support says:
      May 1, 2019 at 11:47 am

      It appears the plugin has updated since this article was last updated, we will take a look into updating this post.

      Reply
  9. James King says:
    Apr 1, 2019 at 5:01 am

    This doesn’t work guys. There’s no such plugin for a start.

    Reply
    • WPBeginner Support says:
      Apr 1, 2019 at 1:48 pm

      Thank you for letting us know, it appears the plugin has been renamed since we created this article. We’ll look into updating this :)

      Reply
  10. Raymond says:
    Dec 25, 2018 at 3:18 pm

    Why is every solution on this website a plugin? Plugins bloat websites and slow them down; one would expect you to know that. There are better solutions than installing a plugin for everything!

    Reply
    • WPBeginner Support says:
      Dec 27, 2018 at 1:25 pm

      We strive to make the solutions as simple as possible for our users which is why our articles tend toward plugins. This way if a user is not comfortable editing their site’s files they have a plugin option that can be easily removed from their site should it not work for them.
      Also, it’s not as simple as all plugins slow down your site. Poorly coded plugins slow down your site. https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site/

      Reply
  11. Ann says:
    Nov 20, 2018 at 1:40 am

    why does my setting doesnt have an ADD TO SEARCH MENU

    Reply
    • Dan Conway says:
      Nov 23, 2018 at 11:09 am

      Not sure if it is due to an update but I noticed the same thing. But it seems the option can be found under ‘Ivory Search > Settings’ then you should be presented with the first settings which are ‘Menu search’ and the first expandable option to select a menu to add it to.

      Reply
  12. Aditi Bisen says:
    Oct 22, 2018 at 12:03 pm

    Hi,
    Can we choose whether the search appears only for mobile/tablet version and not for desktop?

    Reply
  13. Ihsan says:
    Jun 16, 2018 at 11:56 am

    unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.

    Reply
    • Damith says:
      Jun 20, 2018 at 4:13 am

      No, You don’t need to become developer or professional to make small custom CSS.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
LearnDash
LearnDash Coupon
Get the lowest price on the best learning management system (LMS) plugin for WordPress.
Weglot Coupon
Get 15% OFF on Weglot multilingual plugin for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.