customizing search result style

Anonymous

#55489

This reply has been marked as private.

Trevor

#55491

I have sent a contact request to him.

Trevor

#55492

A customized results.php for you:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Results Template
 * 
 * @package   Search_Filter
 * @author    Ross Morsali
 * @link      http://www.designsandcode.com/
 * @copyright 2015 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 - think 
 * of it as a template part
 * 
 * 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() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<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>
<ul class="penci-grid">

	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
  <li class="list-post">
    <article id="post-3238" class="item">
      <div class="thumbnail">
			<?php 
				if ( has_post_thumbnail() ) {
					echo '<p>';
					the_post_thumbnail("thumb");
					echo '</p>';
				}
			?>
					</div>			
      <div class="content-list-right content-list-center">
        <div class="header-list-style">
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
							</div>			
        <div class="item-content">
									<p><br /><?php the_excerpt(); ?></p>
							</div>
					</div>
    </article>
  </li>
		
		<?php
	}
	?>
</ul>
	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";
}
?>

Anonymous

#55512

Thank Trevor for your help. After implementing the code, a weird white space is appearing before the titles and thumbnails get smaller than what it should be. Can you have a look at results at http://dev.behroo.com/searchtest

Trevor

#55541

Looks like you also need to remove the <hr /> line from the code, some custom css for you:

.penci-grid h2 {
  clear: none !important;
}

Trevor

#55543

And this line:

the_post_thumbnail("small");

Try it like this:

the_post_thumbnail("thumb");

[Author]

Posts