Search Results for 'filter style'

[Anonymous]

That’s all working. Great. Thanks!

Now I’d like to try to make it work with Ajax. All my settings are the same as above except I’ve selected the Authors post type and unselected Posts.

When I select Load results using Ajax, then the filter doesn’t work.

I’m doing all this on a page with the following content:

[searchandfilter id="154"]

[searchandfilter id="154" show="results"]

And this page uses this custom template, which queries the db to get category names, then within each category queries to get posts. FYI each post can only have one category. Otherwise I’m aware that a given post could show up more than once on the page.:

<?php
/* template name: Authors Page */
 ?>
<?php get_header(); ?>
 <div id="layout" class="pagewidth clearfix">
     <div id="content" class="authors-page clearfix">
    <?php
    //echo do_shortcode('[searchandfilter id="154"]');
    // get all the categories from the database
    $cats = get_categories(); 
	// loop through the categries
	foreach ($cats as $cat) 
		{
		// setup the cateogory ID
		$cat_id= $cat->term_id;            // create a custom wordpress query
		$args = array('post_type' => 'authors', 'cat' => $cat_id, 'meta_key' => 'author_last_name', 'orderby' => 'meta_value', 'order' => 'asc');
		$args['search_filter_id'] = 154;
		$query = new WP_Query($args);
		$count = $query->found_posts;
		if($count > 0) //fix this to test if there are any results (numrows > 0)
			{
			// Make a header for the cateogry
			echo "<h2 class=\"category-name background\" style=\"clear:both\"><span>".$cat->name."</span></h2>";
			}
?>
                    
     <div id="loops-wrapper" class="loops-wrapper sidebar1 grid3  boxed masonry infinite masonry-done blog" style="position: relative; height: 640.234px;">
     <div class="grid-sizer"></div>
     <div class="gutter-sizer"></div>
    <?php
    // start the wordpress loop!
 	if ( $query->have_posts() ) : ?>
		<?php while ( $query->have_posts() ) : $query->the_post(); ?>	
			<article id="post-<?php echo get_the_ID();?>" class="post clearfix post-<?php echo get_the_ID();?> type-post status-publish format-standard has-post-thumbnail hentry category-featured-authors has-post-title no-post-date " style="position: absolute; left: 0px; top: 500px;">
			 <figure class="post-image  clearfix">
				<a href="<?php the_permalink();?>"><img src="<?php echo get_the_post_thumbnail_url(); ?>" class=" wp-post-image wp-image-84" alt="<?php the_title(); ?>" srcset="" sizes="(max-width: 200px) 100vw, 200px" width="200" height="150"><img src="<?php the_field('featured_book_cover_image'); ?>" class="featured_title_cover_image" width="100" height="150"></a>
				<a href="<?php echo esc_url( get_permalink() ); ?>" class="overlay">
				<div class="excerpt-text"><?php the_field('mini_blurb'); ?></div>
				</a>
			  </figure>
			  <div class="post-content">
				<div class="post-content-inner">
				<!-----------------ICON----------------->
					<!--<span class="<?php if($on_list) { echo $icon_class; } ?> tooltips author-tooltips add_<?php echo get_the_ID();?> list-icon"  title="<?php echo $element_title; ?>">
						<?php if(!$on_list) { ?><a href="#" class="<?php echo $icon_class; ?> btnAddAction" onclick = "cartAction('<?php echo $action; ?>','<?php echo get_the_ID();?>')"></a> <?php } ?>
					</span>	-->
				   <!-----------------/.ICON------------------>
					<h2 class="post-title entry-title"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h2>
					<div class="entry-content">
					   <?php the_field('featured_book_title'); ?>
					</div><!-- /.entry-content -->
				</div><!-- /.post-content-inner -->
			  </div><!-- /.post-content -->
		 </article>
		<?php endwhile; wp_reset_postdata(); ?>
		<!-- show pagination here -->
	<?php else : ?>
		<!-- show 404 error here -->
	<?php endif; ?>
    </div><!-- #loops-wrapper -->
<?php } // done the foreach statement ?>

	</div><!-- #content -->
</div><!-- #layout -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

This all works fine, except when I set it to use Ajax.

Thanks.

[Trevor]

You can style the form elements using Custom CSS.

Are your three forms these:

Filter by cars made
Filter by Vehicle Type
Filter by Budget

With just one submit button for all three? If this is what you want, it would have to be a single form.

Also, the ‘sections’ and their ability to expand/collapse (is that what you envisage) would have to be added using custom javascript.

Would you want to limit the user to one of the filter blocks at a time? Each time they opened a section you would need to clear their entry from the other two filter blocks, again using javascript.

I would observe that this functionality (expand/collapse and clearing of other selections) are not advertised features of our plugin.

[Anonymous]

Hi Trevor,

We have now added a new search form and it looks to be working fine for one search only (for 1 search in category or other taxonomies), we made it all in checkbox input style.

What we’re thinking is since it is set as a checkbox, it can do a search combination and filter the kitchens according to the set filter.

The site is http://kitchensofsurrey.internet-systems.co.uk/kitchen/
So let’s say I checked Modern 3D View category (9) > Matt style it should only display 4 kitchens, then when we select Price range £16,000 – £20,000 the result must be only one and that is the CONISTON – ULTRA GLOSS & METALLIC. How can we do that?

Is there any settings we missed? Thank you!

[Anonymous]

Hi,

When I configure a search to show me results as an archive I get a nice pretty search results display which is great. See here:

http://www.citysecuritymagazine.com/newsite/?sfid=1713&authors=andrea

However, I want to use a shortcode for my search results display as I want to define other elements of the page that I could not define on the search archive page.

When I use the shortcode on another page I get a quite unattractive search display that looks like this:

http://www.citysecuritymagazine.com/newsite/search-results/

Is there an easy way to style what I get in the shortcode results list so that it looks just like the archive results list?

I’ve read this page about how to customise results: https://searchandfilter.com/documentation/search-results/using-a-shortcode/

However, that seems to show me how to set up the file, but it doesn’t tell me how to style it. Could I copy the code from the archive page in some way to make this look the same as the archive page?

Thanks!

[Ross]

Hi Tanner

I know the issue you are talking about, and we’re fixing it in v3.. but there is a workaround.

Basically what yoast is doing is grabbing the global $post, and and pulling the data from this (I’ve seen some themes have a similar issue),

Because we use an archive style method of displaying, there should be an array of posts, so it will fail on this and it reverts to the first result if you like – the problem is, S&F results are not detected as true WP archive, because what you are seeing is not a post type archive, or taxonomy archive.

The simplest way to get over this, would be to duplicate your search template, and in that file, before get_header(), manually set the value of $post:

global $post;
$seo_post = get_post(123);
if($seo_post){
	$post = $seo_post;
}

This will trick yoast into thinking the page with the ID 123 is being loaded and it should output the relevant meta to do with that page (which actually means you can customise various SEO settings by editing the page in wp-admin)

There is 1 caveat I’m yet to test with yoast though, in the header, it will generate a canonical URL for the page, so you may have to give the page you create the same slug as your search form (and if that doesn’t work) I’m pretty sure they have a filter to modify this variable, which you would have to hook into.

Hope that makes sense, let me know how you get on.

—-

As an added note, what we’re doing in V3 to solve all this is, when creating a S&F archive, you no longer enter a “slug”, you link it to page (much like WooCommerce does with its shop page) – this should negate all the above.

Thanks

[Anonymous]

Salient does use VC – now called WPBakery Page Builder. Not a tool I’m used to using. I’m not a fan…

I am using the shortcode method now. If I set to “show results” I end up with an unstyled post listing – something I could fix, but budget is short on this one, and this client is used to / comfortable with working with Salient.

Your point on masonry not loading in ajax views totally makes sense. I should have thought of that! I’ll look over that solution and see if it will work. Worst case scenario, I’ll add a js function that looks at the referring url, and if it sees the search pattern, scroll the reloaded page down to the filter form. I just wanted to make sure there wasn’t a better method that I didn’t know about.

[Trevor]

OK, before we move forward on this, can you go to WP Admin -> Search & Filter -> Settings -> JavaScript & CSS -> Combobox Script and change this to Select2.

Let me know when done. FYI this is the complete Select2 stylesheet:

.select2-container {
 box-sizing:border-box;
 display:inline-block;
 margin:0;
 position:relative;
 vertical-align:middle
}
.select2-container .select2-selection--single {
 box-sizing:border-box;
 cursor:pointer;
 display:block;
 height:28px;
 user-select:none;
 -webkit-user-select:none
}
.select2-container .select2-selection--single .select2-selection__rendered {
 display:block;
 padding-left:8px;
 padding-right:20px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap
}
.select2-container .select2-selection--single .select2-selection__clear {
 position:relative
}
.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
 padding-right:8px;
 padding-left:20px
}
.select2-container .select2-selection--multiple {
 box-sizing:border-box;
 cursor:pointer;
 display:block;
 min-height:32px;
 user-select:none;
 -webkit-user-select:none
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
 display:inline-block;
 overflow:hidden;
 padding-left:8px;
 text-overflow:ellipsis;
 white-space:nowrap
}
.select2-container .select2-search--inline {
 float:left
}
.select2-container .select2-search--inline .select2-search__field {
 box-sizing:border-box;
 border:none;
 font-size:100%;
 margin-top:5px;
 padding:0
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
 -webkit-appearance:none
}
.select2-dropdown {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 box-sizing:border-box;
 display:block;
 position:absolute;
 left:-100000px;
 width:100%;
 z-index:1051
}
.select2-results {
 display:block
}
.select2-results__options {
 list-style:none;
 margin:0;
 padding:0
}
.select2-results__option {
 padding:6px;
 user-select:none;
 -webkit-user-select:none
}
.select2-results__option[aria-selected] {
 cursor:pointer
}
.select2-container--open .select2-dropdown {
 left:0
}
.select2-container--open .select2-dropdown--above {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--open .select2-dropdown--below {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-search--dropdown {
 display:block;
 padding:4px
}
.select2-search--dropdown .select2-search__field {
 padding:4px;
 width:100%;
 box-sizing:border-box
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
 -webkit-appearance:none
}
.select2-search--dropdown.select2-search--hide {
 display:none
}
.select2-close-mask {
 border:0;
 margin:0;
 padding:0;
 display:block;
 position:fixed;
 left:0;
 top:0;
 min-height:100%;
 min-width:100%;
 height:auto;
 width:auto;
 opacity:0;
 z-index:99;
 background-color:#fff;
 filter:alpha(opacity=0)
}
.select2-hidden-accessible {
 border:0!important;
 clip:rect(0 0 0 0)!important;
 height:1px!important;
 margin:-1px!important;
 overflow:hidden!important;
 padding:0!important;
 position:absolute!important;
 width:1px!important
}
.select2-container--classic .select2-results>.select2-results__options,.select2-container--default .select2-results>.select2-results__options {
 max-height:200px;
 overflow-y:auto
}
.select2-container--default .select2-selection--single {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
 color:#444;
 line-height:28px
}
.select2-container--default .select2-selection--single .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
 color:#999
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
 height:26px;
 position:absolute;
 top:1px;
 right:1px;
 width:20px
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
 border-color:#888 transparent transparent;
 border-style:solid;
 border-width:5px 4px 0;
 height:0;
 left:50%;
 margin-left:-4px;
 margin-top:-2px;
 position:absolute;
 top:50%;
 width:0
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
 float:left
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
 left:1px;
 right:auto
}
.select2-container--default.select2-container--disabled .select2-selection--single {
 background-color:#eee;
 cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
 display:none
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
 border-color:transparent transparent #888;
 border-width:0 4px 5px
}
.select2-container--default .select2-selection--multiple {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:text
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
 box-sizing:border-box;
 list-style:none;
 margin:0;
 padding:0 5px;
 width:100%
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
 list-style:none
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
 color:#999;
 margin-top:5px;
 float:left
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700;
 margin-top:5px;
 margin-right:10px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
 background-color:#e4e4e4;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:default;
 float:left;
 margin-right:5px;
 margin-top:5px;
 padding:0 5px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
 color:#999;
 cursor:pointer;
 display:inline-block;
 font-weight:700;
 margin-right:2px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
 color:#333
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder {
 float:right
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
 margin-left:5px;
 margin-right:auto
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
 margin-left:2px;
 margin-right:auto
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
 border:1px solid #000;
 outline:0
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
 background-color:#eee;
 cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
 display:none
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--default .select2-search--dropdown .select2-search__field {
 border:1px solid #aaa
}
.select2-container--default .select2-search--inline .select2-search__field {
 background:0 0;
 border:none;
 outline:0;
 box-shadow:none;
 -webkit-appearance:textfield
}
.select2-container--default .select2-results__option[role=group] {
 padding:0
}
.select2-container--default .select2-results__option[aria-disabled=true] {
 color:#999
}
.select2-container--default .select2-results__option[aria-selected=true] {
 background-color:#ddd
}
.select2-container--default .select2-results__option .select2-results__option {
 padding-left:1em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
 padding-left:0
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-1em;
 padding-left:2em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-2em;
 padding-left:3em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-3em;
 padding-left:4em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-4em;
 padding-left:5em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
 margin-left:-5em;
 padding-left:6em
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
 background-color:#5897fb;
 color:#fff
}
.select2-container--default .select2-results__group {
 cursor:default;
 display:block;
 padding:6px
}
.select2-container--classic .select2-selection--single {
 background-color:#f7f7f7;
 border:1px solid #aaa;
 border-radius:4px;
 outline:0;
 background-image:-webkit-linear-gradient(top,#fff 50%,#eee 100%);
 background-image:-o-linear-gradient(top,#fff 50%,#eee 100%);
 background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}
.select2-container--classic .select2-selection--single:focus {
 border:1px solid #5897fb
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
 color:#444;
 line-height:28px
}
.select2-container--classic .select2-selection--single .select2-selection__clear {
 cursor:pointer;
 float:right;
 font-weight:700;
 margin-right:10px
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
 color:#999
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
 background-color:#ddd;
 border:none;
 border-left:1px solid #aaa;
 border-top-right-radius:4px;
 border-bottom-right-radius:4px;
 height:26px;
 position:absolute;
 top:1px;
 right:1px;
 width:20px;
 background-image:-webkit-linear-gradient(top,#eee 50%,#ccc 100%);
 background-image:-o-linear-gradient(top,#eee 50%,#ccc 100%);
 background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
 border-color:#888 transparent transparent;
 border-style:solid;
 border-width:5px 4px 0;
 height:0;
 left:50%;
 margin-left:-4px;
 margin-top:-2px;
 position:absolute;
 top:50%;
 width:0
}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
 float:left
}
.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
 border:none;
 border-right:1px solid #aaa;
 border-radius:4px 0 0 4px;
 left:1px;
 right:auto
}
.select2-container--classic.select2-container--open .select2-selection--single {
 border:1px solid #5897fb
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
 background:0 0;
 border:none
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
 border-color:transparent transparent #888;
 border-width:0 4px 5px
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0;
 background-image:-webkit-linear-gradient(top,#fff 0,#eee 50%);
 background-image:-o-linear-gradient(top,#fff 0,#eee 50%);
 background-image:linear-gradient(to bottom,#fff 0,#eee 50%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0;
 background-image:-webkit-linear-gradient(top,#eee 50%,#fff 100%);
 background-image:-o-linear-gradient(top,#eee 50%,#fff 100%);
 background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
}
.select2-container--classic .select2-selection--multiple {
 background-color:#fff;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:text;
 outline:0
}
.select2-container--classic .select2-selection--multiple:focus {
 border:1px solid #5897fb
}
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
 list-style:none;
 margin:0;
 padding:0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
 display:none
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
 background-color:#e4e4e4;
 border:1px solid #aaa;
 border-radius:4px;
 cursor:default;
 float:left;
 margin-right:5px;
 margin-top:5px;
 padding:0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
 color:#888;
 cursor:pointer;
 display:inline-block;
 font-weight:700;
 margin-right:2px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
 color:#555
}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
 float:right;
 margin-left:5px;
 margin-right:auto
}
.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
 margin-left:2px;
 margin-right:auto
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
 border:1px solid #5897fb
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
 border-top:none;
 border-top-left-radius:0;
 border-top-right-radius:0
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
 border-bottom:none;
 border-bottom-left-radius:0;
 border-bottom-right-radius:0
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
 border:1px solid #aaa;
 outline:0
}
.select2-container--classic .select2-search--inline .select2-search__field {
 outline:0;
 box-shadow:none
}
.select2-container--classic .select2-dropdown {
 background-color:#fff;
 border:1px solid transparent
}
.select2-container--classic .select2-dropdown--above {
 border-bottom:none
}
.select2-container--classic .select2-dropdown--below {
 border-top:none
}
.select2-container--classic .select2-results__option[role=group] {
 padding:0
}
.select2-container--classic .select2-results__option[aria-disabled=true] {
 color:grey
}
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
 background-color:#3875d7;
 color:#fff
}
.select2-container--classic .select2-results__group {
 cursor:default;
 display:block;
 padding:6px
}
.select2-container--classic.select2-container--open .select2-dropdown {
 border-color:#5897fb
}

Let’s say I wanted to override something in the first block of this CSS, which is this:

.select2-container {
 box-sizing:border-box;
 display:inline-block;
 margin:0;
 position:relative;
 vertical-align:middle
}

Let’s change the margin to 5px:

.searchandfilter .select2-container {
 margin: 5px;
}

See how I added .searchandfilter to it? That makes my new CSS more specific. Of course, you have to place such code in to your theme, the theme customizer or a plugin like Simple Custom CSS.

[Anonymous]

How can I set up a custom message when search returns 0 results?

Site: Click here

My code:

<?php

global $searchandfilter;

$atrair_home = $searchandfilter->get(180)->current_query();

    if ((!$atrair_home->is_filtered())&&($atrair_home->get_search_term()=="")) {

        $args = array(
            'post_type' => array(
                'post',
                'ebooks',
                'podcasts',
                'videos'
            ),
            'post_status' => 'publish',
           );
           
          $posts = new WP_Query( $args );
          if( $posts->have_posts() ) :
          ?>
    <?php
                while( $posts->have_posts() ) :
                  $posts->the_post();
                  ?>
        <div class="posts-double">
				<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
				<a class="thumbnail" href="<?php the_permalink() ?>" rel="bookmark">
					<?php 
										$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'thumbnail');
										echo '<div class="image" style="background:url('.esc_url($featured_img_url).')"></div>' ?>
					<?php endif; ?>
				</a>
				<div class="content">
					<a class="title" href="<?php the_permalink() ?>" rel="bookmark">
						<?php the_title(); ?>
					</a>
					<p class="descriptions">
						<?php echo wp_trim_words( get_the_content(), 15, '...' );?>
					</p>
					<div class="related-post-category">
						<?php the_tags(); 
								$post_type = get_post_type(get_the_ID());
								$post_name = get_post_type_object(get_post_type())->labels;
								if ( $post_type != 'post' ) {
									echo '<a href="'.get_post_type_archive_link( $post_type ).'"><span class="'.$post_type.'">'.$post_name->name.'</span></a>';
								};
								?>
					</div>
				</div>
				<div class="posts-footer">
						<div class="related-time">
							<?php echo do_shortcode('[rt_reading_time]'); ?>
						</div>
						<div class="related-bookmark">
							<?php echo do_shortcode('[cbxwpbookmarkbtn]'); ?>
						</div>
					</div>
			</div>
        <?php
                endwhile;
                wp_reset_postdata();
    
          else :
            echo 'Não conseguimos encontrar nenhum resultado...';
          endif;
    
            }

    else
    //Inicio fim
    {

        if ( $query->have_posts() )
        {
            ?>
            
            Found <?php echo $query->found_posts; ?> Results<br />
            <div class='search-filter-results-list'>
            <?php
                while ($query->have_posts())
                {
                    $query->the_post();
                    
                    ?>
                            <div class="posts-double">
                        <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                        <a class="thumbnail" href="<?php the_permalink() ?>" rel="bookmark">
                            <?php 
                                                $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'thumbnail');
                                                echo '<div class="image" style="background:url('.esc_url($featured_img_url).')"></div>' ?>
                            <?php endif; ?>
                        </a>
                        <div class="content">
                            <a class="title" href="<?php the_permalink() ?>" rel="bookmark">
                                <?php the_title(); ?>
                            </a>
                            <p class="descriptions">
                                <?php echo wp_trim_words( get_the_content(), 15, '...' );?>
                            </p>
                            <div class="related-post-category">
                                <?php the_tags(); 
                                        $post_type = get_post_type(get_the_ID());
                                        $post_name = get_post_type_object(get_post_type())->labels;
                                        if ( $post_type != 'post' ) {
                                            echo '<a href="'.get_post_type_archive_link( $post_type ).'"><span class="'.$post_type.'">'.$post_name->name.'</span></a>';
                                        };
                                        ?>
                            </div>
                        </div>
                        <div class="posts-footer">
                                <div class="related-time">
                                    <?php echo do_shortcode('[rt_reading_time]'); ?>
                                </div>
                                <div class="related-bookmark">
                                    <?php echo do_shortcode('[cbxwpbookmarkbtn]'); ?>
                                </div>
                            </div>
                    </div>
            
                            <?php
                            
            
                }
            ?>
            </div>
        <?php
        }
        else
        {
            ?>
            <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
                <span>End of Results</span>
            </div>
            <?php
        }
    }
        ?>

[Anonymous]

Hi, I need to know what is the CSS to change thhe style of the filter header text and the style of the filter choices. Here is a screenshot explaining what I am talking about. i.is.cc/2vjBtQQn.png

[Anonymous]

I’m using Listify theme. I have setup a few filters as a trial test.
When filters are selected the new results do load up in the same page which I want, however the format is different. (On the original I have some custom styles and results also display in 2 columns) When I use the filters they reload in a one column setup and the styles or well the way they are displayed is very different.

Wondering how I can fix this issue.