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 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 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; ?>