# Filter layouts Templating

## Filter layouts Templating

*This guide is for advanced users/developers. Please do not modify the template files if you have no experience in HTML/PHP programming.*

From plugin version **4.16** the search plugin generates HTML output based on specific template files. This means, that you are now able to modify HTML structure of every front-end filter.

You can find these files in the **wp-content/plugins/ajax-search-pro/includes/views/filters/** directory.

## Important! Before you start

Do not make changes directly to these files! To have permanent changes make a new folder called “asp” in your theme directory like so:

**wp-content/themes/your-theme-name/asp/**

..and a sub-directory as well:

**wp-content/themes/your-theme-name/asp/filters/**

and copy the desired files (including the subdirectories) from

**wp-content/plugins/ajax-search-pro/includes/views/filters/**

directory there. The plugin will automatically look and use the files from the theme “asp” directory if they exist. Now you can edit these copied files and prevent future search plugin updates to remove your changes. Make sure to *always maintain the sub-directory structure*, otherwise the files may not be found.

## Directory Structure

The files are structured by filter type and display mode:

ajax-search-pro/includes/views/filters/**{type}**/asp-**{type}**–**{display\_mode}**.php

The list below is relative to the *wp-content/plugins/ajax-search-pro/includes/views/filters/* directory.

**Search and reset buttons**

* /button/asp-button-filter.php
* /button/asp-button-footer.php
* /button/asp-button-header.php

**Content type filters**

* /content\_type/asp-content\_type-checkboxes.php
* /content\_type/asp-content\_type-dropdown.php
* /content\_type/asp-content\_type-footer.php
* /content\_type/asp-content\_type-header.php
* /content\_type/asp-content\_type-radio.php

**Custom Field filters**

* /custom\_field/asp-cf-checkboxes.php
* /custom\_field/asp-cf-datepicker.php
* /custom\_field/asp-cf-dropdown.php
* /custom\_field/asp-cf-dropdownsearch.php
* /custom\_field/asp-cf-footer.php
* /custom\_field/asp-cf-header.php
* /custom\_field/asp-cf-hidden.php
* /custom\_field/asp-cf-multisearch.php
* /custom\_field/asp-cf-radio.php
* /custom\_field/asp-cf-range.php
* /custom\_field/asp-cf-slider.php
* /custom\_field/asp-cf-text.php

**Date filters (custom post type date filter, not custom field date filter)**

* /date/asp-date-filter.php
* /date/asp-date-footer.php
* /date/asp-date-header.php

**Generic filters**

* /generic/asp-generic-checkboxes.php
* /generic/asp-generic-dropdown.php
* /generic/asp-generic-footer.php
* /generic/asp-generic-header.php
* /generic/asp-generic-radio.php

**Post type filters**

* /post\_type/asp-post-type-checkboxes.php
* /post\_type/asp-post-type-dropdown.php
* /post\_type/asp-post-type-footer.php
* /post\_type/asp-post-type-header.php
* /post\_type/asp-post-type-radio.php

**Taxonomy term filters**

* /taxonomy/asp-tax-checkboxes.php
* /taxonomy/asp-tax-dropdown.php
* /taxonomy/asp-tax-dropdownsearch.php
* /taxonomy/asp-tax-footer.php
* /taxonomy/asp-tax-header.php
* /taxonomy/asp-tax-multisearch.php
* /taxonomy/asp-tax-radio.php

## Template file variables

For all template files there is one universally used variable, the **$filter** object. Since all of the filter types are a bit different, we recommend always starting with the original template to see which attributes are used. Most common uses:

* **$filter->data** (array) – contains all the static information about the filter, such as the box header texts, placeholder, date storage methods etc..
* **$filter->get()** -> returns each individual filter value object. Should be used within a foreach statement.

Some templates might use different helper variables as well, such as the taxonomy filters the **$taxonomy** variable or the custom field filters the **$field\_name** variable.

## Example usage

Let’s assume, you need to add an additional attribute and a class name to each radio value within the **custom field radio filter**.

**1. Make a copy of the original file**

Copy: *wp-content/plugins/ajax-search-pro/includes/views/***filters/custom\_field/asp-cf-radio.php**

to: *wp-content/themes/your-child-theme/***asp/filters/custom\_field/asp-cf-radio.php**

**2. Make the changes in the copy**

Original:

```php
<?php foreach($filter->get() as $radio): ?>
    <label class="asp_label">
        <input type="radio" class="asp_radio" name="aspf[<?php echo $field_name; ?>]"
                <?php echo $radio->default ? 'data-origvalue="1"' : ''; ?>
               value="<?php echo esc_attr($radio->value); ?>"
            <?php echo $radio->selected ? "checked='checked'" : ""; ?>/>
        <?php echo esc_html($radio->label); ?>
    </label><br>
<?php endforeach; ?>
```

Changed:

```php
<?php foreach($filter->get() as $radio): ?>
    <label class="asp_label my_custom_class" data-myattr="my custom attr">
        <input type="radio" class="asp_radio" name="aspf[<?php echo $field_name; ?>]"
                <?php echo $radio->default ? 'data-origvalue="1"' : ''; ?>
               value="<?php echo esc_attr($radio->value); ?>"
            <?php echo $radio->selected ? "checked='checked'" : ""; ?>/>
        <?php echo esc_html($radio->label); ?>
    </label><br>
<?php endforeach; ?>
```