In this post, i’ll show you how easy it is to create your own custom search results page template for Genesis.
The results page this code creates is only displayed when using the built in native WordPress search widget or function.
Installation Steps #
There’s 3 code blocks connected together in this Gist.
- Firstly, Upload the file named search.php to the root directory of your Genesis child theme.
- Secondly, copy & paste the PHP code from functions.php to the end of your child themes functions.php file
- Last of all, copy the CSS code from the Gist labelled style.css and paste it near the end of your child themes style.css file before the start of your Media Queries.
Code
The code assumes you’re using the Genesis > Theme Settings > Content Archives > Display Entry Content settings.
Hi Brad,
I’m trying to create a customer search results page, but under Theme Settings > Content Archives, I do not see Display Post Content settings. The only options are Entry Content and Entry Excerpts.
Thanks.
Paul
Hi Paul. What theme are you using?
Monochrome Pro.
I see the same two options if I switch the theme to Genesis Framework.
Should be entry content where entry is the same as post.
Hi Brad,
First of all: thank you for creating this awesome website. Really useful!
I placed this code in my functions.php:
add_filter( ‘excerpt_length’, ‘search_page_content_limit’ );
function search_page_content_limit( $length ) {
if ( is_search() ):
return 200;
endif;
}
But I see no change in the content length. How can I make it work?
My search reslults page: http://huisdierentips.nl/?s=hond
Also I would like to remove the margin-bottom from the title. Can you tell me how to target the css for the search results page only?
I already tried a lot of variations like this one:
.search-results h2.entry-title {
margin-bottom: 0px;
}
But that doesn’t work.
Best wishes,
Tycho
1. The code only works if you have configured the Content Archive settings to display excerpts. It won’t work if you are using the content limit.
Use this code to modify the content limit.
2. Try
Brad, thank you, your instructions here were just what I needed.
(now comes the however…)
My html5 & responsive theme (News Pro) renders the mobile view with the results squeezed onto the left half of the screen which doesn’t work well.
Is there a simple fix for this? I hope, I hope.
Hello Charla
You may need to modify the CSS in the Media Queries to get it working the way you want on different sized screens
Thank you, Brad, this really helped. As a new “coder’ your tutorials are very helpful! Thank you.
Hi Brad!
I daily visit your blog.Am so addicted of it. I have no words to describe how helpful your tutorials are. Anytime I got stuck with genesis. I simply land to your blog and the solution is always here. I am looking forward for blueprint page tutorial. I hope to see that live on wpsites asap.
Regards
Hello Sarah
Thanks for the nice words.
Yes i need to write up a blueprint so thanks for reminding me.