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!
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.
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.
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’.
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.
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.
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?
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
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.
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
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?
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.
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.
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.
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:
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?
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.
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');