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

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?

Free Video Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch) Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.
Sarah Gooding
Sarah Gooding Sarah enjoys staying on top of the latest WordPress and BuddyPress news. Get in touch with Sarah on Twitter @pollyplummer.
Have any other handy WordPress hacks of your own? Let us know down below.