Styling hierarchical taxonomy filter

[Steve Strutt]

Is there a way to apply styling to the different hierarchies in a taxonomy filter box? The differentation between levels is hard to determine and in the HTML looks to be addition of two spaces in front of the text field for a lower level in the hierarchy.

I would like to be able to indent the lower levels more, and apply a different shading to the levels of the hierarchy. The CSS classes for each term look to be unique and hence there is no way to apply a style to different levels.

[Ernest Marcinko]

Hi,

Sure!

You have two options, one is to use this selector for each level:

.asp_ss .asp_option_cat_level-1 {}

Or via a data attribute selector:

.asp_ss div[data-lvl="1"] {}

So for example, if you want to add 30px of margin-left to level 3 taxonomy terms, then either:

.asp_ss .asp_option_cat_level-3 {
    margin-left: 30px !important;
}

..or:

.asp_ss div[data-lvl="3"] {
    margin-left: 30px !important;
}

[Steve Strutt]

Saddly, I am using multi-select with search, which does not have those classes. It does not have specificity at the hierarchical levels. They look to apply to the dropdown option. I am using multi-select to similar to the other filters.

An unrelated item is, I was unable to use the dropdown option as I found it was not possible to clear the first selected value. After selecting an initial value from the dropdown, then changing it to a second value, it is not possible to clear the first value. Clicking the filter reset button, clears the second value, but replaces it with the first value. Even refreshing the screen does not clear it. You have to close the tab to remove the value. Or change the field display type to multi-select and manually deselect it.

[Ernest Marcinko]

Oh okay, there is still hope. It’s an external library, unfortunately the term level can’t be incorporated to the items so custom CSS is not possible there. The way it’s resolved currently is via added non-breakable space characters to increase indendation.
To change that a code edit is required unfortunately via filter templating. Please read that knowledge base just to have a bit of understanding how that works and follow the instructions below:

1. Make these subdirectories your child theme root folder: asp/filters/taxonomy/, so this path exists: wp-content/themes/{your-theme-name}/asp/filters/taxonomy/
2. Copy wp-content/plugins/ajax-search-pro/includes/views/filters/asp-tax-multisearch.php file to wp-content/themes/{your-theme-name}/asp/filters/taxonomy/asp-tax-multisearch.php
3. Open up the newly copied file wp-content/themes/{your-theme-name}/asp/filters/taxonomy/asp-tax-multisearch.php, it should contain this:

<div class='asp_select_label asp_select_multiple'>
    <select aria-label="<?php echo asp_icl_t('Taxonomy select [' . $taxonomy . "] ($real_id)", 'Taxonomy select for ' . $taxonomy, true) ?>"
            class='asp_gochosen asp_goselect2'
            multiple
            data-placeholder="<?php echo !empty($filter->data['placeholder']) ?
                        asp_icl_t("Multiselect placeholder [".$taxonomy."]" . " ($real_id)", $filter->data['placeholder']) : ''; ?>"
            <?php if (isset($filter->data['custom_name'])): ?>
                name="<?php echo $filter->data['custom_name']; ?>"
            <?php else: ?>
                name="<?php echo $filter->isMixed() ? "termset_single" : "termset[".$taxonomy."][]"; ?>"
            <?php endif; ?>>
        <?php foreach ( $filter->get() as $kk => $term ): ?>
            <?php if ( $term->id <= 0 ): ?>
            <option value="-1" class="asp_option_cat asp_option_cat_level-0"
                <?php echo $term->default ? 'data-origvalue="1"' : ''; ?>
                <?php echo $term->selected ? "selected='selected'" : ""; ?>>
                <?php echo asp_icl_t("Chose one option [".$taxonomy."]" . " ($real_id)", $term->label); ?>
            </option>
            <?php else: ?>
            <option class="asp_option_cat  asp_option_cat_level-<?php echo $term->level; ?>"
                    <?php echo $term->default ? 'data-origvalue="1"' : ''; ?>
                    asp_cat_parent="<?php echo $term->parent; ?>"
                    value="<?php echo $term->id; ?>"
                <?php echo $term->selected ? "selected='selected'" : ""; ?>>
                <?php echo str_repeat("&nbsp;&nbsp;", $term->level) . $term->label; ?>
            </option>
            <?php endif; ?>
        <?php endforeach; ?>
    </select>
</div>

4. On line 25:

<?php echo str_repeat("&nbsp;&nbsp;", $term->level) . $term->label; ?>

There are 2 non-breakable characters to increase indentation per term level. If you add more it will increase it for each level:

<?php echo str_repeat("&nbsp;&nbsp;&nbsp;", $term->level) . $term->label; ?>

5. After changing that and saving it should be apparent on the front-end.

As for the second issue, if you are on a page where the filters are preset (have initial value) via URL, then resetting will set it to that value.

[Steve Strutt]

Thanks that is great. It works well. I settled on 8 spaces in total to make a noticable difference between levels.

[Author]

Posts