[Support request] Basics of customizing search page results

Home Forums Support Basics of customizing search page results

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1387767
    Stefan

    Dear GeneratePress team,

    I am fairly new to tweaking WordPress sites and I would appreciate your help in setting up my search results page. I could not find where to edit the look. The effect I would like to achieve is like what’s visible in the screenshot, please see the link attached: https://prnt.sc/tu9umc.

    1) Search word/phrase: I would like the search word or phrase to be displayed in the top portion.

    2) Search results: I would like them to be displayed in the bottom, if possible to include: a) the title of the blog post or page; b) a few lines of excerpt text.

    I would also like to be able to customize color of the background header and the font color and size.

    I look forward to your support.

    Regards,
    Stefan

    #1387933
    David
    Staff
    Customer Support

    Hi there,

    lets tackle #1
    You can use a Header Element to create that effect:

    https://docs.generatepress.com/article/header-element-overview/

    However Search Results are a special kind of page so to display the Title in the header element you will need to follow this topic:

    https://generatepress.com/forums/topic/page-header-on-search-page/#post-1056795

    Once thats done we can look at #2

    #1392040
    Stefan

    Hi David,

    Thanks for the quick response.
    I created a header element called “Header_Search” but it does not show when I click on the search results. I don’t know how to make the elements be linked with any actual pages.

    I used the “Display Rules” settings and set the header to be changed for the “Search” Page I created, but it does not work.

    I don’t know how to make the “Search” page be the default search results page.

    I did the first step of your notes, but I don’t know how to proceed next.

    #1392150
    David
    Staff
    Customer Support

    OK so you need to add this PHP Snippet to your site:

    function db_display_search_query() {
        ob_start();
        printf( __( 'Search Results for: %s', 'generatepress' ), get_search_query() );
        return ob_get_clean();
    }
    add_shortcode( 'search-title', 'db_display_search_query' );

    This explains how to add your the code:
    https://docs.generatepress.com/article/adding-php/

    Then you can edit your Header Element and add this Shortcode to display the Search results title:

    <h1>[search-title]</h1>

    Then on Display Rules select Search Results

    #1392613
    Stefan

    Hi David,

    I follow the instructions but I still get the same results as before. Please see the screenshot below.
    https://prnt.sc/tw5r97

    I added the code snippets here:
    https://prnt.sc/tw5rr9

    They are activated:
    https://prnt.sc/tw5rw1

    I created a page called “Search Results.”
    I also created a Header element called Search Results.

    I added the shortcode to the header element but I am not sure I placed in the right place.
    https://prnt.sc/tw5shf

    I am not sure if I’ve done everything the way instructed or there is something else that I need to do.

    #1392676
    David
    Staff
    Customer Support

    Can you share a screenshot of your Display Rules ?

    #1394781
    Stefan

    Yes, please find attached: https://prnt.sc/twz1km

    #1395056
    David
    Staff
    Customer Support

    The Location is wrong. Do not Select: Page. There is a specific entry called search results

    #1395197
    Stefan

    Thanks David, I fixed that.

    I think that we can look at #2 now, and later come back to fix the padding.

    #1395348
    David
    Staff
    Customer Support

    Try this CSS to remove the content title:

    .search-results .page-header {
        display: none;
    }

    And if you want to change the padding just for the search results then add this:

    .search-results .inside-article {
        padding: 40px;
    }
    #1395756
    Stefan

    Works like a charm. Very good! Thank you!

    #1396245
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.