the graphic design blog that speaks the truth

This WordPress tutorial will guide you through the process of displaying extra elements such as the featured image in the WordPress posts list.

The default display

A default list of posts in your WordPress admin panel will look something like the following:

With tags, comments, and the date published normally displayed too. But what if we wanted to display the featured image of each of these posts in our list?

The extended display

To display our featured images in this list we firstly need to create a new image size, specifically for this list. Open up your themes ‘functions.php’ file (or create it if one doesn’t exist) and add the following code:

add_image_size( 'admin-list-thumb', 100, 70, true );

You can change the widths and heights of this new image size if you wish, but 100px x 70px seems to fit nicely.

Now, lets go back to our functions.php file and add the following code:

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

function new_add_post_thumbnail_column($cols){
$cols['new_post_thumb'] = __('Featured');
return $cols;
}
add_action('manage_posts_custom_column', 'new_display_post_thumbnail_column', 5, 2);

function new_display_post_thumbnail_column($col, $id){
switch($col){
case 'new_post_thumb':
if( function_exists('the_post_thumbnail') ) {
echo the_post_thumbnail( 'admin-list-thumb' );

}
else
echo 'Not supported in theme';
break;
}
}

Your posts list should now look something like this:

We now have our featured images displayed in our posts list!

Digging a little deeper

It is becoming more and popular for WordPress developers to include custom fields within posts such as a ‘associated link’ field for example. What if we wanted to display this information in our posts list, alongside our new featured image column? The process is very much the same with a few simple changes.

All we have to do is add a new function to our code:

add_filter('manage_posts_columns', 'new_add_post_thumbnail_column', 5);
add_filter('manage_posts_columns', 'new_add_custom_column', 6);

// Add the column
function new_add_post_thumbnail_column($cols){
$cols['new_post_thumb'] = __('Featured');
return $cols;
}

function new_add_custom_column($cols){
$cols['new_custom'] = __('Associated Link');
return $cols;
}

// Hook into the posts an pages column managing. Sharing function callback again.
add_action('manage_posts_custom_column', 'new_display_post_thumbnail_column', 5, 2);
add_action('manage_posts_custom_column', 'new_display_custom_column', 6, 3);

// Grab featured-thumbnail size post thumbnail and display it.
function new_display_post_thumbnail_column($col, $id){
switch($col){
case 'new_post_thumb':
if( function_exists('the_post_thumbnail') ) {
echo the_post_thumbnail( 'admin-list-thumb' );
}
else
echo 'Not supported in theme';
break;
}
}

function new_display_custom_column($col, $id){
switch($col){
case 'new_custom':

echo the_field('associated_link');

}
}

Here you will see that we have added a new action, and function, named ‘ new_custom_column’ and told it to create a new column named ‘ Associated Link’ in the column next to our featured image column we created earlier. Once done, our admin posts page will look something like this:

You could convert this list into actual links if you wanted to by changing this part of the code:

function new_display_custom_column($col, $id){
switch($col){
case 'new_custom':

echo the_field('associated_link');

}
}

to this:

function new_display_custom_column($col, $id){
switch($col){
case 'new_custom':

echo '<a href="';
echo the_field('associated_link');
echo '">';
echo the_field('associated_link');
echo '</a>';

}
}

To summarize, using the above code you can pretty much display anything you want to in your posts lists. I hope this helps someone out.