Search Results for 'filter style'

[Ross]

Hey Philip

I’m not sure what you mean about suggestions, you mean when a user starts typing?

This plugin doesn’t provide that functionality (yet).

Also, in regards to the widget sidebar – there was an overflow problem but I thought I fixed this with CSS (I added some styles to style.css) – I *think* you could have left it there, you just needed to clear your cache (that might not be 100% true)!

Thanks

[Ross]

Hey Boaz

There are two ways to do it…

Normally your homepage would have a class on it – .home

So you could style Search forms on your homepage like:

.home .searchandfilter
{
    border:1px solid #f00;
}

Alternatively you could target them individually using attributes:

.searchandfilter[data-sf-form-id='12']
{
    border:1px solid #f00;
}

Where 12 is the ID of your form

I will be adding a proper ID attribute to the forms in the next release.

Thanks

[Ross]

Hey Alfred, how are you displaying your options? Are you using a dropdown?

Form elements are not the easiest things to style but you could try adding some CSS to your theme – something like:

.searchandfilter select option:first-child
{
    color:#f00;
}

This may also help with styling individual items:

http://stackoverflow.com/questions/12836227/change-select-box-option-background-color

Thanks

[Anonymous]

I tried also this way. Create a file called archive-movie.php (where “movie” is my CPT) and entered this code (no get_posts loop):

<div id="content">
  
<?php 
if(have_posts()) : while(have_posts()) : the_post();
	echo '<b>'.the_title().'</b>';
	echo '<div class="my-styles">';
	the_content();
	echo '</div>';
endwhile; endif;
?>
  
</div>

On the frontend, at the url http://localhost/mysite/movie I see all the results. When change the filter, Ajax starts (gives opacity on the results) but when finished the results are the same as before. It doesn’t filter…

[Anonymous]

Hello,

Thank you for your answer.

I don´t find any “query_posts” in my search.php file.

This is my search.php file:

<?php get_header(); ?>
<?php
if($data[‘blog_full_width’]) {
$content_css = ‘width:100%’;
$sidebar_css = ‘display:none’;
$content_class= ‘full-width’;
} elseif($data[‘blog_sidebar_position’] == ‘Left’) {
$content_css = ‘float:right;’;
$sidebar_css = ‘float:left;’;
} elseif($data[‘blog_sidebar_position’] == ‘Right’) {
$content_css = ‘float:left;’;
$sidebar_css = ‘float:right;’;
}
?>
<div id=”content” class=”<?php echo $content_class; ?>” style=”<?php echo $content_css; ?>”>
<div class=”search-page-search-form”>
<h2><?php echo __(‘Need a new search?’, ‘Avada’); ?></h2>
<p><?php echo __(‘If you didn\’t find what you were looking for, try a new search!’, ‘Avada’); ?></p>
<form id=”searchform” class=”seach-form” role=”search” method=”get” action=”<?php echo home_url( ‘/’ ); ?>”>
<input type=”text” value=”” name=”s” id=”s” placeholder=”<?php _e( ‘Search …’, ‘Avada’ ); ?>”/>
<input type=”submit” id=”searchsubmit” value=”” />
</form>
</div>
<?php
if($data[‘search_results_per_page’]) {
$page_num = $paged;
if ($pagenum=”) { $pagenum = 1; }
global $query_string;
} ?>
<?php if (have_posts()) : ?>
<?php while(have_posts()): the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(‘post’); ?>>
<?php
if(‘page’ != $post->post_type && !$data[‘search_featured_images’]):
if($data[‘legacy_posts_slideshow’]) {
get_template_part(‘legacy-slideshow’);
} else {
get_template_part(‘new-slideshow’);
}
endif;
?>
<h2 class=”entry-title”>“><?php the_title(); ?></h2>
<?php if(!$data[‘search_excerpt’]): ?>
<div class=”post-content”>
<?php
$stripped_content = tf_content( $data[‘excerpt_length_blog’], $data[‘strip_html_excerpt’] );
echo $stripped_content;
?>
</div>
<?php endif; ?>
<?php if($data[‘post_meta’]): ?>
<div class=”meta-info”>
<div class=”alignleft vcard”>
<?php if(!$data[‘post_meta_author’]): ?><?php echo __(‘By’, ‘Avada’); ?> <span class=”fn”><?php the_author_posts_link(); ?></span><span class=”sep”>|</span><?php endif; ?><?php if(!$data[‘post_meta_date’]): ?><span class=”updated”><?php the_time($data[‘date_format’]); ?></span><span class=”sep”>|</span><?php endif; ?><?php if(!$data[‘post_meta_cats’]): ?><?php the_category(‘, ‘); ?><span class=”sep”>|</span><?php endif; ?><?php if(!$data[‘post_meta_comments’]): ?><?php comments_popup_link(__(‘0 Comments’, ‘Avada’), __(‘1 Comment’, ‘Avada’), ‘% ‘.__(‘Comments’, ‘Avada’)); ?><span class=”sep”>|</span><?php endif; ?>
</div>
<div class=”alignright”>
<?php if(!$data[‘post_meta_read’]): ?>” class=”read-more”><?php echo __(‘Read More’, ‘Avada’); ?><?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php themefusion_pagination($pages = ”, $range = 2); ?>
<?php else: ?>
<div class=”post-content”>
<div class=”title”>
<h2><?php echo __(‘Couldn\’t find what you\’re looking for!’, ‘Avada’); ?></h2><div class=”title-sep-container”><div class=”title-sep”></div></div>
</div>
<div class=”error_page”>
<div class=”one_third”>
<h1 class=”oops <?php echo ($sidebar_css != ‘display:none’) ? ‘sidebar-oops’ : ”; ?>”><?php echo __(‘Oops!’, ‘Avada’); ?></h1>

</div>
<div class=”one_third useful_links”>
<h3><?php echo __(‘Here are some useful links:’, ‘Avada’); ?></h3>
<?php $iconcolor = strtolower($data[‘checklist_icons_color’]); ?>

<style type=’text/css’>
.post-content #checklist-1 li:before{color:<?php echo $iconcolor; ?> !important;}
.rtl .post-content #checklist-1 li:after{color:<?php echo $iconcolor; ?> !important;}
</style>

<?php wp_nav_menu(array(‘theme_location’ => ‘404_pages’, ‘depth’ => 1, ‘container’ => false, ‘menu_id’ => ‘checklist-1’, ‘menu_class’ => ‘list-icon circle-yes list-icon-arrow’)); ?>
</div>
<div class=”one_third last”>
<h3><?php echo __(‘Try again!’, ‘Avada’); ?></h3>
<p><?php echo __(‘If you want to rephrase your query, here is your chance:’, ‘Avada’); ?></p>
<?php get_search_form(); ?>
</div>
</div>
</div>
<?php endif; ?>
</div>
<div id=”sidebar” style=”<?php echo $sidebar_css; ?>”>
<?php
if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Search Sidebar’)):
endif;
?>
</div>
<?php get_footer(); ?>

Thank you very much for your help.

Best regards…

[Anonymous]

Hi there,

I am attempting to style the search results part of the plugin, I am using a custom css file for the particular .

So as I’m sure your aware the results are shown in the search-filter-results classed div but the problem is that the individual results are in a plain div.

I am trying to create a sort of square box with rounded corners for each result so that you can clearly see they are separate but naturally I cannot style a plain div with no class or ID without casuing serious problems to the rest of the divs on the page. Could you please edit the output so that there is atleast a div class=result or something? just some sort of unique identifier so I can style it.

would be much appreciated

[Anonymous]

Hi Ross,

Yes that is correct, although previously the template (style/layout) was incorrect when searching with the ‘All Products’ selection (it was using the default WordPress search page as opposed to the WooCommerce archive page).

Adding this code has ensured the correct template is always used for a WooCommerce search, and that the WooCommerce functionality (filters etc.) is displayed.

Thanks

Matt

[Anonymous]

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2014 Designs & Code
 * 
 * Note: these templates are not full page templates, rather 
 * just an encaspulation of the your results loop which should
 * be inserted in to other pages by using a shortcode
 * 
 * This template is an absolute base example showing you what
 * you can do, for more customisation see the WordPress docs 
 * and using template tags - 
 * 
 * http://codex.wordpress.org/Template_Tags
 *
 */

if ( $query->have_posts() )
{
$query->the_post();
$myid = get_the_ID();
	?>
	
	<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<div class="filter-results" >
	<?php echo $query->found_posts; ?> Ergebnisse  Seite <?php echo $query->query['paged']; ?> von <?php echo $query->max_num_pages; ?>
	
	<div style="float:right;">
	<?php sf_pagination_prev_next($query->query['paged'], $query->max_num_pages); ?>
	<?php sf_pagination_numbers($query->query['paged'], $query->max_num_pages, " "); ?>

	</div>
	</div>
	</div>
    </div>
    <div class="row">

    <?php
    
   
   if ($myid == '3100') {
    echo '<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">';
   
   dynamic_sidebar( 'wein' );
    echo '</div>';
  }
 

	while ($query->have_posts())
	{
		$query->the_post();
		$post_type = get_post_type( get_the_ID() );
	
		?>

	
		
		
			
			
			
				<?php 

				switch ($post_type) {
				    
				    case 'wein': 
                        
                        echo '<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">';
						echo '<div class="item-'.$post_type.'">'; 
				    	$wine_id = get_the_ID();
				    	$term_list = wp_get_post_terms($wine_id, 'winzer', array("fields" => "names"));
						$title = get_the_title();
				        $permalink = get_permalink();
				        $name =  get_field('wine-name');
				        $img_url =  get_field('wine-detail-image');

				        if (empty($img_url)) {
				        $img_url = 'http://www.weinamlimit.com/wordpress/wp-content/uploads/wine_empty.png';
				       }
				        $year =  get_field('wine-detail-year');
				        $sf =  get_field('wine-detail-soul-faktor');
				        $size =  get_field('wine-detail-size');
				        echo '<div class="item-overlay"><div class="overlay-content">'.$sf.'<br>Flasche'.$size.'</div></div>';
				        echo '<a href="'.$permalink.'" title="'.$title.'">';
				        //echo '<img src="'.aq_resize( $img_url, '300').'" alt="'.$title.'"></a></div>';
				        echo '<img src="'.aq_resize( $img_url, '300').'" ></a></div>';
				        echo '<div class="wine-description"><h2><a href="'.$permalink.'" title="'.$title.'">'.$year.' '.$name.'</a></h2>';
				        echo '<h3>'.$term_list[0].'</h3></div>';
				        break;
				    case 'winzer':
				    	$grower_id = get_the_ID();
				    	$term_list_country = wp_get_post_terms($grower_id, 'land', array("fields" => "names"));
				    	$term_list_region = wp_get_post_terms($grower_id, 'anbaugebiet', array("fields" => "names"));
				        $img_url =  get_field('winegrower-preview-image');
				        $logo_url =  get_field('winegrower-logo');
				        $title = get_the_title();
				        $permalink = get_permalink();
				        echo '<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">';
						echo '<div class="item-'.$post_type.'">'; 
						if (!empty($logo_url)){
						echo '<div class="logo-overlay"><img src="'.$logo_url.'"></div>';}
						echo '<a href="'.$permalink.'" title="'.$title.'">';
				        //echo '<img src="'.aq_resize( $img_url, '600', '290' , true).'" alt="'.$title.'"></a></div>';
				        echo '<img src="'.aq_resize( $img_url, '600', '290' , true).'" ></a></div>';
				        echo '<div class="grower-description"><h2><a href="'.$permalink.'" title="'.$title.'">'.$year.' '.$title.'</a></h2>';
				        echo '<h3>'.$term_list_region[0].', '.$term_list_country[0].'</h3></div>';
				       
				        break;
				    
				}

		

				

				 ?>
				
			
	
			</div>

		
		<?php
	}
	?>

</div>
	<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<div class="filter-results" >
	<?php echo $query->found_posts; ?> Ergebnisse  Seite <?php echo $query->query['paged']; ?> von <?php echo $query->max_num_pages; ?>
	
	<div style="float:right;">
	<?php sf_pagination_prev_next($query->query['paged'], $query->max_num_pages); ?>
	<?php sf_pagination_numbers($query->query['paged'], $query->max_num_pages, " "); ?>

	</div>
	</div>
	</div>
    </div>
	
	<?php
}
else
{
	echo "No Results Found";
}
?>

This is my results item, should be right?

[Ross]

Hey Tom

Thanks for the info, RE the checkbox filter – I’ve just noticed this is a bug – because you are not using permalinks and using Post Id the plugin has an error – I will test and fix this soon.

RE the layout

Customising your results is a little out of scope of support of the plugin but I’ll try to help point in the right direction:

First you must copy over the template files to your theme, as per these instructions:

http://www.designsandcode.com/wordpress-plugins/search-filter-pro/docs/#docs-new-ajax

Once you have done that we can begin customising your results..

For all templates you will find a while loop – this is how it loops through your posts and displays your pages and results.

So to copy the style of your search results page to this one, I would take a look at the template for displaying your search results (probably search.php), and find the while loop.

Then open results.php – the template you copied over from the instructions, and you will also see a while loop. Although the loops are a little different, you should be able to copy over the HTML from search.php to results.php.

This is the basic approach to copying over the layout from these files 🙂

Hope that helps!

[Anonymous]

Thanks

Does the plugin have an advanced feature where I can display the categories as images (but people can still select multiple icons to then filter?)