In this tutorial, you’ll find several tested PHP code snippets which you can use to display a search form in your navigation menu. You can use either the WordPress search function or the Genesis search function.
You can also add a search box in any menu position including the primary and secondary menu’s.
I’ll also provide some sample CSS code so you can get your form looking square and flush with your menu.
Note: The work involves playing around with different CSS properties and values which will be different for every theme. The PHP part is easy with this code.
Genesis Search Primary Nav
Prefer Google Search?
Learn how to add a Google custom search box to your navigation menu using the Thesis theme.
Trying this code but would like to implement a stacked font awesome icon instead of the search form. Seems like this would work, but since what I want to add is not the search would it still work?
Hello Emily
Still work just a bit different CSS and different code to load the fonts.
The method to load and display font awesome is very similar to Dashicons just more involved with loading them because they’re not included in WordPress core.
How can I add google’s cse to my nav bar?
Whats your website address Anand?
By replacing “genesis_search_form with get_search_form” wordpress search didn’t appear on my site. The genesis nav extras search bar appears again. Please help me fix it.
I never suggested using get_search_form in this specific code.
Use genesis_search_form which is included in this code and works as the screenshots show.
You can’t just add any tag to any code and expect it to work.
Please DON’T re-publish content from this site on any other site without my permission.
Using the above code I tried, but the search box is not properly aligned in the navigation bar. How can I add wordpress search box to secondary navigation?
Every theme is coded differently so you will need to adjust the values for padding and margins according to your themes default CSS.
I don’t provide custom coding solutions on demand for free.
A small amount of effort on your behalf is required.
Hi! I followed your instructions and they worked well, I see the search bar showing up on my site so that’s a big first step! However, it’s showing up below the secondary nav. Do you know how I can make it show up to the right of the menu items?
Hello Joshua
Did you try adding the CSS?
The screenshots i embedded in the post show the result after adding the CSS code as well which floats the search bar to the left or right.
Yes but it didn’t work, it just was the whole width of my screen and was below the nav. I played around with firebug until I got it looking how I want, it probably isn’t correct but it looks ok.
Thanks!
There’s thousands of different themes which are all coded differently.
Generally, when you find PHP on someones site, they don’t include CSS for this reason unless the post is targeted at one specific theme.
What you will need to do is write the CSS to work with your theme as its impossible to include a solution which works with every single theme.
Unless, you add a widget area in that area which may still require some tweaking of the CSS.
The PHP code hooks in the search function but doesn’t tell the browser exactly where to position it or what color it should be etc.
The CSS positions, aligns, floats and adds padding, margins amongst other things.
Thanks for this tutorial! I tried out the code for the secondary navigation on the Metro Pro theme, and it worked with an additional bit of css code:
.secondary-search {
margin-top: 1px;
margin-bottom: -5px;
float: right;
width: 200px;
}
However, I’m seeing a bullet on the left side of the search form. Any ideas how to remove it? 🙂
Thanks for sharing the solution for the Metro Pro theme Patricia
You could try something like(untested):
.secondary-search ul {list-style:none;}
.
Actually, i just updated the code which should be using span class rather than li class for lists.
You could also use div class as i tested both on the News Pro theme and they remove the bullet.
I m using the News Pro Theme.. and the search bar is well placed in secondary nav. However, it disappears for smaller screen sizes when the secondary menu becomes center aligned. How should i fix this?
Thanks
Link to it please so i can inspect the CSS.
Hey,
Where shall we paste the additional bit of CSS code you suggested?
Your style.css file however it may need to be modified depending on which themes you’re using
This doesn’t work for widget in header?
Hi Ken
It only works for any Genesis Nav Menu.
You can easily hook in the search form to the Genesis right widget area using PHP code or simply place the search widget in that widget area.