Display the WordPress Post/Page Featured Image in the Admin Table

In this post we’re going to have a look at how to display post and page featured images in the WordPress post admin table. As standard, WordPress doesn’t show the featured image in the backend, but with a little bit of code, we can fix that. Just add the following snippet to the functions.php file of your child theme:

add_filter( 'manage_posts_columns', 'snippetpress_add_post_thumbnail_column', 1 );
add_filter( 'manage_pages_columns', 'snippetpress_add_post_thumbnail_column', 1 );

function snippetpress_add_post_thumbnail_column( $columns ) {
	$thumb = array( 'snippetpress_thumb' => 'Featured Image' );
	$check = array( 'cb' => $columns['cb'] );
	unset( $columns['cb'] );	
	$columns = $check + $thumb + $columns;
	return $columns;
}


add_action( 'manage_posts_custom_column', 'snippetpress_show_post_thumbnail_column' );
add_action( 'manage_pages_custom_column', 'snippetpress_show_post_thumbnail_column' );

function snippetpress_show_post_thumbnail_column( $columns ){
	switch($columns){
		case 'snippetpress_thumb':
		if( function_exists('the_post_thumbnail') ){
			echo the_post_thumbnail( 'thumbnail' );
		}
		break;
	}
}

With the above code, we can now see the featured image on the admin table for posts and pages.

That’s great, but they’re a bit big. Well, we can fix that too by applying some custom css to our featured images. Just add the following code underneath what we’ve just done:

add_action('admin_head', 'snippetpress_admin_featured_image_css');
function snippetpress_admin_featured_image_css() {
    echo    '<style>
                td.snippetpress_thumb .attachment-thumbnail {
					max-width: 60px;
					max-height: 60px;
				}
				
				th#snippetpress_thumb, td.snippetpress_thumb {
					width: 70px;
					
				}
            </style>';
}

Now our images are more in proportion with the rest of the admin table!

For more information about applying custom CSS to the WordPress admin area, check out our post here.

Where to add the snippet?

The snippet should be placed at the bottom of the functions.php file of your child theme. Make sure you know what you’re doing when editing this file. Alternatively, you can use a plugin such as Code Snippets to add the custom code to your WordPress site. If you need further guidance on how to add the code, check out our post on How to Add WordPress Snippets.