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
THX!
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.
Search box is for free or cost
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 🙂
You're just amazing, Thank you
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)
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
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?
Can we do it on wordpress mobile
This does not work for me at all!!!
Very helpful thanks!
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.
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
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?
thank you so much
Thanks! This helped me a lot! I suscribed <3
I wonder how could we add a YOUTUBE-Search box on a page (not a local-Search). Can anyone help with this?
Hello, when typing something in the search, the text is displayed backwards. How do you fix this? Thank you in advance!
Thank you… this helps me lots…
Thank you
I made it!! Thanks <3
Thanks!
Will this pick up WooCommerce products too ?
awesome, thank you
I was struggling to add the search menu to my homepage, finally, your video solved my issue
How to added search bar below header menu?
Great video, right to the point, and exactly what I needed. Thank you
Very clear and straightforward instructions – the plugin worked for my homepage instantly! Thank you!
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.
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🙏
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 ?
thank you! 😀