Genesis Custom Search Results Page

Mar 27, 2014

—

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.

Comments

11 responses to “Genesis Custom Search Results Page”

Paul Connally

April 26, 2022

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

Log in to Reply
1. Brad Dalton
  
  April 26, 2022
  
  Hi Paul. What theme are you using?
  
  Log in to Reply
  1. Paul Connally
    
    April 26, 2022
    
    Monochrome Pro.
    
    I see the same two options if I switch the theme to Genesis Framework.
    
    Log in to Reply
    1. Brad Dalton
      
      April 26, 2022
      
      Should be entry content where entry is the same as post.
      
      Log in to Reply
tmaarschall

March 16, 2016

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

Log in to Reply
1. Brad Dalton
  
  March 16, 2016
  
  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 [code].search-results h2[/code]
  
  Log in to Reply
Charla

November 24, 2014

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.

Log in to Reply
1. Brad Dalton
  
  November 24, 2014
  
  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
  
  Log in to Reply
Yael Reinhardt-Matsliah

April 5, 2014

Thank you, Brad, this really helped. As a new “coder’ your tutorials are very helpful! Thank you.

Log in to Reply
SarahBennetMills

April 1, 2014

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

Log in to Reply
1. Brad Dalton
  
  April 1, 2014
  
  Hello Sarah
  
  Thanks for the nice words.
  
  Yes i need to write up a blueprint so thanks for reminding me.
  
  Log in to Reply