[Resolved] Styling filter checkboxes

[Author]

Posts

[Ben]

When I have a custom search filter such as:

[wpv-control url_param="wpv-post-type" type="checkboxes" values=",posts,pages" display_values="All,Posts,Pages"]

How would I go about customising these? For example, whether the check box options are listed horizontally or vertically.

[Waqar]

Hi Ben,

Thank you for contacting us and I'll be happy to assist.

Assuming that your website has Bootstrap 3 enabled, you can use its built-in classes to show the checkboxes, horizontally or vertically.

For example, to show them vertically, you can use:

<div class="checkbox">
[wpv-control url_param="wpv-post-type" type="checkboxes" values=",posts,pages" display_values="All,Posts,Pages"]
</div>

To show them, horizontally in a line, you'll need some custom script, to add a special class "checkbox-inline".

1. Use the shortcode like this:

<div class="checkbox special-inline">
[wpv-control url_param="wpv-post-type" type="checkboxes" values=",posts,pages" display_values="All,Posts,Pages"]
</div>

2. And in the "JS editor" tab of the "Search and Pagination" section, you can add:

jQuery( document ).ready(function() {
    jQuery( ".special-inline .wpcf-checkboxes-group .form-item-checkbox" ).addClass( "checkbox-inline" );
});

For more personalized assistance around custom styles and scripts, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[Ben]

Thank you Waqar!

This is perfect!