WordPress admin: how to show featured images

Screenshot of WordPress admin screen with posts listed with their featured images

Most posts on this site have a “featured image“. When I’m working on site admin it’s useful to know which post has what image, particularly if I’m lining up a collection of photos. Out of the box, WordPress doesn’t add thumbnails to the admin pages. Fortunately, with a bit of simple coding it can be added.

What follows is the code I use on this site to make my life a little easier. There are two parts to this code. The first adds the thumbnail to the post row. The second styles it.

Add the thumbnails

A four line function does the lifting. It gets passed a couple of parameters, one of which is whether the thumbnail should be shown (this lets you toggle it on and off in the settings, just like categories or tags). Then it checks if it’s possible to show the image, and if so adds it to the page. If it can’t be shown for any reason it gets ignored.

This doesn’t happen by magic. “Add_action” is used to trigger it whenever posts or pages are being listed. There are two triggers applied, one when posts are viewed, the other for pages.

add_action('manage_posts_custom_column', 'kobe6_show_post_thumbnail_column', 5, 2);
add_action('manage_pages_custom_column', 'kobe6_show_post_thumbnail_column', 5, 2);

function kobe6_show_post_thumbnail_column($kobe6_columns, $kobe6_id) {

    // I get the featured image thumbnail for this post and display it
    if ( $kobe6_columns === 'kobe6-thumb' ) : 
        if( function_exists('the_post_thumbnail') ) :
            echo the_post_thumbnail( 'thumbnail' );
        endif;
    endif;
}

Style the images

Left to its own devices, the code spits out an image that isn’t styled and can muck up the page layout.

A second function adds some inline styling to the admin pages to shrink and constrain the image. This is triggered using the “admin_head” hook so it doesn’t appear on public pages.

if ( is_admin() ) :
    if ( add_action( 'admin_head', 'kobe6_show_post_thumbnail_css', 10) ) :
        // Do nothing
    endif;
endif;

function kobe6_show_post_thumbnail_css() {
    
    // I add CSS to an admin page to show the feature images correctly

    if ( is_admin() ) : ?>
    
    <style type='text/css'>
        .column-kobe6-thumb img.wp-post-image { width: 100%; height: auto; max-width: 120px; max-height: 120px; display: block; object-fit: contain; }
    </style>

    <?php

    endif;
}

Site plugin or functions.php?

It’s an eternal debate about whether to put code in a site specific plugin or your functions.php file.

As this code changes the way your site behaves, and isn’t dependent upon a theme, I’d suggest putting it in your site plugin. If you put it in the functions.php file, you risk losing it next time someone updates your theme, or if you change it.

Filed under:
Work: writing, research and design
#wordpress

My name is Ross Hori

I'm a freelance writer, designer and photographer. By day I create articles, features and reports. At night I take photos and write fiction. Find out more.

Follow Me: