Theming the Search Form in Drupal 6

One feature that has almost become expected on most types of websites, especially those with a large amount of content, is a simple search form.  One thing that disappoints many people working with Drupal is that you either have to deal with the default search form that seems to not want to fit into any layout, or you have to install a module.

Personally, I prefer to avoid installing modules if it is something that can be integrated into the theme.  Modules tend to create more data that has to be processed than is necessary.  And sometimes, for strange reasons a module may not want to play well with another module.

If someone knows how to do a form with HTML, they can easily modify the search form using Drupal's theming engine.

Step 1: Open template.php

Every Drupal theme should include a template.php file in its folder.  To find this file, navigate to sites/all/themes/your-theme or (if you are set up for multisite) sites/your-domain.com/themes/your-theme.  Look for a file named template.php.  If it is not available, then create one.

Step 2: Copy the Following Function

Here is the function that you need in that file.

 function yourtheme_preprocess_search_theme_form(&$vars, $hook) {
 
  // Modify elements of the search form
  $vars['form']['search_theme_form']['#title'] = t('');
 
  // Set a default value for the search box
  $vars['form']['search_theme_form']['#value'] = t('');
   
  // Change the size of the search box
  $vars['form']['search_theme_form']['#size'] = t('17');
 
  // Change the text on the submit button
  $vars['form']['submit']['#value'] = t('Search'); 

  // Rebuild the rendered version (search form only, rest remains unchanged)
  unset($vars['form']['search_theme_form']['#printed']);
  $vars['search']['search_theme_form'] = drupal_render($vars['form']['search_theme_form']);
 
  // Rebuild the rendered version (submit button, rest remains unchanged)
  unset($vars['form']['submit']['#printed']);
  $vars['search']['submit'] = drupal_render($vars['form']['submit']);
 
  // Collect all form elements to make it easier to print the whole form.
  $vars['search_form'] = implode($vars['search']);
}

Remember to replace "yourtheme" with the short name of your theme.  This would be the same as yourtheme.info, so if that was vmdoh.info then that line would read "   function vmdoh_preprocess_search_theme_form(&$vars, $hook) {   ".

Step 3: Modify Form Elements

If you understand what properties a text-field accepts, you'll find this next part easy.  Basically, find the lines that say $vars['form']['search_theme_form']['#title'] = t('');.  Replace "#title" with the property that you are wanting to change.  For example, if you want to apply a CSS class to the field, use $vars['form']['search_theme_form']['#class'] = t('classnamehere');.  

Step 4: Add the Call to page.tpl.php

More than likely (especially if you are seeing a search box with your theme), you'll already have a call to $search_box in your theme.  If you don't, then all you have to do is find the place in your theme where you want a simple search form and add the following code:

<?php print $search_box; ?>

Or, if you want to do it the Drupal way...

<?php if ($search_box): ?>
    <div id="search"><?php $search_box; ?></div>
<?php endif; ?>

The reason for that second method is so that you can enable and disable the search via a checkbox the theme configuration module.  However, for that second method to work you need to have features[] = search in the yourtheme.info file.

And that's it!  A fairly simple solution that includes one less modules and fewer calls to the database.