[Support request] Page header on search page

Home Forums Support Page header on search page

This topic contains 7 replies, has 3 voices, and was last updated by  Leo 1 week, 2 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1056758

    Emma

    Hi, I’m building a site with GeneratePress using the header element to create different headers for archives, categories, posts and pages. I am having a bit of a problem creating a header for the ‘search results’ page. It doesn’t seem to display the text within the header, it displays it below.

    With all the other pages, posts, category pages and archive pages it displays the relevant text within the header, however on the search result page, it displays the header image with no text inside. I must have done something wrong but I’m not sure exactly what… Any advice regarding this would be much appreciated.

    Thank you.

    #1056795

    David Customer Support

    Hi there,

    if you’re using the {{post_title}} template tag it won’t work on the Search Results as it is dynamically generated so not content title exists for it to display.

    You would need to create a shortcode – add this PHP snippet:

    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' );

    Then create a new header element just for search results and use the shortcode in your HTML:

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

    Then use this CSS to remove the existing title:

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

    Emma

    That’s great! Thank you. Am I able to do something similar with the 404 page? I need to include a header element as the nav is merged so I need to put some content in it.

    #1057257

    David Customer Support

    The 404 would require its own header element that you can add whatever content you wish. And you can use this CSS to hide the main content:

    .error404 #page {
        display: none;
    }

    So the Header element effectively becomes the 404.

    #1058093

    Emma

    Thanks. I am not sure how to add the content for the 404 page into the header. I can add the text but I am not sure how to add the search bar into the header. Is there a simple way to do this?

    #1058107

    Leo Customer Support

    I believe David is suggesting using the header element:
    https://docs.generatepress.com/article/header-element-overview/

    Then his CSS would hide the normal page content so that the 404 page would just be the header element.

    #1058138

    Emma

    I am using the header element. I have a header set up for the 404 page but I am not sure how to put the search bar inside the header. Can you advise how I do this?

    #1058184

    Leo Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.