Customisation of the search results page

Anonymous

#70225

I have followed the instructions on Design and Code website to create my first search form.

1) How can I have the search box and the submit button on the same line rather than having on two lines?

2) When I first search for a keyword, only the title of the pages containing the keyword are shown without any excerpts. How can I have the excerpt after each title?

Trevor

#70226

Can you tell me what Display Results Method you are using, and with what theme (or self made theme)?

Do you have a live page I can see it on, as Custom CSS (which is what would be needed for the button question) will be easier for me to make for you.

Any other customizations might also depend on the theme in use (such as if keyword highlighting is possible). It might be that installing the free Relevanssi plugin (and enabling support in the S&F advanced options, I think that plugin has options to highlight keywords (which would mean wrapping them in spans).

Anonymous

#70261

This reply has been marked as private.

Trevor

#70334

OK. The >> is made by your theme and needs to be switched off inside search and filter forms, with Custom CSS:

.bSe .searchandfilter ul li::before {content: '' !important;}

To put the search field and button next to each other, this:

.searchandfilter .sf-field-search {
  display: inline-block;
  padding-left: 0 !important;
  margin-right: 20px;
}
.searchandfilter .sf-field-submit {
  display: inline-block;
  padding-left: 0 !important;
}

For the second point, to hide results until a search has been made, I need to know you have placed a copy of the results.php file in your theme or child theme folder, as here:

https://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

Assuming that you have, edit that file and replace the content with this:

<?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
 *
 */

global $searchandfilter;
$sf_current_query = $searchandfilter->get(255)->current_query();
if ((!$sf_current_query->is_filtered())&&($sf_current_query->get_search_term()=="")) {
  echo '<div>Nothing to see here folks!</div>'; 
} else {
	
	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>
	
	<?php
	while ($query->have_posts())
	{
		$query->the_post();
		
		?>
		<div>
			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
			
			<p><br /><?php the_excerpt(); ?></p>
			<?php 
				if ( has_post_thumbnail() ) {
					echo '<p>';
					the_post_thumbnail("small");
					echo '</p>';
				}
			?>
			<p><?php the_category(); ?></p>
			<p><?php the_tags(); ?></p>
			<p><small><?php the_date(); ?></small></p>
			
		</div>
		
		<hr />
		<?php
	}
	?>
	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";
}
}
?>

That should work, I hope.

For #3. It would be better to use your theme’s own styling, and to do this I would need to see a more normal results page in your theme that looks OK to you, then we can borrow their styling.

Trevor

#70336

Oh, where I put ‘Nothing to see here folks!’ you might want to put something, else you can comment it out (add // to the start of that line).

Anonymous

#70370

This reply has been marked as private.

Trevor

#70488

In the first I think the appearing excerpts is caused by malformed html in them, which is odd, as an except should not have HTML in them. I notice that they gain a print button also, and I wonder if that is the cause. They are wrapped in <p></p> tags, and these should be <div></div> tags or not there at all.

I think you will need to try to fix this first.

Anonymous

#70573

This reply has been marked as private.

Trevor

#70576

In the code I gave you, see if this makes a difference:

Change this:

<p><br /><?php the_excerpt(); ?></p>

to this:

<div><?php the_excerpt(); ?></div>

Anonymous

#70598

This reply has been marked as private.

[Author]

Posts