How to Add Post Thumbnails to the WordPress Post and Page Management Screens

If you’re producing a lot of content on your WordPress site, it can be handy to see the main image associated with each post when viewing the post or page listing screen. Adding in the post thumbnail creates a visual association for each post or page.

Here’s a quick tip I found over at the WordPress Stack Exchange.

So here’s the default posts management page, as you know it:

After you add the code included here, your page management screen will change to include a column for the post thumbnails associated with each post:

Here’s how to add in the post thumbnails. Simply copy the code below and paste it into your themes’s functions.php file:

/****** Add Thumbnails in Manage Posts/Pages List ******/
if ( !function_exists('AddThumbColumn') && function_exists('add_theme_support') ) {

    // for post and page
    add_theme_support('post-thumbnails', array( 'post', 'page' ) );

    function AddThumbColumn($cols) {

        $cols['thumbnail'] = __('Thumbnail');

        return $cols;
    }

    function AddThumbValue($column_name, $post_id) {

            $width = (int) 60;
            $height = (int) 60;

            if ( 'thumbnail' == $column_name ) {
                // thumbnail of WP 2.9
                $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
                // image from gallery
                $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
                if ($thumbnail_id)
                    $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
                elseif ($attachments) {
                    foreach ( $attachments as $attachment_id => $attachment ) {
                        $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
                    }
                }
                    if ( isset($thumb) && $thumb ) {
                        echo $thumb;
                    } else {
                        echo __('None');
                    }
            }
    }

    // for posts
    add_filter( 'manage_posts_columns', 'AddThumbColumn' );
    add_action( 'manage_posts_custom_column', 'AddThumbValue', 10, 2 );

    // for pages
    add_filter( 'manage_pages_columns', 'AddThumbColumn' );
    add_action( 'manage_pages_custom_column', 'AddThumbValue', 10, 2 );
}

If you’d like to make the thumbnails a different size, you can change the $width and $height values in the code above. You can even enlarge it to a few hundred pixels so that the post thumbnail is the strongest identifying factor of the listing.

Click save and then go visit your post or page management screens. You should see the new post thumbnails column. That’s all you need to do. Pretty simple, wasn’t it?

Comments (28)

    • Hi Sarah! Been finding a lot of good stuff following your posts. I am wondering how i can use this with Gravity Forms. I would like to have the images posted to categories, then have a thumbnail auto post to certain pages “depending on the category it was uploaded to” Is there a tutorial you know of or multiple tutorials that could get me going in the proper direction? Thanks!

Participate