Blog

WEBFI-WordPress-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 to your sidebar, footer, and other widget-ready areas. However, there is a preference for some to have the search option in their menu. In this video, we will show you how to add a search bar to your WordPress menu.

Use Promo Code WPBVIP
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin https://aioseo.com/
►Best Landing Page Builder for WordPress https://www.seedprod.com/
►Best WordPress Giveaway Plugin https://rafflepress.com/

–Related Videos–

►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90

You would first want to check in your theme options area if your theme has one or under Appearance, Customize. If your theme already has this option it would likely already be styled for your theme. If not, you would want to install and activate the Ivory Search plugin found here:

https://wordpress.org/plugins/add-search-to-menu/

Timestamps
0:00 Intro
0:17 How to add a search bar to the header widget
0:30 Add search using theme customizer
1:09 How to add search to menu area using a plugin called Ivory Search

With it installed and activated, you would want to go to the Ivory Search section added to your admin area. Under Search Forms you can modify what is included in the search should you want to hide certain pages. The plugin even allows you to go under options to change how many posts are on the results page.

Once you’ve set up the search options you can go to Ivory Search, Settings to enable the search option where you would like it. when going under Select menu it should show you the menu options available to your specific theme.

If you liked this video, then please Like and consider subscribing to our channel here for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner

Feel free to take a look at the written version of this tutorial here:
https://www.wpbeginner.com/plugins/how-to-add-a-search-bar-to-wordpress-menu-step-by-step/

Check us out on Facebook
https://www.facebook.com/wpbeginner

Follow us on Twitter
http://twitter.com/wpbeginner

Check out our website for more WordPress Tutorials
http://www.wpbeginner.com
#WordPress #WordPressTutorial #WPBeginner

source

32 Comments

  • Carlos Arturo Galvan Grajales on January 21, 2020

    THX!

  • Mat Lins on March 5, 2020

    Its great if you actual use your themes menu locations, if you use a page builder Nav widget then it doesnt work, as you assign menus to theme locations.

  • Prem KumarK on June 3, 2020

    Search box is for free or cost

  • Daniela Valdivia.VibraTours on June 16, 2020

    I was just about to do coding to get the search bar in the menu! Until I found your video and I found out my theme already had one which I just had to add it. Thanks a lot! You got a new subscribed 🙂

  • Jeff Mouradi on July 5, 2020

    You're just amazing, Thank you

  • Sudipto sen on July 18, 2020

    How can I put a search bar on my homepage hero element ?? Is that possible without a lot of coding ??
    Please Reply… (I use generatepress premium)

  • Bareq Mahadeen on August 10, 2020

    Hello….so i made a website and i added the search tool but its icon showing like a square not a search tool but when i press on it it actually works but i need to show the icon instead of the square

  • J4DN on August 13, 2020

    When I tested the search bar for my online store I typed “t” to see if it would search all products with “t” and I realized that it does not show any products unless the “do not display post_type in the search URL” toggle is off. When it is on my products show but the way they are displayed is very unprofessional to me. Is there any way I could fix this?

  • lyrical Gyaan on August 26, 2020

    Can we do it on wordpress mobile

  • Barbara Hegreberg on September 3, 2020

    This does not work for me at all!!!

  • Erin Jones on September 10, 2020

    Very helpful thanks!

  • Phillip on September 17, 2020

    Great vid, and it works for me, except, I'm getting page results showing up, that don't have the word that I might search for…. Example. warehouse. It gives me 3 results. Only 1 page has the highlighted words warehouse in it. The other two? There is no word called warehouse within them. Thoughts? I'm sure I must not have something ticked, but I can't seem to find it.

  • Preethi Rathinam on October 2, 2020

    Really thanks for making these awesome videos!
    I saw many WordPress tutorials !
    Yet this is the best!
    Thanks alot . It helped me alot!
    N this is my site!
    https://wowsooru.wordpress.com
    Educational blog related to food science ,nutrition , food technology

  • Sakib Nagori on October 21, 2020

    I have created a search bar. And it works perfectly. But the thing I need is when someone enters his/her city zip code, only one particular page should open. How do i do that? Anyone?

  • didi dalale on October 26, 2020

    thank you so much

  • Daniel Limón on December 5, 2020

    Thanks! This helped me a lot! I suscribed <3

  • Miki Sivan on December 5, 2020

    I wonder how could we add a YOUTUBE-Search box on a page (not a local-Search). Can anyone help with this?

  • MusicIsMyChurch on December 8, 2020

    Hello, when typing something in the search, the text is displayed backwards. How do you fix this? Thank you in advance!

  • Wickramaratne Rajitha Frances on December 11, 2020

    Thank you… this helps me lots…

  • ป้องอิอิ on January 22, 2021

    Thank you

  • Muksuperheen Uniohjaaja on February 1, 2021

    I made it!! Thanks <3

  • Andrey Soyustov on February 5, 2021

    Thanks!

  • RM 1876 on March 3, 2021

    Will this pick up WooCommerce products too ?

  • Isaac Rios on March 6, 2021

    awesome, thank you

  • Mystic Flickr on April 12, 2021

    I was struggling to add the search menu to my homepage, finally, your video solved my issue

  • Discover with Mubeen on April 27, 2021

    How to added search bar below header menu?

  • 43bluedoors Bonnie and Trinity on May 18, 2021

    Great video, right to the point, and exactly what I needed. Thank you

  • WasteKnot on June 1, 2021

    Very clear and straightforward instructions – the plugin worked for my homepage instantly! Thank you!

  • Andrew Kislik on July 16, 2021

    I did all this and yes, the search field showed up in my menu, but it never returned any results. So frustrating. I saw a shortcode and tried putting that in the pages but that also didn't work. I'm using Elementor theme. Thanks.

  • bambooflute on August 1, 2021

    Hi, it works. Once I click on to search , the page I want shows up, but, on top of my header( page) shows a list of descriptions saying" Noticed: Trying to get to property ID of non object in/home2 …./ Public_html/wp-content/plugins/all-in-one-seo-pack/app/meta/description.php online 155.
    Do you know why this happens? I haven't launch my website yet. Please help🙏

  • Earth Graduate on September 4, 2021

    I'd like to add two buttons on my website on the header area next to the menu , i need them to be visible both in transparent and sticky header , the thing is the theme that I'm using allow me to put only one widget and i used it to put the first button , but i need to add one more button next to it , do you know how i can do it ?

  • Tigercat_VIP on September 19, 2021

    thank you! 😀

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
loading
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy

 

 

WEBFI NETWORK OFFICE HOURS 

Mon-Sun from 8:00 am /4:00 pm USA-ET

WhatsApp us

Small Business – WordPress – CPanel – Hosting

© Webfinet Affordable Private Small Business Solutions All Rights Reserved 2021 - Powered By Marquez.Group
error: WEBFINET SECURITY IS ON