Displaying different filter on mobile

Anonymous

#13728

This is not a problem with S&F Pro, just my own inexperience, but I could use a bit of help.

I have a great filter setup, using checkboxes in 3 sections – looks fabulous on desktop, but on mobile one has to scroll a long way down thru all those checkboxes to get to the results…

I’d like to use a different filter with dropdowns instead for mobile visitors, but I’m not sure how to do that…..

Right now I’m using the shortcode in a sidebar widget to display the filters to the left of the results.

I think I should probably have to add something to my functions.php file to use a different filter shortcode if the site visitor is on a mobile device, then call my function in the widget instead (I do have a php widget plugin that lets me use PHP code in a text widget).

SO something like this? (ID 289 is the filter that is the same as the desktop except using drop downs instead of checkboxes, 102 is the desktop-version filter)

function my_filter_switcher() {
if ( wp_is_mobile() ) {

echo ‘[searchandfilter id=”289″ show=”results”]’;

} else {

echo ‘[searchandfilter id=”102″ show=”results”]’;
}
}

Is that the best way to provide a more mobile-friendly filtering experience?

Ross Moderator

#13730

Yup this seems like one way to do it.

Alternatively you could use media queries to show/hide the different forms –

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Or you could even use 1 form, and hide some of the fields using CSS

But these changes require that you know a little css first

The above code looks about right although I’ve not tested it.

Thanks

Anonymous

#13732

Thanks Ross…..I’m pretty good with CSS so I’ll try both tactics and see which one provides better results across various devices…..media queries may be a better way to go given that wp_is_mobile includes tablet devices, and I want to be sure that the experience is best for those folks too.

Anonymous

#13733

Well the code above DOES work with some modification – I forgot that I need to echo do_shortcode rather than just echoing the shortcode…and I have the ‘show=”results” in there by mistake.

So here is what works really well:
function my_filter_switcher() {
if ( wp_is_mobile() ) {

echo do_shortcode( ‘[searchandfilter id=”289″]’ );

} else {

echo do_shortcode( ‘[searchandfilter id=”102″]’ );
}
}

BUT I am still going to play around with CSS because I would definitely like it to play nicer on the iPad or other tablets…..

🙂

Ross Moderator

#13741

Thanks for the update sounds good! 😀

[Author]

Posts