This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
If you’re using the Thesis Nav Menu, see Add Search Form to Thesis Nav Menu.
Adding a search form directly into a default WordPress nav menu is not very intuitive.
However, once you know how to add a search bar into your primary WP menu, it’s easy.
We’ll step through the process, avoiding code that gets into “workarounds” involving z-index, negative margins, and so forth.
This search area will be embedded right into the primary WordPress nav menu. Nice and solid.
Our goal, therefore, is a search bar integrated into a WordPress nav menu. Requirement one is that you use a WordPress menu, not the default Thesis menu (there’s an equally simple way to add search to Thesis nav menus, but it’s out of scope for this entry).
So you have a WordPress nav menu. And it’s presumed you want your WordPress search bar ready for additional CSS styling — that way, your search area can be adjusted to match the look-and-feel of your menu and your overall site design preferences.
In short, the search bar and nav menu integration needs to finish looking something like this:
Note that the gray border around the entire menu is not part of the search-in-menu integration — the border is shown here to highlight the area we’re discussing. Your WP nav menu is probably much wider than this. For illustration purposes, white space was removed so the image would fit in this entry column.
The clickable submit button you can see in the search form above is optional — you’ve probably seen the default “To search, type and hit enter” version without a submit button. If you want to adjust the PHP code, you can maintain the default Thesis text and/or appearance.
First, we create our function to add the search bar only to the primary WordPress navigation menu on your site.
Add this to the custom_functions.php file contents:
function add_search_to_wp_menu ( $items, $args ) {
if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text_input" type="text" value="Enter Text & Click to Search" name="s" id="s" onfocus="if (this.value == \'Enter Text & Click to Search\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Enter Text & Click to Search\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="search" /></p></form>';
$items .= '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);
This PHP code looks harder than it is — what’s happening here is: the search bar is being added via a filter, injecting a search input form directly into the main WordPress nav menu on your site. The default search gets a unique selector assigned for CSS styling purposes later on.
Most of the function above is output of the search form’s content — in this example, the search form will say Enter Text amp; Click to Search — and finally, the submit button is made visible near the end of the long line.
Next is making the search bar match your navigation menu visually.
Most users find CSS relatively simple to experiment with compared to PHP, so while the below search form styling is presented for demonstration purposes, feel free to make adjustments as you see fit.
Add this to the custom.css file contents:
.custom .menu-item.menu-item-search { float:right; width:260px; }
.custom .menu-search-form { float:right; padding-top:3px; width:250px; }
.custom form.menu-search-form { width:auto; }
.custom form.menu-search-form #s { background:#fff; border:1px solid #000; font-size:11px; margin:0 2px 0 0; padding:2px; width:180px; float:left; }
.custom .menu-search-form input#searchsubmit.my-wp-search { background:#000; color:#fff; cursor:pointer; float:right; padding:2px; text-transform:uppercase; }
CSS is fairly easy to “read” — what we’re doing is establishing the width of the search bar in the nav menu, pushing the search form to the right side, and for our example — line 4 above — we set a white background, a slim black border, and a typical font size for the input field where users will type their search query terms.
The final line applies to the search input’s “submit” button. The text output from the PHP function will read “Search” as the submit button text, and the CSS says to make this white text on a black background, and in all capital letters.
Search button too subtle for your taste? Don’t like the colors? Remember, you can adjust the CSS to fit your needs.
That’s all there is to it!
You should now have a functional search bar area in your primary WordPress nav menu — and it should look good enough to serve as a visual “work from” starter kit.
Note that nav menus that — prior to adding the search area — already consume most of the potential horizontal space may cause the new search area to “wrap” to another line. This is, however, no different than adding more tabs.
To get or keep everything on one line, leave at least 260 pixels from the end of the tabs to the end of the navigation container. You could also change the width values of your search area, or remove the visible submit button — whatever works best for your site.
Two snippets of code, and a search box is right inside your WP nav menu — enjoy!
Related resource — Styling Default WordPress Search Forms.