[Resolved] Customizing Search Results and Category Layouts

Hi there,

I dug around the support resources and I’ve used your “Option_generate_blog_settings” to tweak the way search results are returned (single column instead of the two-column format elsewhere on my site. However, I would like to have a smaller feature image (300×300, or smaller) aligned left of the title and excerpt for the posts in search results. I see some resources about aligning feature images to the left, but I’m unclear if I need to do a separate filter for this or can it be incorporated into what I am now using – basically, the example you provide at the bottom of your page here: https://docs.generatepress.com/article/option_generate_blog_settings/

Yes you can definitely modify the current filter snippet you’re using. 🙂

Can you share with us the current snippet you’re using? So we can modify it to add the other parameters you require.

There are 2 parts to this.

For adjusting the image size, you’ll need to use a different filter.

Try this PHP snippet:

add_filter( 'generate_blog_image_attributes', function( $atts ) {
    // Set up our conditional
    if ( is_search( ) ) {
        $atts[ 'width' ] = 300;
        $atts[ 'height' ] = 300;
        $atts[ 'crop' ] = true;
    }

    // Return our options
    return $atts;
} );

As for the option_generate_blog_settings, try this:

add_filter( 'option_generate_blog_settings', 'lh_custom_search_results_page_settings' );
function lh_custom_search_results_page_settings( $options ) {
    if ( is_search() ) {
	$options['read_more_button'] = true;
	$options['date'] = true;
	$options['categories'] = false;
	$options['tags'] = false;
	$options['comments'] = false;
        $options['infinite_scroll'] = true;
	$options['infinite_scroll_button'] = true;
	$options['masonry_load_more'] = 'More search results';
	$options['post_image'] = true;
	$options['post_image_position'] = 'post-image-above-header';
	$options['post_image_alignment'] = 'post-image-aligned-left';
	$options['column_layout'] = false;
	$options['featured_column'] = true;
	$options['masonry'] = false;
    }
  
    return $options;
}

Your snippet was halfway correct for the other things. You were already using $options['date'] = true;. I just changed post-image-aligned-center to $options['post_image_alignment'] = 'post-image-aligned-left';.

Thanks and I think I got what I needed. I had to dig through the Support Forums and find some CSS to reduce the font size and line-height. Unfortunately, that reduces it for everything on the page, including the sidebar, but that’s not a major issue.

If you can specify what fonts are you trying to adjust and on what page/s, I can help you out with the CSS writeup.

One final question: is there an easy way to use the same filters and settings for category pages? If you like, I can create a new topic for that.

You can add more conditions.

Example: removing date on category pages but keeping it on search results.

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

    if ( is_category() ) {
	$options['date'] = false;
    }
    return $options;
}

Here is the CSS I used to adjust the Search Results page – probably not nearly as elegant as what you might recommend – so any help is appreciated. It’s working okay but it also impacts the font in the sidebar:

This CSS affects every text within the page.

.search-results {
line-height: 1.4em;
font-size: 15px;
}

You can be more specific to avoid applying CSS on all.

Say for example you want to change the font size of <p> tags within the main content area, you can do something like this:

body.search-results .entry-content p {
line-height: 1.4em;
font-size: 15px;
}

Or say, you want to apply this on the right sidebar.

body.search-results #right-sidebar p {
line-height: 1.4em;
font-size: 15px;
}

.entry-content and #right-sidebar are class selectors that specify which part/element of the page are you targeting.

As for the Category pages, I was thinking not in terms of categories inside the search results page, but in the layout of the category pages themselves, such in the following example:https://www.digitalbodies.net/augmented-reality/ That’s where I was thinking of doing the same as I now have for Search Results as I like the single-column, feature image on the left-side for this.

If you want the category archive pages to have the same as search’s.

You can do something like this:

add_filter( 'option_generate_blog_settings', 'lh_custom_search_results_page_settings' );
function lh_custom_search_results_page_settings( $options ) {
    if ( is_search() || is_category() ) {
	//do your settings here. 
    }
    return $options;
}

That error means the function name has been used before on some other snippet.

Perhaps you’ve added a new snippet instead of editing the existing one? If that’s the case, remove the newly added filter snippet and edit the older one that uses the same function name and filter.

How would I adjust the image size for category results? We used the following but I assume it needs to be modified to also cover categories:

for “category results” did you mean the category archive page?

You can do something like this.

add_filter( 'generate_blog_image_attributes', function( $atts ) {
    // Set up our conditional
    if ( is_search() || is_category() ) {
        $atts[ 'width' ] = 300;
        $atts[ 'height' ] = 300;
        $atts[ 'crop' ] = true;
    }

    // Return our options
    return $atts;
} );

Or you modify this code to do a separate if(){} condition for category.

Second and last question, don’t I also need to modify the CSS as we did for Search Results? We have the following – do I add to it or do a separate CSS entry?

Is it for category archive pages? or for all of the archive pages?

If it’s only for the category archive. we can just add that in.

body.category.archive .entry-content p,
body.search-results .entry-content p {
line-height: 1.4em;
font-size: 15px;
}