Add Custom Columns to WordPress Post Type Lists

The combination of custom post types and custom meta boxes is a powerful one for using WordPress as a content management system. But if key data about a post is stored in meta boxes it’s often helpful to see it in the list of posts.  For example, the “Countries” post type shown below benefits from some custom columns, including one that displays a little flag.

This snippet lets you modify, and add to the  columns for a given post type. The comments explain as we go. Be sure to edit the <prefix> and <post-type> to be your own.

// Add a filter to add extra columns for a specific post type's edit list
add_filter("manage_edit-<post-type>_columns", "<prefix>_<post-type>_edit_columns");

// Add an action to populate the custom columns
add_action("manage_<post-type>_posts_custom_column", "<prefix>_<post-type>_custom_columns");

// This function takes an array of columns and should return an array of columns.  It should add
// to the list of columns that's given as an input.  The array keys are column ID strings and the array
// values are column heading strings.
function <prefix>_<post-type>_edit_columns( $columns ) {
    // Add the extra custom columns
    $columns['logo'] = 'Logo (Featured Image)';
    $columns['link'] = 'Link';
    return $columns;
}

// This function is called for all columns.  It takes a string that's a column ID from the $columns
// array mentioned above.  The function should determine which column is being output and output the
// content of that column for the current post.  Note the column content should be OUTPUT, not
// returned.
function <prefix>_<post-type>_custom_columns( $column ) {
    global $post;

    // This gets all the custom meta for the post in an array.
    $meta = get_post_custom( $post->ID );

    switch( $column ) {
        case 'logo':
            if (has_post_thumbnail( $post->ID ) ) {
                // This returns an array containing url, width and height.
                $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'small' );
                // To access the URL of the thumbnail we need to use $image[0]
                printf( '<img src="%s" alt="" height="32px" />', $image[0]);
            }
        break;
        case 'link':
            if (isset($meta['link-url'])) {
                printf( '<a href="%1$s">%1$s</a>', $meta['link-url'][0]);
            }
        break;
    }
}

I’m indebted to Rev VooDoo and this WordPress support post for the idea. I hope I’ve refined it slightly and given a bit of insight into its workings.

About

Ross loves using WordPress to help good causes, nicely structured code, and, at this time of year, a glass of ginger wine in front of a log fire.

Leave a Reply

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