How to theme the views exposed form?

Question

I've created a view with a number of exposed filters, but it is pretty ugly looking.

I'd like to improve the theming, including wrapping the whole thing in a fieldset as well as grouping some of the other elements (like pairing the published and updated inputs), but not sure how to go about this.

I tried to var_dump the form, but it seems to go on forever and my browser locks up, so I can't easily learn anything about the form that way.

I also tried putting the form as a fieldset child in another form, but getting all the form ID information and so on proved problematic (although, I did get the fieldset styling).

Anyone got any pointers?

Update:

I copied over the template from the module to my site's theme directory, and made a start.

<fieldset>
    <legend>Filters</legend>

    <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>
</fieldset>

I can't seem to figure out how to pair up the date fields - I need to somehow modify the widget properties so I can wrap them in HTML (using hook_form_alter doesn't work because the #prefix and #suffix are added to $widget->widget so they break the output)

Answer 1

Theming Views' exposed form is hard because it doesn't behave like most forms and use its own label mechanism. So, you can't simply use a form_alter hook to add #prefix and #suffix to elements. But using THEME_preprocess_views_exposed_form, you can craft your own suffix/prefix mechanism:

function THEME_preprocess_views_exposed_form(&$variables) {
  if ($variables['form']['#id'] == 'views-exposed-form-VIEWNAME-DISPLAYID') {
    foreach ($variables['widgets'] as $id => &$widget) {
      switch ($id) {
        case 'first_date_id':
          $widget->prefix = '<div class="date-widgets-wrapper">';
          break;
        case 'last_date_id':
          $widget->suffix = '</div>';
          break;
      }
    }
  }
}

and in the template file

<fieldset>
    <legend>Filters</legend>

    <div class="views-exposed-form">
        <div class="views-exposed-widgets clear-block">
            <?php foreach($widgets as $id => $widget): ?>
                <?php if (!empty($widget->prefix)) print $widget->prefix; ?>
                <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 if (!empty($widget->suffix)) print $widget->suffix; ?>
            <?php endforeach; ?>
            <div class="views-exposed-widget">
                <?php print $button ?>
            </div>
        </div>
    </div>
</fieldset>

Answer 2

You can copy views-exposed-form.tpl.php from sites/all/modules/views/theme to your theme path to override the template.

Answer 3

Also take a look at the Better Exposed Filters module. You'll need the -dev release to get the collapsible filters option, though I'm hoping to get a proper 1.1 release out soon...

Answer 4

You should look into what's in the form['#theme'] item. Better way to do this (better than var_dump()) would be using dsm($form) or even kpr($form), these functions will be availible after you install the devel module (http://drupal.org/project/devel). form['#theme'] should be an array of about 7 elements. These elements are names of theme hooks that are called when this form is being rendered. you can use them to implement you own way of themeing a form.

One of the items will be called views_exposed_form__VIEW_NAME__DISPLAY_ID.

In your module (if you have one) there should be an implementation of hook_theme()

function MYMODULE_theme($existing, $type, $theme, $path) {
  return array(
    'views_exposed_form__VIEW_NAME__DISPLAY_ID' => array(
      'function' => 'my_exposed_form_theme_function',
      'render element' => 'form',
    )
  );
}

// somwhere later in code

function my_exposed_form_theme_function($vaiables) {
  //$vaiables['form'] contains a form array
  //to display a form element call drupal_render($vaiables['form']['some element'])
  //don't forget to call drupal_render($form) 
  //after you are done with rendering individual elements
  //
  //you can use template_preprocess_views_exposed_form() from 
  // views/theme/theme.inc as an example

  return "concatenated results of multiple drupal_render() calls";
}

Answer 5

In previous situations I have used Hook_form_alter() to add prefix and suffix to form elements to wrap them up in div which can then be styled. Not sure about wrapping in fieldsets though.

eg.

$form['submitted']['full_name']['#prefix'] = '<div class="background">';        
$form['submitted']['message']['#suffix'] = '</div>';

Answer 6

Use Drupal's hook_form_FORM_ID_alter to modify the form. This is what solved my problem of prefixing a £ character to my price field (put this in your custom module):

function THEME_form_views_exposed_form_alter(&$form, &$form_state, $form_id) {
   // check this is the right form
   if ($form['#theme'][0] == 'REPLACE_THIS') {
      // add the prefix
      $form['price']['min']['#prefix'] = "£";
   }
}

Answer 7

Views exposed form layout (D7) module will help you with views exposed form theming.

Answer 8

in the edit page of a view we can check theme information (bottom right corner). It gives the information regarding the template files used by Drupal to render the different parts of the view on screen. By default the template files provided by the views module(inside its theme folder) is used, but in case, where we want to modify the way a view is displayed we can override those template files with custom template files that we can put inside our own custom theme folder (or the theme that is going to be used to display this view)

This theme information shows us how to name a file according to the hierarchy (or the scope of the effect of the template file you are going to override the views own templates.)

Now, this theme information may not show all the template files that the view uses to render this specific view.

so, go to sites/all/modules/views/theme and copy the views-exposed-form.tpl.php (because in this case we want to override the default for rendering filters!)and paste it inside your own theme folder, now you have to follow the same method to control the effect of this overriding template file that you have put inside your own theme folder by renaming it accordingly. e.g. views-exposed-form--your view name-pane name.tpl.php (you will understand the nomenclature by looking at theme:information in the view's edit page)

now you can add css to individual widgets (generated by filter handlers) in this template file and those settings will be applied to the filters.

visit http://eureka.ykyuen.info/2011/07/25/drupal-theme-the-exposed-filter-in-views/