Add search form in Twenty Ten header

I’ve been playing around a bit more with Twenty ten did a few neat things with it. One thing I added was a search to the header on my site, you can see it at the top.

To do this, I searched Google for some code for a search box, wrapped it in a div and added the style to my own CSS.

First make a copy of Twenty Tens header.php then open it in any editor. I wanted mine to show on the right in the Nav menu, so do a search for

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

This is the code that shows the Menu at the top of my site. At the end of it, go down a line and add the code for the actual search form.

<div class="search-form">
<?php $search_text = "Search this site.."; ?>
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" value="<?php echo $search_text; ?>" name="s" id="s" onblur="if (this.value == '') {this.value = '<?php echo $search_text; ?>';}" onfocus="if (this.value == '<?php echo $search_text; ?>') {this.value = '';}" />
<input type="hidden" id="searchsubmit" />
</form>
</div>

Now save your new header.php into your child themes folder and refresh your page. You should see a search box near the left above your links. If you do, great, now we need to style it so it looks better.

To style it, we need to add some more code to what we have already. Go to where you added the form code, and just before it add

<div class="search-form">

Then at the end of the search form code add a closing div tag.

</div>

Now save it again and close it. You won’t see any changes to your site yet though. Now we need to add some CSS to make it match the site better. Goto your child theme folder and open the style.css. I’ll use an example and explain what each line does. Goto the bottom of your style.css and add this code to it.

.search-form input{
margin:10px 10px 10px 0;
font-family:"arial", sans-serif;
width: 150px;
float: right;
  }

Now save your style.css and refresh your page, the search form should be in your nav menu, if you see it, great. Now all we have to do is fine tune it and position it exactly how we want.

The css is pretty easy to figure out, where it says margin: 10px 10px 10px 0 you can adjust this to fit your site if it’s off by a few pixels, you can change it. You can also change the background color by using background-color: #000 for black, change the font color by using color: red; which changes it to red etc.
As Bradford pointed out, you can also change the color of the box when you click on it by using.

.search-form input:focus {
background: #FFFFFF;
}

Anyways, it’s nothing much but it might come in handy for someone.
* I’ve created a second post about this, adding a different style search box, please see Add search form in Twenty Ten Header-Updated

Related Posts

Permalink

18 Responses to Add search form in Twenty Ten header

  1. Bradford says:

    Thanks, I’ve just started experimenting with child themes on Twenty Ten. I used really similar code but I used the following CSS

    .search-form input {
    width: 65px;
    color: #666;
    background: #E0E0E0;
    border: none;
    display: block;
    margin: 8px 8px 0 0;
    text-align: right;
    float: right;
    }
    .search-form input:focus {
    width: 150px;
    background: #FFFFFF;
    text-align: left
    }

    I don’t like using absolute positioning so it simply aligns it to the right of the menu bar. I also used the CSS focus event to spice it up a little bit.

  2. Bradford says:

    I forgot to mention I added your suggested code to my header file, in addition to this line above it:

    This searches the $_REQUEST array and if there is a s value (meaning the user is in the middle of a search), then it populates the text with that search term. Otherwise, it populates it with “…search”. Pretty cool stuff!

  3. Bradford says:

    Hah, looks like it didn’t like my php. Here it is again, just surround this with the php html tags:

    $search_text = ($_REQUEST["s"]==”)?”…search”:$_REQUEST["s"];

  4. Bradford says:

    Sorry for all this spam, if you want to edit my comments to appear in one single comment feel free, haha. Anyway, the PHP got jumbled when it was posted, the ==” should be ==” with TWO SINGLE quotes, not one double quote.

  5. Zeaks says:

    Thanks, I couldn’t figure out how to get around using absolute positioning, this works much better.

  6. Pingback: Twenty Ten Child Themes | Zeaks Blog

  7. Mark says:

    Hey!

    Great it worked fine, even for a newbie like me:)

    BUT: I just have the search box. It would be great if you could add a search icon next to the right side and if the icon would be customizable:)

    Maybe you have an idea

    Thanx

  8. Zeaks says:

    I’ll be updating this soon, and will add that to it. http://test2.zeaks.org is what you want I think.

  9. Mark says:

    Yes, exactly, even with an option to place custom magnifying glass as jpg or png…

    I am building a site which will be multilingual and a chinese guy doesn’t understand “search”. The magnifying glass everybody knows, even in China:)

  10. Zeaks says:

    Ok, added the image. Use this for your header (might not look good in the nav cause of the image.

    				<!-- Search Box Begin-->
    	<div class="header-search">
    	  <form method="get" id="navsearchform" action="<?php bloginfo('url'); ?>/">
    			<input type="text" class="search-text" value="Search this site... " name="s" id="headersearchbox" onfocus="if (this.value == 'Search this site... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this site... ';}" /><input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/images/search-button.png" value="Search" alt="Search" />
    		</form>
    	</div>
    <!-- Search Box End -->

    Then add this to your css.

    /* Searchbox Style */
    .header-search {
     float: right;
     height: 30px;
     width: 205px;
    }
    .search-text {
     float: left;
     display: block;
     height:20px;
     width:160px;
    }

    You can grab the image here, put it in /images folder in your theme. http://test2.zeaks.org/wp-content/themes/test/images/search-button.png You’ll have to play around with it a bit to position it where you want it.

  11. Mark says:

    hey, hm it didn’t really work out!

    http://www.aquarium-guide.org this is y site!

    I guess the code from above, my first searchbox, this I have to take out, right?

  12. Zeaks says:

    Yes, remove the code from before, and use this code instead. You can see what it looks like on my test site. But like I said, you’ll probably need to position it so it looks good in your theme.

  13. Mark says:

    I left the old code but I took this from your Code for header.php

    <input type="image" src="/images/search-button.png” value=”Search” alt=”Search” />

    and it worked:)

    Have to figure out why it is left and not right from the insert text field and why he doesn’t show the magnifying glass

    But thank you very much you respond really fast

  14. Pingback: Add search form in Twenty Ten theme Header - Updated | Zeaks Blog

  15. GROO says:

    thanks Zeaks,

    it works very nice.

  16. Pingback: Tutorial: Suchmaske in Twenty Ten Navigation integrieren

  17. Hey man, thanks to you and to commenter Bradford for your code. It’s sleek and fits the black bar very well. Kudos!

  18. Pingback: Add search form in Twenty Ten theme Header - Updated

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>