Zeaks Blog

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.

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

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.

Continue reading →