How will you customize the drupal search form?

This guide describes how to override the default SEARCH THEME FORM* layout when using phptemplate based themes and the core Search module.

For use with Drupal 6.x

Step 1) Copy search-theme-form.tpl.php from /modules/search to the working theme directory.

Step 2) Create a template.php file in the theme directory if it doesn't already exist, and add the following code to it:

<?php/**
* Override or insert PHPTemplate variables into the search_theme_form template.
*
* @param $vars
*   A sequential array of variables to pass to the theme template.
* @param $hook
*   The name of the theme function being called (not used in this case.)
*/function yourthemename_preprocess_search_theme_form(&$vars, $hook) {
  // Remove the "Search this site" label from the form.
  $vars['form']['search_theme_form']['#title'] = t('');
 
  // Set a default value for text inside the search box field.
  $vars['form']['search_theme_form']['#value'] = t('Search this Site');
 
  // Add a custom class and placeholder text to the search box.
  $vars['form']['search_theme_form']['#attributes'] = array('class' => 'NormalTextBox txtSearch', 'onblur' => "if (this.value == '') {this.value = '".$vars['form']['search_theme_form']['#value']."';} ;", 'onfocus' => "if (this.value == '".$vars['form']['search_theme_form']['#value']."') {this.value = '';} ;" );

 
  // Change the text on the submit button
  //$vars['form']['submit']['#value'] = t('Go');

  // 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']);

  $vars['form']['submit']['#type'] = 'image_button';
  $vars['form']['submit']['#src'] = path_to_theme() . '/images/search.jpg';
   
  // 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']);
}?>

The above code basically removes the "Search this Site" message, adds custom classes to the Search textbox, changes the Search button to an image_button, and adds some default text to the textbox, which automatically gets emptied when the textbox gains focus.

Step 3) Clear the Drupal's site cache. Check for the customization to the Search box on the page.

Note that in Drupal 6.x, none of the steps below apply. For Drupl 6.x, the steps above are all the steps necessary.