Building a better search box in Drupal

posted by Ishmael Sanchez on Sep 30, 2010

Depending on your website the search box might be a crucial element of your site. Ultimately having a functional and aesthetically pleasing search section is helpful to your end users. Drupal's built-in search module is a good starting point but if you have lots of nodes your site performance might take a hit. You can try using Apache Solr Search or Search Lucene. Aside from the back-end configuration how does one theme the search box in Drupal?

Well you can theme the search section in multiple ways: search block (/admin/build/block/list), search page (/search), or the default theme implementation ($search_box). I'll be addressing the theme implementation.

  1. Make sure in your page.tpl.php your theme prints out $search_box
  2. Go to modules/search and copy search-theme-form.tpl.php and paste into your theme folder (In the comments there is code to see what's available to you in this template.)
  3. Modify the output as needed
  4. Add styles and interactivity.
Example Drupal search box
Example search box

Personally I like to remove the text, "Search this site:" increase the search box size. Additionally I think it's good idea to add some default text into the actual text field (i.e. Search by Keywords). Then using jQuery remove the text once a user clicks into the search text field and add the text back once they click off. You can finish out by adding some CSS. For example a light gradient, or 1px border, or a nice background. Attached is the search template and script, hope it helps.

search.zip1.16 KB

Post new comment

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.

Ishmael Sanchez