search_barArtisteer makes no provision for placing the search box anyplace other than the sidebar. I searched through all the themes I had collected and found a technique that worked quite well. I just needed to add a new DIV with the search code, some CSS for style/placement and I was ready to roll.

It doesn’t matter if our nav bar is above or below the header. The only down side is we’ll be losing about 25% of the width of the nav bar for the search box.

Find this chunk of code in your header.php file. Yours may not look identical, the code seems to vary slightly by version.

<div class="nav">
    <ul class="artmenu">
        <?php art_menu_items(); ?>
    </ul>
    <div class="l"></div>
    <div class="r"><div>
        </div>
    </div>
</div>

In my case I needed to place the additional code in the class=”l” section. Anyway what you need to do is add this bit of code into the above code block…

<!-- Begin Search Box -->
	<div class="nav-search">
	  <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<div style="width:auto;margin:0 9px 0 0;">
		<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="nav-searchbox" />
		<input type="submit" id="searchbutton" value="Search"  />
		<div class="l"></div></div>
	  </form>
	</div>
<!-- End Search Box -->

So that we have this…

<div class="nav">
<div style="width:78%;float:left;">
	<ul class="artmenu">
		<?php art_menu_items(); ?>
	</ul>
</div>
    <div class="l">
<!-- Begin Search Box -->
	<div class="nav-search">
	  <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<div style="width:auto;margin:0 9px 0 0;">
		<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="nav-searchbox" />
		<input type="submit" id="searchbutton" value="Search"  />
		<div class="l"></div></div>
	  </form>
	</div>
<!-- End Search Box -->
    </div>
    <div class="r"></div>

</div>

We also make add a DIV around the “artmenu” with some css to shorten it up so that it doesn’t cover the search box. See lines 2 and 6 above.

All that’s left is to give it some style to match our theme. Just drop the following code in your style.css file…

/* Search */
.nav-search	{
float:right;
width:auto;
margin-top:6px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}

.nav-searchbox	{
background:#FFF !important;
color:#000000;
font-weight: normal;
padding:2px 0px 2px 2px;
margin:0 2px 0 10px;
border:1px solid #6B6B6B;
display:inline;
width:140px;
}

#searchbutton	{
font-weight:normal;
background: #7B9B7E !important;
color:#000;
margin:0;
padding:1px 2px 1px 2px;
border:1px solid #000000;
display:inline;
width:auto;
cursor:pointer;
}

That’s about it. You should now have a search box in your nav bar. You’ll need to modify the background and border colors in the CSS to match your theme.

If your not using it already I highly recommend running Firefox with the Firebug add-on. You can inspect every element on the page and you can even temporarily modify the CSS to see how it will affect your layout before you make changes. I’d be lost without it.

If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.

Disclaimer

I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranking, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.

  • Jessamy says:

    thanks for the tutorial – i just whacked it in then in 2 minutes.

    worked perfectly!

    thanks so much

    • admin says:

      Your welcome.

      Glad it worked.

      I’ve got another technique using an image instead for button. Less messing with colors. I’ll put it up in a day or two.

  • erwin says:

    I couldn’t find the header.php anyhere :-(

  • DirtOne says:

    Hey bud, thanks for this tutorial it really help me out..

    1 question tho, is it possible to have to button use the css code from the other buttons artisteer generated, I mean i what the button to look like all the other buttons I made when the theme was created.

    Thanks again!

  • Andrew says:

    Pretty cool- this works better for the submit button:

  • George says:

    Thanks for this! You’re awesome, really. This saved me a lot (!) of time/work.

  • Greg Shaw says:

    This is a great article. I’ve always wanted to put a search bar on the top and not on the side bar. Now I don’t have to mess myself. Thank you so much. Bless you x

Awesome Themes



Genesis Framework for WordPress

Favorite Random Quotes

“There ought to be one day-- just one-- when there is open season on senators.”

by Will Rogers