SHARE
Drupal 6: How To Customize Search Box Position, Button and Text

In Drupal, you can place a Search Box by activating ‘Search’ module and then assigning its block in to any available region from Blocks admin page.

It’s also possible to make your search form to appear differently, instead of what we see as default ‘Search this site’ text.

We can also replace a default ‘Submit’ form button with an image button.

Step 1: Locate and Copy search-theme-form.tpl

  1. Locate ‘Search’ module in Drupal’s default ‘Modules’ folder. This folder is on a root level of your Drupal’s installation. Not inside ‘Sites/All/Modules’ folder.
  2. Copy search-theme-form.tpl file and paste it in to your theme’s root directory.

Step 2: Modify Template file, template.php

Now open and find this code in template.php file

require_once("common_methods.php");
switch (get_drupal_version()) {
case 5:
require_once("drupal5_theme_methods.php");
break;
case 6:
require_once("drupal6_theme_methods.php");
break;
case 7:
require_once("drupal7_theme_methods.php");
break;
default:
break;
}

Immediately after this, paste the following code. (Please note: Replace YOURTHEMENAME with your own theme name which can be found in .INFO file.)

 /*custom search*/
/**
 * 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('Search');
// Set a default value for text inside the search box field.
 //$vars['form']['search_theme_form']['#value'] = t('');
// 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']);>
/*THIS IS TO REPLACE SUBMIT BUTTON WITH AN IMAGE*/
 $vars['form']['submit']['#type'] = 'image_button';
 $vars['form']['submit']['#src'] = path_to_theme() . '/images/search-button.png';
// 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']);
 }
/*custom search end*/

Something like an image below

Drupal 6: How To Customize Search Box Position, Button and Text

Step 3: Open page.tpl.php

In this step we have to insert search box in a location of a page and attach div style to it. You can choose where to put it. In this case I used it above the header code.

'
searchbox”>
'

Step 4: Style your Search Box

The DIV tag we assigned above needs to be added in to style.css file to apply styling to it.
You may use your own values.

/*Begin Search Box*/
#searchbox {
 float:right;
 position:relative;
 top:30px;
 right:12px;
 }
input
 {
 color: #000;
 background-color: #dcdcdc;
 }
/*End search box*/

Step 5: Upload Files to FTP

Now we have 4 modified files in our theme directory.
1] search-theme-form.tpl
2] template.php
3] page.tpl.php
4] style.css

Upload them to your themes directory.

Step 6: Refresh Cached data

Whenever we update page & template files it is important that we Clear Cache from Admin > Site configuration > Performance page. This is a MUST, to be able to see the changes you just made.

Step 7: Preview your Search Box

You should be able to see your Search Box on your Drupal Pages. Let me know if this works or not.

Hope this helps. 🙂

  • kangsongdaeguk

    it worked. Thanks.

    • Glad it did. Thanks for writing & keep visiting. All the best.