[Support request] Custom Search Page

Home Forums Support [Support request] Custom Search Page

Home Forums Support Custom Search Page

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1630814
    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

    #1631674
    Tom
    Lead Developer
    Lead Developer

    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.

    #1631682
    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

    #1631799
    Ying
    Staff
    Customer Support

    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 🙂

    #1631894
    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

    #1631966
    Elvin
    Staff
    Customer Support

    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?"

    #1633354
    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

    #1633690
    Elvin
    Staff
    Customer Support

    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?"

    #1634393
    Dave

    Hi Elvin,

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

    Cheers,

    Dave

    #1635338
    David
    Staff
    Customer Support

    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;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.