As with all coding, release dates for new versions need to be somewhat flexible. I am thinking at least 4-5 weeks away right now for V3.
The main issue that you will face is that, at present, a form should be placed only once on a given page. Thus, placement is fixed by this. CSS can vary according to screen width, which can be dealt with using CSS media queries.
There is no reason why the form cannot be in an off canvas element. It should work fine (and I have seen other users do this OK).
Our form is relatively unstyled, so it is for the designer to add CSS to suit. Some basic CSS is shown in this page:
https://searchandfilter.com/documentation/getting-started/display-search-form/
Yes, it is possible to use our plugin with an archives grid using Masonry.
There are a number of options:
1. Your theme has archive pages that already use masonry
2. You have a page builder that uses masonry
3. You use Divi Builder, which uses a Masonry alternative called Salvattore
4. You want to write your own code/template to use Masonry
Depending on your choice above, I can point you in the right direction. for #4, see this thread (and any others linked in that thread):
https://support.searchandfilter.com/forums/topic/infinite-scroll-with-masonry/
We have received feature requests to allow the one form to be broken into parts to be placed (and styled) in different places (and differently styled) on the page.
We have taken those requests on board for our forthcoming V3 (which we hope to release in a few weeks – but that may flex a little as we polish the code and UI). For example, you might have a form in WooCommerce that has a Search Box (text field), a Sort Order drop down, and then other fields (Product Categories, Product Tags, Variations, etc). You will be able to place the Search Box in the header, and the Sort Order above the products, and the rest of the form in the sidebar.
But, that is not possible right now.
Custom CSS styling can turn a form field like a checkbox or radio buttons into what appear to be choice buttons (like a Tag cloud).
AnonymousInactive
Okay, I did some further testing. I removed the post_grid-plugin and try to filter Avada theme’s results with this. I have a widget that has the tag options, and then filter the results using custom display results. I use this: [searchandfilter id=”7123″ action=”filter_next_query”] and then just Avada’s blog results. It filters the tags I’ve configured (showing all pictures which have the tags), but if I click some tags in the widget, it doesn’t affect the results.
It works if I change the custom display results to shortcode, but I’d really need this to use Avada’s styles. Is there something I’m missing?
AnonymousInactive
I know this question has been asked many times before. I’ve tried to implement the solutions I’ve found and have been unable to get it to work. I’m using a child theme of Astra with WP Bakery. Everything is at the latest version.
On NovaScotiaFood.com I have a search form here. I want it to be horizontal.
I can get it to work in Inspector simply by going to the first li element and changing display to inline-block. But it doesn’t work when I input the CSS via Customizer. I have also tried adding it to my stylesheet via FTP. I am using Siteground Optimizer caching and Cloudflare. The SG cache has been cleared repeatedly and Cloudflare has been put in development mode. I have tried a hard refresh of the browser numerous times too (I’m in Chrome).
I’ve tried the following bits of CSS:
#search-filter-form-2018 > ul > li {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
.searchandfilter[data-sf-form-id="2018"] {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
.searchfilter ul li {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
None of these are working. Can you please help?
Did you download, install and activate the Elementor Extension plugin from the top of this guide (the blue button)?
https://searchandfilter.com/documentation/3rd-party/elementor/
Did you mean this:
https://www.screencast.com/t/IWWvJbtX
(which can be done with custom CSS styled radio button control in our form).
Are you able to send me a live link/URL to your search page so I can take a look?
You have chosen to use for now our Shortcode display results method, which means that the style of the display is somewhat basic, but can be customized by yourself:
https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results
It depends what content you want (what taxonomies, images, description, custom fields) and layout you want, as that will determine how easy it will be to do.
#1 This code:
Found <?php echo $query->found_posts; ?> Results<br />
Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
Would become this:
<div style="text-align: right">Found <?php echo $query->found_posts; ?> Results, Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?></div>
#2 The above code would then become:
<div style="text-align: right">
<?php global $searchandfilter;
$sf_current_query = $searchandfilter->get(13622)->current_query();
if ((!$sf_current_query->is_filtered())&&($sf_current_query->get_search_term()=="")) { } else { ?>
Found <?php echo $query->found_posts; ?> Results,
<?php } ?>
Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?></div>
#3 This space?
https://www.screencast.com/t/GuYOFQ3qtQ3l
There appears to be blank lines in your content:
https://www.screencast.com/t/SivDBdT69fK
#4 This would require our filter to use (or be able to use) transients, which it cannot at present. I believe this will be added when we release V3, towards the end of June/early July.
Even then, you would probably require the services of a coder to hook it all up.
AnonymousInactive
For the 3rd page that needs search form, what I am trying to do is kind of like this one https://creatorscycle.com/search-home/
This directory plugin is great, but cannot change the style, color, etc, to match mine, so I am trying to see if I can achieve it using Search & Filter.
I checked back on my notes and before, with Thrive, I ‘cheated’ by creating a custom results.php template that mimicked the Thrive page. So, make the page and content as you like ignoring our plugin entirely, then inspect the HTML of the content area and edit the results.php we provide as an exemplar following this guide, so that it matches the structure and classes etc.):
https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results
So, here is one I made before:
<?php
/**
* Search & Filter Pro
*
* Sample Thrive Results Template
*
*/
if ( $query->have_posts() )
{
?>
Found <?php echo $query->found_posts; ?> Cars<br />
Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
<div class="pagination">
<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists('wp_pagenavi'))
{
echo "<br />";
wp_pagenavi( array( 'query' => $query ) );
}
?>
</div>
<div class="thrv_wrapper thrv_post_grid" data-unit="px">
<div class="tve_post_grid_wrapper tve_clearfix tve_post_grid_grid">
<div style="display: flex;" class="tve_pg_row tve_clearfix">
<?php
$thrive_counter = 0;
$thrive_row_counter = 0;
while ($query->have_posts())
{
if ( $thrive_counter == 0 ) && ( $thrive_row_counter > 0 ) {
?>
</div>
<div style="display: flex;" class="tve_pg_row tve_clearfix">
<?php
}
$query->the_post();
?>
<div class="tve_post tve_post_width_5 " style="align-items: stretch;">
<div class="tve_pg_container">
<?php
if ( has_post_thumbnail() ) {
$thrive_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'single-post-thumbnail' );
?>
<a href="<?php the_permalink(); ?>">
<div class="tve_post_grid_image_wrapper" style="background-image: url('<?php echo $thrive_image[0]; ?>')">
<div class="tve_pg_img_overlay">
<span class="thrv-icon thrv-icon-forward"></span>
</div>
</div>
</a>
<?php
}
?>
<span class="tve-post-grid-title " style="font-size: 18px;line-height: 20px;font-family:'Arial', 'Helvetica', 'sans-serif';">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</span>
<div class="tve_pg_more" data-tve-custom-colour="62938813">
<a href="<?php the_permalink(); ?>">View Now</a>
<span class="thrv-icon thrv-icon-uniE602"></span>
</div>
</div>
</div>
<?php
$thrive_counter++;
if ( $thrive_counter > 4 ) {
$thrive_counter = 0;
$thrive_row_counter++;
}
}
?>
</div>
</div>
</div>
Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
<div class="pagination">
<div class="nav-previous"><?php next_posts_link( 'Older posts', $query->max_num_pages ); ?></div>
<div class="nav-next"><?php previous_posts_link( 'Newer posts' ); ?></div>
<?php
/* example code for using the wp_pagenavi plugin */
if (function_exists('wp_pagenavi'))
{
echo "<br />";
wp_pagenavi( array( 'query' => $query ) );
}
?>
</div>
<?php
}
else
{
echo "No Results Found";
}
?>
AnonymousInactive
I’ve seen a maybe similar topic: https://support.searchandfilter.com/forums/topic/filter-on-thrive-theme-builder-post-grid/
I’m not sure how this will fit. I don’t use the Theme Builder – I just use Thrive Architect which mainly styles single pages while Theme Builder styles the templates.
My custom fields are not on custom post types. They are on the normal pages.
Thanks in advance!
Robert
AnonymousInactive
Oh oops, that’s it. Got it now, I can edit the style in css. Thanks a lot!
Just a little question on the side (tell me if I have to make a new post about this): I’m using this filters on the Elementor post widget, but I actually just want to display the images like a gallery. So without clickthrough to the post. Is this possible in a way? Because this plugin only works with the Elementor portfolio or posts widget. Not with the actual gallery widget?
