AnonymousInactive
Thanks Trevor
I’ve been looking at this thread
https://support.searchandfilter.com/forums/search/hide+content+until+submit/
To learn how to hide the results until I click the submit button
Is there a cleaner way to do this as it seems a bit hacky
Cheers
AnonymousInactive
Has anyone accomplished this? I tried with the following, but I dont think the results will load in a hidden div…
<script>
jQuery(document).ready(function(){
jQuery(‘.search-filter-results’).click( function(e) {
e.preventDefault(); // stops link from making page jump to the top
e.stopPropagation(); // when you click the button, it stops the page from seeing it as clicking the body too
jQuery(‘.search-filter-results’).show();
});
jQuery(‘.search-filter-results’).click( function(e) {
e.stopPropagation(); // when you click within the content area, it stops the page from seeing it as clicking the body too
});
jQuery(‘body’).click( function() {
jQuery(‘.search-filter-results’).hide();
});
});
</script>
You can see i’ve gotten it to work the other way (submit button hides results) – http://thriveworks.alphaintelknows.com/franchise-job-search/
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.
