Last updated April 9, 2012. Created by wheelercreek on September 19, 2009.
Edited by LoMo, aspilicious, admin7, Tor Arne Thune. Log in to edit this page.

How to customize HTML for the search block

This example explains how to customize the HTML for the default search block. The default search block is created by the search module.

Using the .tpl.php file method:

  1. From your site root, go into the modules/search folder
  2. Copy modules/search/search-block-form.tpl.php to sites/all/themes/yourtheme/search-block-form.tpl.php

You can now edit the version of the file that is in your theme folder.

search-block-form.tpl.php has this code:

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

This example removes the simple form print statement there, and creates new HTML output, following the documentation at the top of the file:

<div class="container-inline">
<?php $search['search_block_form'] = '
    <div class="form-item" id="edit-search-block-form-1-wrapper">
     <input type="text" maxlength="128" name="search_block_form" id="edit-search-block-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
     <br />
     <label for="edit-search-block-form-1">Search posts and comments</label>
    </div>'
;
   print
$search['search_block_form'];
   print
$search['submit'];
   print
$search['hidden'];
   
?>

</div>

The HTML was simply grabbed from the original output by using view source (or Firebug), and then the elements can be re-arranged. You could add in other tags or whatever content you need. Add a little CSS to the mix and just about anything is possible. Don't change the names and IDs of the form elements, otherwise the form won't be processed correctly.

The variables that are being printed in this modified code are explained in the original search-block-form.tpl.php file (located in your_site_root/modules/search/). Here you can see which keys are available in the comments:

Default keys within $search:

  • $search['search_block_form']: Text input area wrapped in a div.
  • $search['submit']: Form submit button.
  • $search['hidden']: Hidden form elements. Used to validate forms when submitted.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Adding this to a block does nothing:

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

While adding this code to a block:

<div class="container-inline">
<?php $search['search_block_form'] = '
    <div class="form-item" id="edit-search-block-form-1-wrapper">
     <input type="text" maxlength="128" name="search_block_form" id="edit-search-block-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
     <br />
     <label for="edit-search-block-form-1">Search posts and comments</label>
    </div>'
;
   print
$search['search_block_form'];
   print
$search['submit'];
   print
$search['hidden'];
   
?>

</div>

The result is that that neither $search['submit'] nor $search['hidden'] are printed :-(

They have 2 files for search template:

- search-theme-form.tpl.php is use for display in theme layout ($search_box).
- search-block-form.tpl.php is use for display in blocks (admin/build/blocks).

For block you don't need to add code by yourself, just use build in 'Search form' block instead.

I got it working modifying 'search-block-form.tpl.php'
thanks

I hope you didn't actually modify the 'search-block-form.tpl.php' file, what you should do is copy that file into your theme directory and then modify it there. Keep the original untouched, otherwise when you update Drupal your changes will disappear.