Add Search Box in Header

  • Resolved rpainter

    (@rpainter)


    14 years, 9 months ago

    Hello. I would like to add a search box to my header, and I can’t figure out how to get it where i want it. I would like it to be in the bottom right of my header image (above the RSS feed link). Can someone please help me?

    I do not have a searchform.php file in my template, so I am using this code:

    <form id="searchform" method="get" action="<?php bloginfo('siteurl')?>/">
		<input type="text" name="s" id="s" class="textbox" value="<?php echo wp_specialchars($s, 1); ?>" />
		<input id="btnSearch" type="submit" name="submit" value="<?php _e('Go'); ?>" />
	</form>

    This works for the search box, but I have no idea how to get it where I want it.

    The link to my site is here:
    https://www.painterramblings.com

    If you ned info from any of my other files, let me know. Thanks for your time.

    Rusty

Viewing 2 replies - 1 through 2 (of 2 total)

  • drop that code you have into a new file called searchform.php if you want, and put it into your theme folder….

    then in header.php you could just add:

    <div id="search">
                  <?php include (TEMPLATEPATH . "/searchform.php"); ?>
         </div>

    or, you can just use the full search code in your header I guess. The thing is to wrap it in the div like I did above, called search.

    that gives you #search to style in your style.css, to position the search, it’s in its own block now.

    best place to put the searchform code is before the closing div of your header (your code in header.php will look a bit different, this is what the browser sees)

    <div id="header">
		<h1><a href="https://painterramblings.com">Painter Ramblings</a></h1>
    <h2>the writings of a man trying to find his purpose</h2>
</div>

    see that last </div>? You want your search form code to go right above that.

    Then basically you can float the search div to the right, then position it with margins. Something like:

    #search {
    float: right;
    margin: 0 20px 20px 0;
   }

    that’s the gist, you may need to play with the css a bit more to get it just right, etc….

    Thread Starter rpainter

    (@rpainter)

    You are the MAN!!! Thank you I now have it the way I want. Just in case anyone else is looking for this, here is what I ended up with for searchform.php and the CSS.

    searchform.php

    <form id="searchform" method="get" action="<?php bloginfo('siteurl')?>/">
		<input type="text" name="s" id="s" class="textbox" value="Search the Site" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
		<input id="btnSearch" type="submit" name="submit" value="<?php _e('Go'); ?>" />
	</form>

    CSS

    #search {
    position:relative;
    top:60px;
    float: right;
    margin: 0 20px 20px 0;
}
#searchform input {
    color:#000;
}

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add Search Box in Header’ is closed to new replies.

Tags