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.
<?php // $Id: views-exposed-form.tpl.php,v 126.96.36.199 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.
... <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.
... <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)): ?> ...
Thanks Tyler Frankenstein as i found his post which reminds me i have to rescan the template files before the .tpl.php works.
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”
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:
Thanks for point out the typo. I have updated the post. =P
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…
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)
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:
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.
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?
No, they’re 3 separate filters.
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 😀
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.
View settings: http://i.imgur.com/egm0T.gif
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.
Perhaps this is one filter and I need to say that I’m trying to call each widget separately?
yes. i am sorry that the title of this post is misleading. please refer to my comment above.
Thanks for the advice! I will try this and let you know 🙂
Hope my suggestion could help. =)
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”, …
<div class="views-exposed-widget id;?>”>
and you get:
Sorry, your code cannot be rendered properly. please post code according to the Syntax Highlight.
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.
If you want to display the exposed form in block, just make the setting in the following option.
And if you want to theme different exposed form for the same view, you may need to rename the .tpl.php to
Reference: How to name views-exposed-form.tpl.php per views display
Views exposed form layout (https://www.drupal.org/project/vefl) will help with views exposed form theming.
LikeLiked by 1 person
Thx for your comment. Will try this module in the future.
How can I theme a particular control in the Exposed form, e.g submit button?