Your SlideShare is downloading. ×
  • Like
Theming Search Results - How to Make Your Search Results Rock
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Theming Search Results - How to Make Your Search Results Rock


Slides from my Drupal Design Camp Boston 2010 session!

Slides from my Drupal Design Camp Boston 2010 session!

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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:// 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 - • Grid view - • 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: 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: 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 • Blog: • Slides and example code will be available on my site soon!