The forums are closed and will be removed when we launch our new site.
Looking for support? You can access the support system via your account.
Forums › Forums › Search & Filter Pro › styling search results
- This topic has 15 replies, 2 voices, and was last updated 4 years, 4 months ago by Trevor.
-
Ali Goodarzi(Private) May 10, 2020 at 3:57 pm #243238
Hi Guys, I want to know whether there is a way I can style the search results? cant find enough classes to do my custom css.
Thank youTrevor Moderator(Private) May 11, 2020 at 8:42 am #243260Comparing the two forms is not easy, as you have dropdown selects in one and checkboxes in the other?
I DO see an issue with the infinite scroll that needs fixing, where it shows No Results at the bottom. This is a modified version of the standard infinite scroll results.php file to stop it from happening:
<?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 /> <div class='search-filter-results-list'> <?php while ($query->have_posts()) { $query->the_post(); ?> <div class='search-filter-result-item'> <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> <hr /> </div> <?php } ?> </div> <?php } else { //figure out which type of "no results" message to show $message = "noresults"; if(isset($query->query['paged'])) { if($query->query['paged']>1){ $message = "endofresults"; } } if($message=="noresults") { ?> <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'> <span>No Results Found</span> </div> <?php } else { ?> <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'> <span>End of Results</span> </div> <?php } } ?>
As for the styling, might you be able to show me an annotated (naming colors, font family, weight, size) screenshot of the frontend form and what needs changing? You would need to upload the screenshot image to a file sharing site (like the WordPress Cloudup site) and share the link for it with me?
Trevor Moderator(Private) May 12, 2020 at 2:56 pm #243566This:
<div class="searchresults1"><?php if ( has_post_thumbnail() ) { echo '<p>'; the_post_thumbnail("small"); echo '</p>'; } ?></div>
Becomes this:
<div class="searchresults1"><?php if ( has_post_thumbnail() ) { echo '<a href=' . the_permalink() . '>'; the_post_thumbnail("small"); echo '</a>'; } ?></div>
I think.
Ali Goodarzi(Private) May 16, 2020 at 6:05 am #244340Trevor thanks a lot, but its not working.
Whatever i try is not working.The code you sent me puts the code on top of the image and links the image to the page that it currently is.
Trevor Moderator(Private) May 18, 2020 at 2:36 pm #244500I am not sure what you mean. Do you mean that every image links to the same URL (the current page), or to the post that is being shown? If not the post, what do you need it to link to? A larger version of the image, a document to download …
Trevor Moderator(Private) May 19, 2020 at 12:27 pm #244865This:
<div class="searchresults1"><?php if ( has_post_thumbnail() ) { echo '<a href=' . the_permalink() . '>'; the_post_thumbnail("small"); echo '</a>'; } ?></div>
Should be this:
<div class="searchresults1"><?php if ( has_post_thumbnail() ) { echo '<a href=" . the_permalink() . ">'; the_post_thumbnail("small"); echo '</a>'; } ?></div>
I think.
-
AuthorPosts
The topic ‘styling search results’ is closed to new replies.