How to add thumbnail previews in Post/Page edit list

If you have your everyday WordPress theme with standard features, you have probably got accustomed to a certain look of the WordPress admin panel. When we’re talking about editing options for posts and pages, you probably have a standard view where title, author, categories, tags and dates are being shown in different columns.

As you can see, there is no information about featured images. So, if you want to see if a post has a featured image already set and possibly see what the picture looks like, you have to edit each and every post separately.

How to add thumbnail previews in Post/Page edit list

Imagine going through dozens of posts just to take a quick view of the featured image so you don’t duplicate one or leave a post without one. That’s only a waste of time and that’s why we are going to show you a quick fix for this.

In this articles, we are going to show you a simple code you can add to your theme which will then add a thumbnail directly in the post/page column. In order for this “trick” to work, be sure your theme does support post thumbnails.

Enough with the talk; let’s insert the code into theme and show a thumbnail in your posts editor:

  1. Open your function.php file
  2. Copy and paste the following code:
  3. add_filter('manage_posts_columns', 'posts_columns', 5);
    add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);
    
    add_filter('manage_post-type_posts_columns', 'posts_columns', 5);
    add_action('manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2);
    function posts_columns($defaults){
        $defaults['riv_post_thumbs'] = __('Thumbs');
        return $defaults;
    }
    function posts_custom_columns($column_name, $id){
        if($column_name === 'riv_post_thumbs'){
    		if( has_post_thumbnail() ) {
    	    	echo the_post_thumbnail('medium');
    	 	} else {
    	    	_e('No Thumbnail For Post');
            }
            
    	echo "
    	
    	";
        }
    }
  4. Save changes
  5. Go to Posts-> All Posts and see the change

In the code above, we have set the thumbnail size to 100×100 pixels. Since this is only used as a featured image preview, there is really no need for a larger picture. Of course, you are free to change the size of the thumbnail to any size you want. In the following lines, you can see few examples on how to edit the last line of the code:

Show full featured image instead of a thumbnail:

echo the_post_thumbnail( 'featured-thumbnail' );

Double the thumbnail size:

echo the_post_thumbnail( array(200,200) );

Our title says you can show thumbnails in posts and pages edit screens. You have tried the code but you can’t see thumbs in pages? Don’t worry, you will need these two lines of code and you should add them on the beginning of the snippet shown above:

add_filter('manage_pages_columns', 'posts_columns', 5);
add_action('manage_pages_custom_column', 'posts_custom_columns', 5, 2);

After you add this piece of code, your thumbnails will be visible on pages editor as well. If you don’t like having posts without featured images, see how to force authors into selecting images before publishing a post.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *