Search Page Styling

Hi Dave,

I see you're using WPSP for the posts.

Can you provide us the code you're using for WPSP to convert it for the theme's search page? Thank you. :)

Sure. Here is the code I am using with WPSP:

add_action('wpsp_inside_image_container',function(){
	echo '<div class="wpsp-terms-wrapper">'.get_the_term_list( get_the_ID(), 'category', '', apply_filters( 'wpsp_term_separator', ', ' ) ).'</div>';
});

Do you need the CSS as well?

CSS:

.wpsp-terms-wrapper {
    position: absolute;
    bottom: 0;
    left: 5%;
    transform: translateY(50%);
    z-index: 9999;
    background-color: #1e72bd;
	  padding: 3px;
	  font-size: 16px;  
	  border-radius: 5px;
}
.wpsp-terms-wrapper a {
  color: #ffffff;
}
.wp-show-posts-image.wpsp-image-center {
    overflow: visible;
    position: relative;
}

Hi there,

The easiest way to do this is using GP Premium 2.0, which is in alpha testing: https://generatepress.com/introducing-the-gp-theme-builder/

That way you can build it all visually without any code.

Let us know if you'd prefer the code and we can point you in the right direction.

Thanks!

Thanks Tom. That release looks great. Unfortunately, I am looking at taking this site live in the next 2 weeks so I think I will have to do it with code for now.
If you could point me in the right direction for that it would be great.

Cheers,

Dave

No problem. So the eqivalent in GP would look something like this:

add_filter( 'generate_inside_featured_image_output', function( $output ) {
    return $output . '<div class="wpsp-terms-wrapper">'.get_the_term_list( get_the_ID(), 'category', '', apply_filters( 'wpsp_term_separator', ', ' ) ).'</div>';
} );

That code may (or may not) work with your existing WPSP CSS. Worth a shot :)

Thanks Tom. It worked a little bit :)
All of the categories are just at the top of the page all squished together.
Any suggestions?

cheers,

Dave

Try adding this:

.featured-image, .post-image {
    position: relative;
}

If that doesn't work, can you link me to the page so I can take a look?

Thanks Tom. That worked.

Cheers,

Dave

No problem! :)