Basics of customizing search page results

[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

[David]

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

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

[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.

[David]

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

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

[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.

[David]

Can you share a screenshot of your Display Rules ?

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

[Stefan]

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

[David]

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

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

[Stefan]

Thanks David, I fixed that.

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

[David]

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;
}

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

[Stefan]

Works like a charm. Very good! Thank you!

[David]

Glad to be of help.

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

[Author]

Posts