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.

Start by copying the following code in the functions.php file 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;	
}
Updated on May 17, 2017

Was this article helpful?

Related Articles