Move the search box to the header – WordPress 3 revision

The default Twenty Ten theme in WordPress 3 places the search box in the sidebar if you are not using any widgets. Moving it to the header is relatively easy to do if you’re comfortable making minor changes to the code. The first thing is to find the path to the theme that you are using, for the default theme the path is:

⁄wordpress⁄wp-content⁄themes⁄twentyten

Then using your favourite text editor open up the following files:

  • sidebar.php
  • header.php

Note: Before you make any changes to these files make sure you have a backup

Next look for the following code fragment in sidebar.php which is used by WordPress to generate the search form.

<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>

Cut the middle line of code above from the sidebar.php file and paste it in the following location in the header.php file.

</div><!-- #branding -->
<?php get_search_form(); ?> 
<div id="access" role="navigation">

This will move the search form from the sidebar to the header. The end result may look strange because of the CSS styles in use. To correct this add the following lines to the style.css file for the theme.

/* This is the search form in the header */
#searchform	{
	float: right;
	margin-top: -64px;
        z-index: 200;
}

You may need to adjust the CSS to cater for the size of image in use in the header, the above works correctly with the standard out of the box Twenty Ten Image.

Note the addition of the z-index CSS rule to the above code fragment, it was pointed out in a comment below by Christel that the search form was being hidden by the header image. The Twenty Ten theme gives the image a z-index of 100 so the search form needs to have a higher z-index to force it to appear on top.

There are other files in Themes that also have the search form. As the search form is now appearing in the header and the CSS has changed, the redundant search forms needs to be removed from these files.

For the Twenty Ten theme these files also contain the search form:

  • 404.php
  • loop.php
  • search.php
This entry was posted in WordPress. Bookmark the permalink.

33 Responses to Move the search box to the header – WordPress 3 revision

  1. Pingback: Move the WordPress search box to the header | fuzzymargins

We would love to hear from you so please leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.