Filter layouts Templating

Knowledge Base - Ajax Search Pro for WordPress
Buy Ajax Search Pro!Documentation Get Support
Search…
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:
1
<?php foreach($filter->get() as $radio): ?>
2
    <label class="asp_label">
3
        <input type="radio" class="asp_radio" name="aspf[<?php echo $field_name; ?>]"
4
                <?php echo $radio->default ? 'data-origvalue="1"' : ''; ?>
5
               value="<?php echo esc_attr($radio->value); ?>"
6
            <?php echo $radio->selected ? "checked='checked'" : ""; ?>/>
7
        <?php echo esc_html($radio->label); ?>
8
    </label><br>
9
<?php endforeach; ?>
Copied!
Changed:
1
<?php foreach($filter->get() as $radio): ?>
2
    <label class="asp_label my_custom_class" data-myattr="my custom attr">
3
        <input type="radio" class="asp_radio" name="aspf[<?php echo $field_name; ?>]"
4
                <?php echo $radio->default ? 'data-origvalue="1"' : ''; ?>
5
               value="<?php echo esc_attr($radio->value); ?>"
6
            <?php echo $radio->selected ? "checked='checked'" : ""; ?>/>
7
        <?php echo esc_html($radio->label); ?>
8
    </label><br>
9
<?php endforeach; ?>
Copied!
​
Hooks - Previous
Templating
Result Templating
Last modified 1yr ago
Copy link
Contents
Filter layouts Templating
Important! Before you start
Directory Structure
Template file variables
Example usage