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

As you may know, the Featured Image that you set to a post is not displayed by default when you’re viewing the Single post. The image is only used for the blog archive. However, if you want to have this part displayed inside the post too, just follow these following steps.

If you don’t want to make changes inside the functions.php file, you can use the Code Snippets plugin instead — this will do exactly the same thing, only that you will not need to manually edit any file.

Step 1 – Set the Featured Image as Background

Start by copying the following code in the functions.php file (you can access it by going to Appearance → Theme Editor and clicking the Theme Functions option from the right panel) or as a snippet using the above-mentioned plugin:

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 content colors (eg. to white) or darken the background image, you can copy and adjust the following CSS to the Appearance → Customize → Additional 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;	
}