[Support request] Can’t find search.php to design search results page

[Eli]

Hi GP,

Can you please show how to customize the search results page? I do not see search.php in the theme editor, and can’t find it in the file explorer. Do I need to create it? I would assume the theme has it by default..

I want to change things such as the h1 title text, the background color, and remove the author field from the posts and pages in the results.

Link to dev site is attached 🙂

Thank you!

[Eli]

Sorry, I should clarify.

I’m using the GP header element ‘hook’. I want to put the title of the search results page in the header element, just as it appears in the blog archive & individual posts.

The challenge in this case is, the H1 is generated using PHP since it includes “Search results for” and then the query.

[Elvin]

Hi there,

I’ve tried checking your site but was unable to as it’s in maintenance mode.

Have you tried David’s suggestion here?
https://generatepress.com/forums/topic/basics-of-customizing-search-page-results/#post-1392150

[Eli]

Sorry about that.. I turned off construction mode.. My bad.

Thank you for the link you shared to that forum. I was searching EVERYWHERE but that was the answer I needed for putting the search results in the header using php shortcode.

The remaining questions I have are:

#1: How to remove post/page author in search results

#2: How to style elements on the search results & 404 pages – specifically the background color, text alignment and search bar/button.

Thank you for your fast reply!

[Elvin]

For #1:

Try adding this PHP snippet:

add_filter( 'option_generate_blog_settings', 'lh_custom_search_results_page_settings' );
function lh_custom_search_results_page_settings( $options ) {
    if ( is_search() ) {
	$options['author'] = false;
	$options['date'] = false;
    }
    return $options;
}

For #2:

Look for the class selector of the elements you want to change. You can do this by inspecting the page’s code on your browser.

You then use custom CSS for the styling.

Example: changing border color of search form on error404 and search result page.

body.search form.search-form.navigation-search,
body.error404 form.search-form.navigation-search {
    border: 1px solid #da1313;
}

[Eli]

Hey Elvin,

Thanks for the reply. I tried adding that PHP to the functions.php folder and that CSS into the customizer but neither seemed to make any change :/.

Of course, I cleared my cache.

[David]

Hi there,

i made a slight change to #1 in Elvins code:
https://generatepress.com/forums/topic/cant-find-search-php-to-design-search-results-page/#post-1739672

Can you try adding that revised PHP snippet

[Eli]

Hey David,

I re-copied the PHP from Elvin’s comment (assuming the change was in there) and it worked! Thanks. Almost there, but I am still having trouble with the given CSS:

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

The default title still displays on the search results page, I am trying to hide it and replace with the PHP shortcode in the header as per the other thread: https://generatepress.com/forums/topic/basics-of-customizing-search-page-results/#post-1392150

It would be great to replace the default search results title with a search field, I assume I would need to use a PHP shortcode for this?

body.search form.search-form.navigation-search,
body.error404 form.search-form.navigation-search {
border: 10px solid #da1313;
}
I am having trouble targeting the search bar on the 404 page. This CSS given seems to target the search bar in the navigation menu, not on the 404/search results page.

Thanks,
Eli

[Elvin]

I re-copied the PHP from Elvin’s comment (assuming the change was in there) and it worked! Thanks. Almost there, but I am still having trouble with the given CSS:

Try this CSS:

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

But if you want to completely remove the page header on the DOM, you should create a search page template .PHP on your child theme as the current page header is hardcoded to the theme’s search.php as shown here: https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/search.php#L28-L38

This is good for accessibility test because if you remove the page header, you won’t get “duplicate h1” flags.

It would be great to replace the default search results title with a search field, I assume I would need to use a PHP shortcode for this?

Yes you’ll need one. You can either write your own or use a search bar shortcode from a plugin. 🙂

I am having trouble targeting the search bar on the 404 page. This CSS given seems to target the search bar in the navigation menu, not on the 404/search results page.

Not sure what you mean. If you’re targeting the one within the content, modify the selector a bit to this:

body.search .entry-content form.search-form,
body.error404 .entry-content form.search-form {
border: 10px solid #da1313;
}

Or if you only want to target the actual text field:

body.search .entry-content form.search-form input,
body.error404 .entry-content form.search-form input {
border: 10px solid #da1313;
}

[Author]

Posts