How to theme the search form for Drupal 6

Drupal is made to be customized; however some parts of Drupal theming don’t have much documentation written about them. Theming the search form is a good example. I don’t know if someone has added a tutorial in the last couple of months, but when I made the switch from Drupal 5 to Drupal 6 I couldn’t find a tutorial anywhere that explained how to do it, and the function that I had used for Drupal 5 was no longer working. So I tinkered with it a little, and after a bit of trial and error I came up with a method that works.

If you are updating your theme from Drupal 5 and you had a customized search form in that theme you should delete the theme function that called the search-theme-form.tpl.php file. The code in my old Drupal 5 themes looked like this:

Delete the code above if it is there in your template.php file.

If you are starting from scratch on a new Drupal 6 theme don’t add anything to your template.php. It’s not necessary. Drupal 6 picks up the tpl file automatically if it is in the theme directory.

Now in the folder for the theme you are working on create a new file called search-theme-form.tpl.php . In that file paste the following code:

There are several items you need to pay attention to (and possibly edit) one of them is the path to the image “/images/search.png”. This path is relative to your theme folder, and the search.png can be any image file, but you have to create the image file yourself.

Also, once you create the image file and upload everything you might notice that the button is out of alignment. I have found that the best way to handle the alignment of the search button is by creating a div that surrounds the search button (you would do this in your page.tpl.php file) and then using relative positioning to put the button in its place. On this site the div I used has the class “searcher” and in my style sheets I used the following styles to pull it together