style results page with Thrive Architect

Anonymous

#245023

Hello Trevor,

I wonder if i can style the results page with Thrive Architect. With Thrive Architect (https://thrivethemes.com/architect/) I can style post lists to my needs. Is there any way to do this?

Robert

Anonymous

#245026

I’ve seen a maybe similar topic: https://support.searchandfilter.com/forums/topic/filter-on-thrive-theme-builder-post-grid/

I’m not sure how this will fit. I don’t use the Theme Builder – I just use Thrive Architect which mainly styles single pages while Theme Builder styles the templates.

My custom fields are not on custom post types. They are on the normal pages.

Thanks in advance!
Robert

Trevor

#245069

Are you able to send me a live link/URL to your search page so I can take a look?

Can you give me some pointers on what you are trying to style, what it needs to look like?

At this time, Thrive and Thrive Builder are not ones that we directly support with extensions, but something may be possible.

Anonymous

#245108

Hello Trevor,

again: thanks for getting back to me so quickly! The test site is: https://staging.servicemanagement.tools/test-result/

I made a video to give you an idea what I want to do.
https://www.screenpresso.com/=TPyqg

The styling I will do with thrive. What I want to achive is that the post list (see video) ist filtered using your plugin.

Robert

Trevor

#245168

I checked back on my notes and before, with Thrive, I ‘cheated’ by creating a custom results.php template that mimicked the Thrive page. So, make the page and content as you like ignoring our plugin entirely, then inspect the HTML of the content area and edit the results.php we provide as an exemplar following this guide, so that it matches the structure and classes etc.):

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

So, here is one I made before:

<?php
/**
 * Search & Filter Pro 
 *
 * Sample Thrive Results Template
 * 
 */

if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Cars<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>
	<div class="thrv_wrapper thrv_post_grid" data-unit="px">
	  <div class="tve_post_grid_wrapper tve_clearfix tve_post_grid_grid">

        <div style="display: flex;" class="tve_pg_row tve_clearfix">

	<?php
    $thrive_counter = 0;
    $thrive_row_counter = 0;
	while ($query->have_posts())
	{
      if ( $thrive_counter == 0 ) && ( $thrive_row_counter > 0 ) {
      ?>
	    </div>
        <div style="display: flex;" class="tve_pg_row tve_clearfix">
      <?php
      }
      $query->the_post();
		
      ?>
			<div class="tve_post tve_post_width_5 " style="align-items: stretch;">
              <div class="tve_pg_container">
			
			
			<?php 
              if ( has_post_thumbnail() ) {
                $thrive_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'single-post-thumbnail' );
			?>
                  <a href="<?php the_permalink(); ?>">
                    <div class="tve_post_grid_image_wrapper" style="background-image: url('<?php echo $thrive_image[0]; ?>')">
                      <div class="tve_pg_img_overlay">
                        <span class="thrv-icon thrv-icon-forward"></span>
                      </div>
                    </div>
                  </a>
			<?php
              }
			?>

		        <span class="tve-post-grid-title " style="font-size: 18px;line-height: 20px;font-family:'Arial', 'Helvetica', 'sans-serif';">
                  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </span>

                <div class="tve_pg_more" data-tve-custom-colour="62938813">
                  <a href="<?php the_permalink(); ?>">View Now</a>
                  <span class="thrv-icon thrv-icon-uniE602"></span>
                </div>
			
              </div>
            </div>
		
		<?php
      $thrive_counter++;
      if ( $thrive_counter > 4 ) {
        $thrive_counter = 0;
        $thrive_row_counter++;
      }
	}
	?>
	    </div>
      </div>
    </div>
	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

#245629

Trevor, thanks a lot!

Roebrt

Trevor

#245632

Did that help? Let me know if this issue is resolved (or when it is)?

Anonymous

#245671

Well, it is a bit to complicated for my skills, I think. I started to create a own results.php. While doing this I encountered that this is much more flexible for my needs.

Best
Robert

Trevor

#245839

Ah, OK. Is it OK to close this thread?

Anonymous

#245851

sure, thanks Trevor!

[Author]

Posts