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" />

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.


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

18 thoughts on “Add search form in Twenty Ten header

  1. Zeaks

    Post author

    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.

  2. Mark

    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

  3. Pingback:

    Add search form in Twenty Ten theme Header - Updated | Zeaks Blog

  4. Pingback:

    Tutorial: Suchmaske in Twenty Ten Navigation integrieren

  5. Pingback:

    Add search form in Twenty Ten theme Header - Updated

Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap all code in [code] Your Code Here [/code] tags.

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>