Tuesday, April 24, 2018 04:29 am EDT

Create Custom Drupal 6 Search Box and Theme It

Bri's picture

If you are looking for a way to customize the search box in Drupal 6, here are some suggestions that may prove helpful. This info pertains to the search that is built into some themes rather than the search block.

The core search module specifies that the template to be used for the search_theme_form should be search-theme-form.tpl.php. If you theme doesn't already have this file included, you can copy it from the core search module folder.

After you add this file to your theme, open the file and you will see that the comments have some information about how you can use this. The code only contains the following, as of Drupal 6.14:

<div id="search" class="container-inline">
<?php print $search_form; ?>

The $search_form contains the entire search form ready for print. However, $search is an array of keyed search elements that can be used to print each element separately.

The comments in search-theme-form.tpl.php outline what these variables are, but I will list them here as well.

Default keys within $search:
- $search['search_theme_form']: Text input area wrapped in a div.
- $search['submit']: Form submit button.
- $search['hidden']: Hidden form elements. Used to validate forms when submitted.

If you simply want to add some HTML to the search box, such as a few divs for styling purposes, then add them to the search-theme-form.tpl.php template and you are done. One implementation might look something like this:

<div id="search" class="container-inline">
<div class="searchBox">
<?php print $search['search_theme_form']; ?>
<div class="searchButton">
<?php print $search['submit']; ?>
<?php print $search['hidden']; ?>

Here I added some markup between the elements and chose to use the print statements separately instead of printing the entire form at once.

If you wanted to to edit things further and change some of the actual form elements, you can do one of two things. You can create a custom module that uses the hook_form_alter or you can use a preprocess function such as phptemplate_preprocess_search_theme_form.

If you take the module approach, you will need to create a new module the same way you would normally. If you are not familiar with this, I will outline the steps briefly.

First you will need to create a folder in your /sites/all/modules directory. I called mine "modified_search". Next you will need to create two files inside that directory. One should be called "modified_search.info" and the other should be called "modified_search.module".

Open the .info file in a text editor and paste in the following:

; $Id:
name = Modified Search
description = Inject the search how i want it to look.
package = Other
version = VERSION
core = 6.x

For more information about creating .info files, and an explanation of what they do, see http://drupal.org/node/231036

Now open up the .module file and paste in the following:

function modified_search_form_alter(&$form, $form_state, $form_id) {
//if its the search theme form (based on the id of the form which can be found by viewing the source)
//alter the value, or text, of the button to be "Search"
$form['submit'] = array('#type' => 'submit', '#value' => t('Search'));
// alter the default value of the textbox to "Search My Site" on page load
$form['search_theme_form']['#default_value'] = 'Search My Site';
// add in some javascript events to change the text when the cursor is placed in the box
$form['search_theme_form']['#attributes'] = array('onfocus' => "if (this.value == 'Search My Site') {this.value = '';}" );

The comments should explain it all. The if statement checks to see if the formID is that of the search form. If it is, the submit buttons text is changed to "Search". The string "Search My Site" is added to the textbox using the 'search_theme_form' variables #default_value property. Finally the #attributes of the textbox are set to provide an onfocus event that will clear the text when the cursor is placed in the box.

All that is left now, is to go to the modules page and enable your new module.