[Resolved] Show categories inside featured images

Hi there,

Can you share the code you’re using for the GP posts? It should be very similar, we just need to add the items to the wpsp_inside_image_container hook.

Hi Liran,

I’ve rewritten the code to work for WPSP. You can try this PHP code out.

add_action( 'wpsp_inside_image_container', function( $settings ) {
    if ( 77 === $settings['list_id'] ) {
        $wpsp_cat_list = get_the_category_list(); 
		$wpsp_category = get_the_category();
		if ($wpsp_category) {
			foreach($wpsp_category as $wpsp_cat) {
			$wpsp_cat_slug = $wpsp_cat->slug; 
			}		
		}
		if($wpsp_cat_list){echo '<span class="cat_links"><span class="'.$wpsp_cat_slug.'">'.$wpsp_cat_list.'</span></span>';} 
	}
});

And style it with this CSS code.

.wp-show-posts-image{
   position: relative;
}
.wp-show-posts-image > a > img.wp-post-image {
   width: 100%;
}
.wp-show-posts-image > span.cat_links { 
   position: absolute; 
   margin:0; 
   top:auto; 
   bottom: 7.5%; 
   left: 5%;
}
.wp-show-posts-image > span.cat_links > span > ul{
   list-style:none;
   margin:0;
   padding:5px;
}

We basically just replaced the generate_inside_featured_image_output hook from GP default with wpsp_inside_image_container for WPSP.

And since WPSP has a slightly different CSS selector, we simply adjust the CSS selectors. We just changed .post-image(GP) to .wp-show-posts-image(WPSP).

Everything else is pretty much the same.

Important note: if ( 77 === $settings['list_id'] ) on this line, make sure you change ’77’ to your WPSP list ID.

Nice one,

Works like a charm! Do I need to create a new snippet for each list?

You definitely can do that if you have multiple WPSP lists and only want to apply it on some.

But if you want this applied on all of your WPSP list, you can simply remove the if condition and just do this instead.

add_action( 'wpsp_inside_image_container', function( $settings ) {
        $wpsp_cat_list = get_the_category_list(); 
		$wpsp_category = get_the_category();
		if ($wpsp_category) {
			foreach($wpsp_category as $wpsp_cat) {
			$wpsp_cat_slug = $wpsp_cat->slug; 
			}		
		}
		if($wpsp_cat_list){echo '<span class="cat_links"><span class="'.$wpsp_cat_slug.'">'.$wpsp_cat_list.'</span></span>';} 
});

No problem. We’re always glad to be of any help.:)

Hi Jose,

You can add the categories below the title through the Meta tab. Make sure to check “Include terms” and set its dropdown value to “Below title” as shown here:
https://share.getcloudapp.com/7Kup2lnz

Ah yes, that’s because the snippet I’ve written was specifically for category overlaying on the featured image.

You should use the wpsp_after_title hook to add your code in.

add_action('wpsp_after_title',function(){
//do your code here.
});