[Support request] Custom Search Page

[Dave]

I would like my search page to work like the one here:https://heretotravel.com/
And the results page to function like this: https://heretotravel.com/?s=paris
Any ideas would be appreciated.
Cheers,

Dave

[Tom]

Hi there,

Those search results seem to be a pretty simple layout using columns and featured images.

If you set featured images for your posts and then turn on the number of columns you want in “Customize > Layout > Blog”, you should get a very similar layout.

Let us know if there’s something else about the layout you’re having trouble reproducing.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dave]

Hi Tom,

Thanks for the response. It is not really the layout that is the issue per se. It is actually the way the search works. If you punch in a search on the first page (home page) the results page keeps the search bar at the top in a different header and pulls results from a certain category.
That is what I am actually looking for.
For the layout under the header, I just want that layout on the search results page and nowhere else.

cheers,

Dave

[Ying]

Hi Dave,

We can achieve this by using block element, header element and Generateblocks.

1. Go to appearance > element, create a new block element, add a Container block from Generateblocks, then add a search block in the GB container, add a background image to the container, add around 150px padding to top and bottom.
https://www.screencast.com/t/i7sB5lgKnxqd

2. Choose Hook as block type, choosegenerate_after_header as hook, set its location to Front page and Search results.

3. Go to appearance > element, create a header element, set Merge with Content to Merge, set Front page and Search results as location in display rules.

Let me know how it works 🙂

[Dave]

That did work. Is there any way to make the search page only display in 1 column instead of 2 without changing the archive pages on the tablet?

Cheers,

Dave

[Elvin]

Hi there,

That did work. Is there any way to make the search page only display in 1 column instead of 2 without changing the archive pages on the tablet?

You can try the PHP snippet provided here:
https://docs.generatepress.com/article/using-columns-in-the-blog/#changing-the-number-of-columns

A wise man once said:
"Have you cleared your cache?"

[Dave]

Thanks Elvin. That would work if I wanted to change it on all devices, but I just want the posts to stack on tablet like they do on mobile.

Cheers,

dave

[Elvin]

Thanks Elvin. That would work if I wanted to change it on all devices, but I just want the posts to stack on tablet like they do on mobile.

tablet-grid-50 class is hardcoded when we apply and enable the columns but we can try to bypass its CSS by adding this:

@media (max-width: 1024px) and (min-width: 768px){
.generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
    width: 100% !important;
}
}

A wise man once said:
"Have you cleared your cache?"

[Dave]

Hi Elvin,

Unfortunately, that didn’t work. It just overlapped all the columns on tablet.
Any other ideas?

Cheers,

Dave

[David]

Hi there,

sorry for the delay – your last reply slipped past our system.
Try adding this PHP snippet to disable masonry and columns on the Search page:

add_filter( 'option_generate_blog_settings', 'lh_custom_search_results_page_settings' );
function lh_custom_search_results_page_settings( $options ) {
    if ( is_search() ) {
	    $options['column_layout'] = false;
	    $options['masonry'] = false;
    }
  
    return $options;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts