Display image on search results for Travelify WordPress theme

Dear members of the support forum.

I am using Travelify (with a Child theme) and Woocommerce.

What I would like is when I type something in the search form and hit enter, the search results will show up with a thumbnail image of the featured image next to every result.

I would like this to work on products, pages and posts.

Is this possible? Any help will be much appreciated!

Hi @maarten,

I hope you are well today and thank you for your question.

You can achieve this by adding the following code in the functions.php file of your child theme.

/**
 * Function to show the search results.
 */
function travelify_theloop_for_search() {
	global $post;

	if( have_posts() ) {
		while( have_posts() ) {
			the_post();

			do_action( 'travelify_before_post' );
?>
	<section id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<article>

			<?php do_action( 'travelify_before_post_header' ); ?>
<?php
			if( has_post_thumbnail() ) {
				$image = '';
	     		$title_attribute = apply_filters( 'the_title', get_the_title( $post->ID ) );
	     		$image .= '<figure class="post-featured-image">';
	  			$image .= '<a href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">';
	  			$image .= get_the_post_thumbnail( $post->ID, 'featured', array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) ) ).'</a>';
	  			$image .= '</figure>';

	  			echo $image;
	  		}
  			?>
			<header class="entry-header">
    			<h2 class="entry-title">
    				<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_title(); ?></a>
    			</h2><!-- .entry-title -->
  		</header>

  		<?php do_action( 'travelify_after_post_header' ); ?>

  			<?php do_action( 'travelify_before_post_content' ); ?>

  			<div class="entry-content clearfix">
    			<?php the_excerpt(); ?>
  			</div>

  			<?php do_action( 'travelify_after_post_content' ); ?>

		</article>
	</section>
<?php
			do_action( 'travelify_after_post' );

		}
	}
	else {
		?>
		<h1 class="entry-title"><?php _e( 'No Posts Found.', 'travelify' ); ?></h1>
      <?php
   }
}

And add the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

body.search-results .post-featured-image {
  float: left;
  max-width: 355px;
  width: 100%;
  margin: 15px;
}

body.search-results .entry-content {
  padding: 0;
  margin: 0 10px;
}

Best Regards,
Movin

Hi @movin !

Thank you so much for your reply!! I’m sorry I didn’t answer before. Somehow I didn’t get notified by mail, so I just went to check manually.

Your solution is a really great piece of code! It works very well for me. I adjusted the .css code to this, to get a nice thumbnail size image:

body.search-results .post-featured-image {
  float: right;
  width: 150px;
  height: 100%;
  margin: 15px;
  margin-top: 30px;
}

I am left with 2 questions though. I hope you know the answer. I have some .css beginner skills but I know very little about PHP.

  1. How do I change the height of the images in the search results? No matter how I change the values in the .css code, the image will always be a narrow rectangle with the top and bottom cut off. All my featured images are 1000 x 750 px and I would like to display a small version of the entire image next to the search results.

  2. When I get alot of search results (spread over multiple pages) I somehow land on the lst page of results after hitting enter. At the bottom of the page I can hit ‘previous’ to see the previous page, instead of landing on the 1st page and clicking ‘next’.

Do you know how I can tackle those 2 issues.

Again. many thanks for you time and reply

Hi @maarten,

1. How do I change the height of the images in the search results? No matter how I change the values in the .css code, the image will always be a narrow rectangle with the top and bottom cut off. All my featured images are 1000 x 750 px and I would like to display a small version of the entire image next to the search results.

In the previously shared code we are using the get_the_post_thumbnail to display the thumbnail image, this function takes second argument as the size of the image that you want to display so you can change this argument accordingly to change the height of the images in the search results.

Find more information about it on the following page.

If you are still facing the issue to change their heights then please share your site URL where you are displaying it and let me know how much image height you want to set so that i can help you to achieve it.

2. When I get alot of search results (spread over multiple pages) I somehow land on the lst page of results after hitting enter. At the bottom of the page I can hit ‘previous’ to see the previous page, instead of landing on the 1st page and clicking ‘next’.

I am not sure i understood your above issue so could you please describe it a bit more in detail?

Also please share your site URL where it’s happening so that i can better understand it.

Regards,
Movin

Hi movin,

Thanks again for your reply.

I’m not sure what argument in which file I have to change in order to change the height of the images. I read the document you posted a link to, but I don’t know enough about coding to understand where exactly to make those changes.

About my second issue: When the search results are spread over multiple pages, I see the LAST page with results first instead of the FIRST page.

Thanks again.

By the way, the URL is www.playtoday.nl

Hi @maarten,

I’m not sure what argument in which file I have to change in order to change the height of the images. I read the document you posted a link to, but I don’t know enough about coding to understand where exactly to make those changes.

As said previously you have to change the ‘featured’ argument of get_the_post_thumbnail function added in the custom function travelify_theloop_for_search which i shared you previously in my initial reply and told you to add it in the functions.php file of your child theme.

About my second issue: When the search results are spread over multiple pages, I see the LAST page with results first instead of the FIRST page.

What do you mean by “LAST page with results first”?

The results on the search results page are displayed in the Descending order of the post date.

Does it work fine for you if you temporary remove the shared custom code?

Could you please share direct page URLs where you are facing the issue?

Regards,
Movin

Hi guys!

I had the same question as Maarteen (the one about having the search results show images as well as text) so I didn’t start a new thread. I tried to do what you said with posting the line of code into the functions.php section of the editor. I wasn’t sure exactly where to put it, so I inserted the new code you wrote above the existing code. I broke the site, and a very nice man named Rob from support reset it to the previous day’s settings, so it’s all back to normal now.

Before tinkering around anymore where I shouldn’t be (I know very little…basically nothing about code). I was wondering where I made my mistake. Am I supposed to replace the old code with the new code? Or is there a specific place to apply this code?

Any help you could give would be appreciated! I’m such a newbie and I’m in a little (a lot) over my head, but I’m still very hopeful that there is a way to get images with the search!

Thanks guys!

Jess

PS. If it helps to look at my website the URL is here. I have changed a couple things, but not very much. http://jessexplainsitall.com

Hi Jess,

Thanks for posting here.

You have done everything correct except i think you added the code in the functions.php file of your theme instead you have to add it in the the functions.php file of your child theme.

If you have not developed child theme then you can do so as described on the following page.

https://codex.wordpress.org/Child_Themes

As you said you know very little…basically nothing about code so i have developed the child theme for you which is attached to this reply so just download it and install on your site. After activating this child theme, it will display the images on search results page.

Also you have to add the provided CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

Best Regards,
Movin

Hi Movin,

Thank you so much!!! I cannot believe you made a child theme for me. That’s so nice of you. Honestly, you have no idea how much that is helping me out.

I was going to upload the child theme and then add the CSS to the custom CSS section (like you said), but I didn’t know where to upload the child theme. Is it under appearance > themes > add new > then I upload it there? Or is there a different place that it goes?

Thanks you SO much,

Jess

Hi Jess,

You are always welcome here :slight_smile:

but I didn’t know where to upload the child theme. Is it under appearance > themes > add new > then I upload it there?

Yes you are right.

Best Regards,
Movin

Hi again!

I tried to install the child theme and the custom css to get the search images to show, and it worked wonderfully! The images were beautiful, and I was so thrilled. Then I realized that my menu categories were gone… The only things that stayed on my menu bar were pages (not links or categories). Is there something I did wrong?

Since installing the child theme broke the menu, I deleted it, but if you have any tips for how to fix it, I’ll definitely try again!

Thank you for all your help, you’re seriously making a tough problem a lot easier.

Jess

Hi Jess,

When you use the child theme then just go to the menus screen, select the menu that you want to display at the top of your site and check the checkbox of “Primary Menu” in the Theme locations option as shown in the attached screenshot.

Regards,
Movin

Hello @movin,

Again, thank you so much for your time. I’m still facing the same 2 problems.
This is a URL where you can see both of them live:

http://www.playtoday.nl/?s=opberg&submit=zoek

The .css I used:

body.search-results .post-featured-image {
  float: right;
  max-width: 200px;
  width: 100%;
  margin: 15px;
  margin-top: 30px;
}

On the page you can see that all images next to the search results are cropped on top and bottom.

Also, on the bottom of the page you can only select ‘previous’ (in this case ‘Vorige’) instead of ‘next’.

I hope you can help me with this.

Best regards, Maarten

Hi Maarten,

On the page you can see that all images next to the search results are cropped on top and bottom.

This is because the image URLs have resize parameter at the end as displayed in the following URL

To display whole image the resize parameter should not be appended or appended with large image size value as shown below.

Are you adding the resize parameter in the code?

Could you please share the code that you are using?

Also, on the bottom of the page you can only select ‘previous’ (in this case ‘Vorige’) instead of ‘next’.

This is because on the first blog page http://www.playtoday.nl/?s=opberg&submit=zoek the latest blog posts are displayed and there isn’t any blog post exist latest than those therefore only the ‘previous’ button is displayed to access older blog posts.

On the blog page http://www.playtoday.nl/page/2/?s=opberg&submit=zoek both ‘previous’ & ‘next’ buttons are displayed but on the last blog posts page http://www.playtoday.nl/page/8/?s=opberg&submit=zoek only the ‘next’ button is displayed as there isn’t any blog post exist older than the posts listed on this page.

Regards,
Movin

Hi Movin!

Sorry for my late reply. I was away on honeymoon :slight_smile:

Thank you so much for your reply. I really appreciate it!

I understand what you are saying, but I don’t know how to resolve it. I understand basic css, but not php. In the code I’m using I can’t see any parameters that prompt the resize of the images. This is the code I have in my functions.php:


/**
 * Function to show the search results.
 */
function travelify_theloop_for_search() {
	global $post;

	if( have_posts() ) {
		while( have_posts() ) {
			the_post();

			do_action( 'travelify_before_post' );
?>
	<section id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<article>

			<?php do_action( 'travelify_before_post_header' ); ?>
<?php
			if( has_post_thumbnail() ) {
				$image = '';
	     		$title_attribute = apply_filters( 'the_title', get_the_title( $post->ID ) );
	     		$image .= '<figure class="post-featured-image">';
	  			$image .= '<a href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">';
	  			$image .= get_the_post_thumbnail( $post->ID, 'featured', array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) ) ).'</a>';
	  			$image .= '</figure>';

	  			echo $image;
	  		}
  			?>
			<header class="entry-header">
    			<h2 class="entry-title">
    				<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"><?php the_title(); ?></a>
    			</h2><!-- .entry-title -->
  		</header>

  		<?php do_action( 'travelify_after_post_header' ); ?>

  			<?php do_action( 'travelify_before_post_content' ); ?>

  			<div class="entry-content clearfix">
    			<?php the_excerpt(); ?>
  			</div>

  			<?php do_action( 'travelify_after_post_content' ); ?>

		</article>
	</section>
<?php
			do_action( 'travelify_after_post' );

		}
	}
	else {
		?>
		<h1 class="entry-title"><?php _e( 'No Posts Found.', 'travelify' ); ?></h1>
      <?php
   }
}
This is because on the first blog page http://www.playtoday.nl/?s=opberg&submit=zoek the latest blog posts are displayed and there isn’t any blog post exist latest than those therefore only the ‘previous’ button is displayed to access older blog posts.

OK, I understand that Wordpress shows the most recent posts first in the search results. In my case the ‘posts’ are actually products. Is there any way to show the oldest products first?

Thanks again!
All the best,
Maarten

Hi Maarten,

Thank you for your reply and i hope you had a great honeymoon.

I understand what you are saying, but I don’t know how to resolve it. I understand basic css, but not php. In the code I’m using I can’t see any parameters that prompt the resize of the images. This is the code I have in my functions.php:

In the above code try changing the function get_the_post_thumbnail parameter from ‘featured’ to array( 1000, 750) as displayed below.

Before :
$image .= get_the_post_thumbnail( $post->ID, 'featured', array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) ) ).'</a>';

After :
$image .= get_the_post_thumbnail( $post->ID, array( 1000, 750), array( 'title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) ) ).'</a>';

Change the size in the above array 1000, 750 to whatever you want to set for the displayed images.

OK, I understand that WordPress shows the most recent posts first in the search results. In my case the ‘posts’ are actually products. Is there any way to show the oldest products first?

You can achieve this by adding the following code in the functions.php file of your child theme.

function search_filter($query) {
  if ( !is_admin() && $query->is_main_query() ) {
    if ($query->is_search) {
      $query->set('order', 'ASC');
    }
  }
}
add_action('pre_get_posts','search_filter');

Best Regards,
Movin

Hi Movin,

Thank you, thank you, thank you.
The images look beautiful now!!

All the best,

Maarten

You are most welcome here :slight_smile: