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.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

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?

Have any other handy WordPress hacks of your own? Let us know down below.

Sarah Gooding Sarah is a designer and developer who specializes in WordPress. She and her husband operate Untame, where they build business websites, online stores, and social networks using open-source technologies. She is a former author for WPMU DEV on all things WordPress, Multisite, and BuddyPress.