- This topic has 11 replies, 2 voices, and was last updated 6 months, 3 weeks ago by
David.
-
AuthorPosts
-
August 4, 2020 at 11:42 pm #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,
StefanAugust 5, 2020 at 2:55 am #1387933David
StaffCustomer SupportHi 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/August 7, 2020 at 12:49 pm #1392040Stefan
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.
August 7, 2020 at 2:54 pm #1392150David
StaffCustomer SupportOK 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/August 8, 2020 at 2:57 am #1392613Stefan
Hi David,
I follow the instructions but I still get the same results as before. Please see the screenshot below.
https://prnt.sc/tw5r97I added the code snippets here:
https://prnt.sc/tw5rr9They are activated:
https://prnt.sc/tw5rw1I 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/tw5shfI am not sure if I’ve done everything the way instructed or there is something else that I need to do.
August 8, 2020 at 4:05 am #1392676David
StaffCustomer SupportCan you share a screenshot of your Display Rules ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 10, 2020 at 12:05 am #1394781Stefan
Yes, please find attached: https://prnt.sc/twz1km
August 10, 2020 at 3:35 am #1395056David
StaffCustomer SupportThe 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/August 10, 2020 at 5:01 am #1395197Stefan
Thanks David, I fixed that.
I think that we can look at #2 now, and later come back to fix the padding.
August 10, 2020 at 6:37 am #1395348David
StaffCustomer SupportTry 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/August 10, 2020 at 9:24 am #1395756Stefan
Works like a charm. Very good! Thank you!
August 10, 2020 at 4:04 pm #1396245David
StaffCustomer SupportGlad to be of help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.