Custom HTML filter output for custom theme design

Anonymous

#143297

Hello,

The situation

I’m designing and developing a platform (Custom WordPress Theme) for hiring a boat in and around Amsterdam and i was in need of a filter. I found Search & Filter Pro and it’s working out alright for now, thank you for the awesome plugin.

Now i’m trying to get a certain html output to compliment the design and functionality. Could you give me some support on this one please? Here are some visuals of how it should look like:

Image: Design filter – Price-range
https://imgur.com/7WzF3Uz

Image: Design filter – Amount people on a boat
https://imgur.com/rARSOgI

Image: Design filter – Checkbox with provisions on a boat
https://imgur.com/a/H2Ry4

The question
How can i achieve custom html output of the filter?
For example: I would like to change the heading <h4> of each filter-component into a <button>. When i click on a button (old-heading) -> the associated filter appears. Second: I would like to add some text (user instruction) inside each filter component etc., just like the design indicates the text and functionality.
After that i can play around with some JavaScript and it’s done.

What i did so far

I’m using Genesis Frame work and ACF for templates. So i added some custom fields as post meta purpose to all the boats: price amount (number), people amount (number) and provisions (checkboxes). After some struggles i got the filter working.

Image: Current filter – Not active
https://imgur.com/bC9VGkf

Image: Current filter – Active
https://imgur.com/Zv0qqzU

The code of the custom-filter template

This is the small-template.php i made for displaying the results As an Archive:

/**
 * Template Name: Ship filter output
 * Description: Used as a page template to show post contents for the filter.
 */

remove_action ('genesis_loop', 'genesis_do_loop'); // Remove the standard loop
add_action( 'genesis_loop', 'filter_loop' ); // Add custom loop

function filter_loop() {

	echo do_shortcode('[searchandfilter id="2484"]');

	?>
	<div class="grid archive__grid">
	<?php

	if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		
 				
 		<article class="archive__ship border--2px">
 			... my code here ...
		</article>

 		<?php endwhile;
 		genesis_posts_nav();

	endif;
	wp_reset_postdata();

	?>
 	</div>
 	<?php
 
}

genesis();

Could you help me please?

Trevor

#143312

Hi, just to make sure I have this right, it is the Search Form you need help with styling, and not the results?

Anonymous

#143316

Yes sir, just the Search Form html output according to the design. The results are done.

Trevor

#143321

OK. Styling is easiest if you are copying the design of a form on another site, or theme page. Do the styles you want to use come from another page like that? If so, I need the example on your current page to look at, not as images or screenshots, but live web pages.

Anonymous

#143323

Oke, let me clarify a bit more and answer your question after. These images present the Design i made in Sketch:
https://imgur.com/7WzF3Uz
https://imgur.com/rARSOgI
https://imgur.com/a/H2Ry4

Right now i have the default Search & Filter html output working, as you can see in these screenshots:
https://imgur.com/bC9VGkf
https://imgur.com/Zv0qqzU

I want to turn the default Search Form:
https://imgur.com/Zv0qqzU
Into this Search Form:
https://imgur.com/a/H2Ry4

In order to this i think it’s best to:
1. Change the HTML of the filter
2. Disable Search Form CSS
3. Style the Filter with my own CSS
4. Add JavaScript functionality for the show/hide of each filtercomponent.
The functionality and HTML code i wish to have is like the filter Airbnb developed:
https://www.airbnb.nl/s/homes

I’m developing locally, so got nothing working online yet. Is this enough information for you?

Trevor

#143338

In general terms, I am sorry to say that I cannot do this work for you within our support. However, I will try to help where I can.

Q1. Change the HTML of the filter
A1. The current version of the plugin does not allow you change the structural HTML of the form. It is possible to make some changes to the inner elements of the form fields using this filter:

https://www.designsandcode.com/documentation/search-filter-pro/action-filter-reference/#Filter_Input_Object

We are well on our way to code the next major release, V3, which will allow you do do as you wish.

Q2. Disable Search Form CSS
A2. In the plugins settings you can only opt to disable ALL assets. To stop just the front end CSS from loading, you would need to dequeue it in your theme’s functions.php file. If you are using a commercial theme, it is best instead to implement a child theme and edit the functions.php file of that (otherwise, when you update the theme, the changes would be lost). The code would look like this:

function dequeue_sandf_style() {
  wp_dequeue_style( 'search-filter-plugin-styles' );
  wp_deregister_style( 'search-filter-plugin-styles' );
}
add_action( 'wp_print_styles', 'dequeue_sandf_style' );

I think that would do it.

Q3. Style the Filter with my own CSS
A3. This is something you will need to do yourself

Q4. Add JavaScript functionality for the show/hide of each filtercomponent.
A4. Again something you would need to do. Other users have done this, so I know it is possible.

Again, if you have any questions, please get back to me. I will leave this thread open for you to be able to do that.

Anonymous

#143369

Thank you for your well documented answer. I’m glad to hear that in v3 my wishes will be possible. For now i’m gonna puzzle with the Filter Input Object.

Yes please leave this thread open, i might have a question about the Filter Input Object. If i’m finished with it all, i will leave a reply either way. For now, i wish you a great evening.

[Author]

Posts