This document discusses theming search results in Drupal. It provides an overview of search result theming in Drupal 5 and 6, and demonstrates how to display search results in both a grid and table view. It also shows how to pull in additional fields from custom content types into search results. The example creates preprocess functions to build the results for each view type and renders the results using custom templates.

1. Theming Search Results
How to Make Your Search Results Rock
Aubrey Sambor - Drupal Design Camp Boston 2010

2. Who am I?
• Aubrey Sambor
• Developer, Themer, Designer
• Have been working with Drupal for a little
over a year

3. What is Covered Here
• Brief overview of search result theming in D5
• Changes in D6
• Display search results in two ways: grid and
table views
• Pull CCK fields into search results
• Search in Drupal 7

4. What Won’t Be Covered
• How search actually works - this session is
about making search look pretty, not the nuts
and bolts behind it
• Flashy, fancy pants theming; my test site is
using the awesome Omega theme (http://
drupal.org/project/omega) without any CSS
styling.
• Creating sortable table views

5. Search Theming in Drupal 5
• Two main functions for theming search results:
• theme_search_page
function theme_search_page($results, $type) {
$output = '<dl class="search-results">';
foreach ($results as $entry) {
$output .= theme('search_item', $entry,
$type);
}
$output .= '</dl>';
$output .= theme('pager', NULL, 10, 0);
return $output;
}

6. Search Theming in Drupal 5
• theme_search_item
function theme_search_item($item, $type) {
$output = ' <dt class="title"><a href="'. check_url($item['link']) .'">'.
check_plain($item['title']) .'</a></dt>';
$info = array();
if ($item['type']) {
$info[] = check_plain($item['type']);
}
if ($item['user']) {
$info[] = $item['user'];
}
if ($item['date']) {
$info[] = format_date($item['date'], 'small');
}
if (is_array($item['extra'])) {
$info = array_merge($info, $item['extra']);
}
$output .= ' <dd>'. ($item['snippet'] ? '<p>'. $item['snippet'] .'</p>' :
'') .'<p class="search-info">'. implode(' - ', $info) .'</p></dd>';
return $output;
}

7. Search Theming in Drupal 5
• HTML and logic in these functions - BAD!
• D6 did this much better...

8. Search Theming in Drupal 6!
• Introduction of two new functions
• theme_search_result
• themes each individual result
• theme_search_results
• themes the entire search results page

9. Search Theming in Drupal 6!
• Override these functions in your theme’s
template.php file for maximum awesomeness
• themename_preprocess_search_result
• themename_preprocess_search_results

10. Search Theming in Drupal 6!
• Use the corresponding tpl.php files to style
search results
• search-result.tpl.php
• search-results.tpl.php

11. Search Theming Example
• Default search is boring!

12. Search Theming Example
• Client wants search results to be displayed in
two different ways; table view, and grid view.
• Can this be done?
• Short answer: yes!

13. Search Theming Example
• Table view
• Display results in columns
• Columns can be sortable, this takes a little bit of work

14. Search Theming Example
• Grid view
• Display results as a grid on the page
• Specify columns in template.php (there has to be a better way!)

15. How do we make this work?
• Use a query string to switch between the two
search types
• Table view - http://site.com/search/node/x?display=table
• Grid view - http://site.com/search/node
• Grid view is the default view in this example!

16. On to the code!
• template.php is your friend!
• We’ll be creating 3 new templates
• search-results.tpl.php
• search-result-grid.tpl.php
• search-result-table.tpl.php

17. Preprocess functions are
awesome
• In your template.php, create
• function themename_preprocess_search_results()
• Why not use themename_preprocess_search_result()?
• We want to have more control of how the individual items
are styled, so we’re doing it this way.

18. Preprocess functions are
awesome
• Pass variable by reference so the values are saved
• These are basic node fields to include in search results...
you can add any field created by cck to search results
(more on that later)

19. Building Results
• foreach() to iterate through results and add new variables
to the $vars[‘results’] array
• Get query string from url to determine if the page is grid
view or table view.
• Grid view is default (with no query string); query string of
‘table’ means the page is table view

20. Building Table View Results
• Begin building an array of all table rows
• The $row[] array will be used in theme_table,
which is called later on in the function
• Each item in the ‘data’ part of the array will be a column in
the generated table
• What is this theme_render_template() thing?
More on that in a second!

21. Building Grid View Results
• No built in way to theme a grid like there is to
theme a table
• Variables are set in code for this example, but
this could possibly be rewritten to be set on
the search settings page
• theme_render_template renders each cell in
the grid

22. Template Rendering
Goodness
• theme_render_template() is used to define
custom tpl.php files
• arguments are url to the template file, and an
array of variables
• These variables were created in the foreach()
loop earlier in the function

23. Template Rendering
Goodness
• theme_render_template() in the table view is
rendering the description column
• additional items that you may not want to be sortable can go
here; if you want them sortable, add them as a different
column in the $row[] array earlier in the function
• search-result-table.tpl.php

24. Template Rendering
Goodness
• theme_render_template() in the grid view is
rendering each grid cell
• Grid structure is constructed in the tpl file
• I know this is not ideal, and I hate putting php code in the
tpl file. It’s not hacking core level of bad, but it’s still bad. I
feel dirty doing this.
• search-result-grid.tpl.php

25. Table View - Final Step
• If you’re viewing as a grid, everything’s all set.
but what if you’re viewing as a table?
• theme_table to the rescue!
• takes a few parameters: header, an array of data (the $row[]
array in our case), an array of attributes
• Create your header array, then theme away and
pass the rendered template to $vars

26. Creating View Links
• We have the two views built, now how to
switch between them?
• Create the links by using the l() function
• to the ‘table_view’ variable, add an attribute to
the l() function called ‘query’ and put
‘display=table’ to pass the query string to the
link
• Add these links to $vars

27. Putting it all together
• Where does all this stuff display??
• search-results.tpl.php!

28. Putting it all together!
• Print view links at the top of the page
• Here is where things get ugly...
• There isn’t a nice way to theme a grid view without
implementing some logic in the tpl.php file. (Yeah, I know.
Bad.)
• Table view code much simpler
• Just print the $search_view variable, and that’s it!

29. Adding CCK fields to results
• So far we’ve talked about displaying basic
information about the node in results.
• What if you want to display any other field
information?
• Easy! Get the information from the node!

30. Adding CCK fields to results
• Create a content type, add a few fields
• My example? (Of course) Beer!
• My beer content type contains:
• Text field for brewer
• Text field for rating
• Imagefield for image
• Taxonomy term for beer style

31. Adding CCK fields to results
• Adding fields is easy!
• Text examples are straightforward
• Just find field in node, add to $r variable
• Image example:
• Can use theme_image or theme_imagecache
• Taxonomy
• Allows for multiple terms
• taxonomy_link function is awesome

32. Adding CCK fields to results
• To add to grid view, just add variables created
• To add to table view:
• Can add variables either as new columns or in the
description field
• Add header title to the $header variable

33. Voila!
• You can add as many fields as you’d like to your
results and have them display wherever you
want.
• But wait! What if I want to make the table
headers sortable?
• This can be done, a tutorial is here: http://fightingcrane.com/
main/node/8... I haven’t done this, but I want to :)
• tablesort_sql is the function to use here

34. The Future?
• Views 3 and search integration
• Apache Solr: http://acquia.com/blog/views-3-apache-solr-
acquia-drupal-future-search
• There IS supposedly a way to style search results using Views
2... but using views for search results seems inefficient and
slow (complicated queries can bog down huge sites, etc)
• as far as I can see, right now, search theming seems to be the
same in Drupal 7 as in 6. Perhaps there will be more Views 3
integration down the road
• Display Suite - another way to theme search results

35. That’s All!
• Aubrey Sambor
• Follow me on Twitter: @starshaped
• starshaped on drupal.org
• Blog: http://star-shaped.org
• Slides and example code will be available on my site soon!