How do I add the Featured Image to the Single Posts?

As you may know, the Fea­tured Image that you set to a post is not dis­played by default when you’re view­ing the Sin­gle post. The image is only used for the blog archive. How­ev­er, if you want to have this part dis­played inside the post too, just fol­low these fol­low­ing steps.

If you don’t want to make changes inside the functions.php file, you can use the Code Snip­pets plu­g­in instead — this will do exact­ly the same thing, only that you will not need to man­u­al­ly edit any file.

Start by copy­ing the fol­low­ing code in the functions.php file or as a snip­pet using the above-men­tioned plu­g­in:

function listable_single_post_featured_image () {
	$featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'listable-featured-image' );
  	$html = "style=\"background-image: url('" . $featured_image[0] . "')\"";
	return $html;
}
add_filter( 'listable_single_post_image', 'listable_single_post_featured_image' );

Step 2 — Change Colors using CSS

If you want to change the text con­tent col­ors (eg. to white) or dark­en the back­ground image, you can copy and adjust the fol­low­ing CSS to the Appear­ance → Cus­tomize → Addi­tion­al CSS area:

/* Change Blog Post – Featured Area Content Color */
.single:not(.single-job_listing) .entry-title, .single:not(.single-job_listing) .entry-subtitle, .single:not(.single-job_listing) .entry-meta a {
   color: white;	
}
/* Change Blog Post – Featured Image Opacity */
.single:not(.single-job_listing) .entry-featured {
	opacity: 0.7;
}
/* Change Blog Post –  Featured Image Background */
.single:not(.single-job_listing) .entry-header {
	background: black;	
}
Updated on May 17, 2017

Was this article helpful?

Related Articles