Adding a featured image column for posts & pages in WordPress

06 February, 2015 by Tom Elliott

Displaying the featured or ‘thumbnail’ images in the page, post or custom post type list view in WordPress can be a useful feature for anyone managing content as they can easily see at a glance which featured images belong to which articles.

In this post, I run through examples of how we use four WordPress hooks: manage_posts_columns and manage_posts_custom_column for posts and custom post types along with manage_pages_columns and manage_pages_custom_column for pages.

Adding a featured image column for posts & custom post types.

All you need to do is drop the below code in your theme’s functions.php file and the featured image (if it has been added to the post article) should appear in the post  listing as the last column.

add_filter('manage_posts_columns', 'add_thumbnail_column', 5);

function add_thumbnail_column($columns){
  $columns['new_post_thumb'] = __('Featured Image');
  return $columns;
}

add_action('manage_posts_custom_column', 'display_thumbnail_column', 5, 2);

function display_thumbnail_column($column_name, $post_id){
  switch($column_name){
    case 'new_post_thumb':
      $post_thumbnail_id = get_post_thumbnail_id($post_id);
      if ($post_thumbnail_id) {
        $post_thumbnail_img = wp_get_attachment_image_src( $post_thumbnail_id, 'thumbnail' );
        echo '<img width="180" src="' . $post_thumbnail_img[0] . '" />';
      }
      break;
  }
}

The filter manage_posts_columns allows us to define what the column heading(s) should be. We set the title of the column as ‘Featured Image’ and set the column name as ‘new_post_thumb’. The hook manage_posts_custom_column then lets us define the content for each row. If the column name is our new ‘new_post_thumb’ field, we display the featured thumbnail.

I prefer to have all my featured images displayed at the same width (180 pixels in the example) and omitting the height parameter allows the image to keep its ratio without stretching or squashing.

Adding the featured image column for pages

The code to add the thumbnail image column for page admin view is very similar to the code we used for posts however we instead use the hooks manage_pages_columns and manage_pages_custom_column.

As before, drop the below code into your theme’s functions.php


add_filter( 'manage_pages_columns', 'custom_pages_columns' );
function custom_pages_columns( $columns ) {

  $columns['new_page_thumb'] = __('Featured Image');
  return $columns;
}

add_action( 'manage_pages_custom_column', 'custom_page_column_content', 10, 2 );

function custom_page_column_content( $column_name, $post_id ) {
  switch($column_name){
    case 'new_page_thumb':
    $post_thumbnail_id = get_post_thumbnail_id($post_id);
    if ($post_thumbnail_id) {
      $post_thumbnail_img = wp_get_attachment_image_src( $post_thumbnail_id, 'thumbnail' );
      echo '<img width="180" src="' . $post_thumbnail_img[0] . '" />';
    }
     break;
  }
}


Removing columns from pages & posts such as Type, Author & Comments »
10 advantages of developing bespoke WordPress themes »
19 ways to improve the speed of your WordPress website »
Creating a manual list of related posts in WordPress »


Leave a Reply

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

css.php