Add a Search Form to Your Nav Menu - Themes by bavotasan.com

cbavota

NOTE: There is a better way to do this that I discuss in this tutorial:

http://bavotasan.com/tutorials/adding-a-search-bar-to-the-nav-menu-in-wordpress/

Way back before WordPress 3.0 came out, there was an option to include a search form in the nav menu for most of my themes. I have actually created a function to do this but so far have only included it with the release of Magazine Flow. I will add it to my other themes in their next release, but until then, here is a little tutorial so that you can get the functionality now.

First, open up header.php and add the get_search_form() function right after the call to the main nav menu around line 136:

    <?php
    if(function_exists('wp_nav_menu')) {
		 wp_nav_menu( array( 'theme_location' => 'main', 'menu_class' => 'sf-menu','sort_column' => 'menu_order', 'container_class' => 'main-navigation', 'fallback_cb' => 'display_home' ) ); 
		 get_search_form(); // This is the new code to add
		 wp_nav_menu( array( 'theme_location' => 'sub', 'sort_column' => 'menu_order', 'container_class' => 'sub-navigation', 'fallback_cb' => 'display_none' ) ); 
	} else {
		echo '<div class="main-navigation"><ul class="sf-menu"><li><a href="'.get_bloginfo('url').'">Home</a></li>';
		wp_list_categories('title_li=');
		echo '</ul></div>';
	}
	?>

Now all you need to do is add some styles to the Custom CSS editor:

#header { position: relative; }
#header #s {
	position: absolute;
	width: 178px;
	top: 120px;
	right: 20px;
	-moz-border-radius: 0;
	-khtml-border-radius: 0;
	-webkit-border-radius: 0;	
	border: 0;
	background: url(images/search.png) no-repeat right #fff;
	padding: 5px 20px 5px 6px;	
	font-size: 12px;
	z-index: 1000;
	height: 15px;
	}

You will have to adjust the top setting since your nav menu position might be greater or lower.

ahirsch

This worked great for me using Magazine Premium. I have a question about the text inside the search box. After doing this i went into searchform.php to try to change the text that shows up inside the search box. whenever i changed the text from 'Search & Hit Enter' to anything else, it would change the text, but the text wouldn't disappear when i clicked inside the search box. instead it stayed there and i would have to manually delete those letters. how do i change that text AND have it disappear when i click in the search box?

rogerpiantadosi

Worked for me also but I went through the same thing and have exactly the same question as adamhirsch.

cbavota

Your input tag needs some JavaScript.

<input type="text" class="search_input" value="<?php _e('Search &amp; Hit Enter', "magazine-basic"); ?>" name="s" id="s" onfocus="if (this.value == '<?php _e('Search &amp; Hit Enter', "magazine-basic"); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search &amp; Hit Enter', "magazine-basic"); ?>';}" />

ahirsch

Sorry, I'm confused. Here's what I put in my searchform.php file

 <form method="get" id="searchform" action="<?php echo home_url(); ?>/">
<input type="text" class="search_input" value="<?php _e('Who&apos;s got my...?', "magazine-basic"); ?>" name="s" id="s" onfocus="if (this.value == '<?php _e('Who&apos;s got my...?', "magazine-basic"); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Who&apos;s got my...?', "magazine-basic"); ?>';}" />
<input type="hidden" id="searchsubmit" />
</form>

I want it to say "Who's got my...?" (without the quotes) and then have that disappear when someone clicks in the search box. What am I doing wrong? I've also tried with with it saying "magazine-premium" instead of "magazine-basic" but that doesn't make a difference. Thanks!

cbavota

The apostrophe is giving you some grief. Use this:

<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
<input type="text" class="search_input" value="<?php _e("Who&rsquo;s got my...?", "magazine-basic"); ?>" name="s" id="s" onfocus="if (this.value == '<?php _e("Who&rsquo;s got my...?", "magazine-basic"); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e("Who&rsquo;s got my...?", "magazine-basic"); ?>';}" />
<input type="hidden" id="searchsubmit" />
</form>

ahirsch

perfect! thank you!

tedhoffman

I have performed the steps above. How do I get the same magnifying glass to show in the search box as you show at the top of this page?

cbavota

You need to use CSS and add that image to your images folder.

tedhoffman

Where can I get that image so I can add it to my images folder? Can you be more specific about the CSS to add?

You do show this effect in your demo so we would expect to be able to reproduce it.

Thank you.

markphillips · 11:20AM

You can add the magnifying glass by changing the link in the custom CSS from

url(images/search.png)

to

url(wp-content/themes/magazine-premium/images/search.png)

Hey there!

Categories

In this Discussion

Tagged