Display featured images in WordPress admin

Instead of installing another plugin for a small quality of life feature use a simple snippet to display post featured image thumbnails in WordPress admin dashboard.

This minimal snippet can be added to your child theme’s functions.php to display post featured images in wp-admin on the edit.php page for posts or custom post types added by Advanced Custom Fields, other plugins or manually.

Display featured image for any post typePHP
/**
 * Display featured images in post list.
 */
add_action('admin_head', function() {
	echo '<style>' .
		':root { --ska-post-list-featured-image-width: 40px; } ' .
		'th#ska-post-list-featured-image { width: var(--ska-post-list-featured-image-width); } ' .
		'.ska-post-list-thumb { width: var(--ska-post-list-featured-image-width); aspect-ratio: 1; background-color: #f1f1f1; line-height: 0; } ' .
		'.ska-post-list-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }' .
	'</style>';
});
add_filter('manage_posts_columns', function($columns) {
	if(
		!isset($columns['cb'])
		|| isset($columns['ska-post-list-featured-image'])
		|| !in_array(get_post_type(), [
			'post',
			'custom_post_type',
		])
	) {
		return $columns;
	}
	return array_merge([
		'cb' => $columns['cb'],
		'ska-post-list-featured-image' => '',
	], array_slice($columns, 1));
});
add_filter('manage_posts_custom_column', function($column_name, $post_id) {
	if($column_name === 'ska-post-list-featured-image') {
		printf('<div class="ska-post-list-thumb">%s</div>', get_the_post_thumbnail($post_id, 'thumbnail'));
	}
	return $column_name;
}, 10, 2);

In the manage_posts_columns filter you can add additional post types to the array.
The post type slug can be found when on the post list page in wp-admin, such as on /wp-admin/edit.php?post_type=ska_testimonial page the slug would be ska_testimonial. Adding the slug to the array should enable showing thumbnails provided that the post type supports featured images.

The --ska-post-list-featured-image-width CSS variable can also be modified to change the thumbnail size.

If you’re not using a child theme the snippet can also be added as a mu-plugin by creating a file such as /wp-content/mu-plugins/snippets.php and placing the snippet there.

Leave a Reply

Your email address will not be published. Required fields are marked *