CMS

Drupal – Theme the Exposed Filter Form in Views

21 Comments

In Drupal Views, we can theme the output HTML by applying different .tpl.php in the Views admin UI. But there is not an option for theming an exposed filter. Actually, we can do it in the same way.

1. Copy the views-exposed-form.tpl.php which is located at /sites/all/modules/views/theme to your own theme folder.
views-exposed-form.tpl.php

<?php
// $Id: views-exposed-form.tpl.php,v 1.4.4.1 2009/11/18 20:37:58 merlinofchaos Exp $
/**
 * @file views-exposed-form.tpl.php
 *
 * This template handles the layout of the views exposed filter form.
 *
 * Variables available:
 * - $widgets: An array of exposed form widgets. Each widget contains:
 * - $widget->label: The visible label to print. May be optional.
 * - $widget->operator: The operator for the widget. May be optional.
 * - $widget->widget: The widget itself.
 * - $button: The submit button for the form.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($q)): ?>
  <?php
    // This ensures that, if clean URLs are off, the 'q' is added first so that
    // it shows up first in the URL.
    print $q;
  ?>
<?php endif; ?>
<div class="views-exposed-form">
  <div class="views-exposed-widgets clear-block">
    <?php foreach($widgets as $id => $widget): ?>
      <div class="views-exposed-widget">
        <?php if (!empty($widget->label)): ?>
          <label for="<?php print $widget->id; ?>">
            <?php print $widget->label; ?>
          </label>
        <?php endif; ?>
        <?php if (!empty($widget->operator)): ?>
          <div class="views-operator">
            <?php print $widget->operator; ?>
          </div>
        <?php endif; ?>
        <div class="views-widget">
          <?php print $widget->widget; ?>
        </div>
      </div>
    <?php endforeach; ?>
    <div class="views-exposed-widget">
      <?php print $button ?>
    </div>
  </div>
</div>

 

2. Say if i have a view named as test_exposed_filter_in_panel, renamed the views-exposed-form.tpl.php to views-exposed-form–.tpl.php and modify it with whatever u like.
views-exposed-form–test_exposed_filter_in_panel.tpl.php

...
<div class="views-exposed-form">
  <div class="views-exposed-widgets clear-block">
    <div><font color="#FF0000">Eureka!</font></div>
    <?php foreach($widgets as $id => $widget): ?>
      <div class="views-exposed-widget">
        <?php if (!empty($widget->label)): ?>
...

 

3. Go to the Views admin UI of test_exposed_filter_in_panel and click the Rescan template files button in Theming information.

 

4. This will apply to all displays of test_exposed_filter_in_panel view.

 

5. So how about if i only want to apply the theme to a specific display? No worry, go to the Theming information of your desired display. Take a look on any output and you can find your display name.

 

6. In the above case, the last Display output template is views-view–test-exposed-filter-in-panel–panel-pane-2.tpl.php. So panel-pane-2 is the name of display-b. Then you can create a new .tpl.php with name views-exposed-form.tpl—-.tpl.php.
views-exposed-form–test_exposed_filter_in_panel–panel-pane-2.tpl.php

...
<div class="views-exposed-form">
  <div class="views-exposed-widgets clear-block">
    <div><font color="#FF0000">Eureka! for panel-pane-2 only</font></div>
    <?php foreach($widgets as $id => $widget): ?>
      <div class="views-exposed-widget">
        <?php if (!empty($widget->label)): ?>
...

 

7. See what you get now.

 

Thanks Tyler Frankenstein as i found his post which reminds me i have to rescan the template files before the .tpl.php works.

Done =)

Reference: Tyler Frankenstein – Drupal How to Theme a Views Exposed Filter Form

Update 2012-03-05: Update the title of the post from Drupal – Theme the Exposed Filter in Views to Drupal – Theme the Exposed Filter Form in Views

21 thoughts on “Drupal – Theme the Exposed Filter Form in Views”

  1. This works. Thanks I was struggling to style to exposed filters view form.

    The only small issue might be in number 2. The template file is:
    views-exposed-form--.tpl.php

    Like

    Reply

  2. Hi

    Great post! I’ve been using it to theme my exposed form, but I’ve still got a problem with this. I’ve got 3 exposed filters and I’d like to theme them in two columns.

    Let’s say I’d like to get an output something like:

    [exposed filter 1]
    [exposed filter 2]
    [exposed filter 3]

    Do you have any idea on this? I can only find bits of code in views-exposed-form.tpl.php to theme all exposed filters at once, but I haven’t seen any code to call just one of three exposed filters…

    Thanks

    Like

    Reply

    1. do the 3 exposed filters belong to different views? In that case, you could named the .tpl.php in views-exposed-form--<VIEW-NAME>.tpl.php. (Point 2)

      If they belong to the same view but different displays. Use views-exposed-form.tpl--<VIEW-NAME>--<DISPLAY-NAME>.tpl.php. (Point 6)

      Like

      Reply

  3. They actually belong to the same display.
    This is the page with the filters: http://staging.lessius.eu/opleidingen

    On the left: AC / PR is filter one.
    The images on the right are triggered by the other two filters.

    On this page:
    http://staging.lessius.eu/over-lessius/zzzfilterformtest
    I have coded static how I would like the filters to look.

    This is all in one display, right? Or am I missing something?

    My goal is to call the 3 exposed filters separately, so I can style them the way I intended.

    Like

    Reply

    1. um… i think you are talking about ONE exposed filter with different exposed fields, rite?

      you want to theme the exposed fields such that they look like toggle buttons?

      Like

      Reply

      1. No, they’re 3 separate filters.
        http://staging.lessius.eu/over-lessius/zzzfilterformtest
        The droplist is a filter which filters on taxonomy vocab “training type”
        The first column is a filter which filters on taxonomy vocab “training location”
        The second column is a filter which filters on taxonomy vocab “training duration”

        I’ve used this module: http://drupal.org/project/better_exposed_filters
        To make the two filters appear as toggle buttons based on taxonomy terms. But you can’t see those buttons on http://staging.lessius.eu/opleidingen yet because I’ve still got to fix the CSS on that.

        What I was trying to do first is to call each filter separately in the tpl.php instead of all 3 at once, so that I can position them as intended.

        I’ve been trying to crack this one all day now, I’m getting desperate 😀

        Like

      2. How could you make ONE view display having MORE THAN ONE exposed filter?

        As far as i know, only one exposed filter is allowed for one view display.

        Like

    1. O. i know what you mean. i am sorry that the title of this blog post make you confused. A better name should be Drupal – Theme the Exposed Filter Form in Views.

      It seems there there is no way to theme a specific filter inside a Exposed Filter Form.

      In your case, i suggest you could set all exposed filters to display: none in CSS. and then create an independent set of controls in the views-exposed-form.tpl--<VIEW-NAME>--<DISPLAY-NAME>.tpl.php (just like your static code). And finally connect the new controls and the hidden exposed filters using javascript amd jquery.

      Like

      Reply

  7. You can use the property [b]$widget->idid is the “Filter identifier” you set in the filter settings, preceded by the string “edit-“: “edit-year”, “edit-author”, …

    $widget): ?>
    <div class="views-exposed-widget id;?>”>
    ….
    and you get:

    Author selection

    Like

    Reply

  8. Thanks for a great post. I am stuck with this problem and I can’t the solution anywhere.
    I want to display exposed form as block and NOT show the form on top of the view. I tried your solution, but it applies to both top and side forms.
    Thanks

    Like

    Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.