Adding Columns to the WP Edit Pages

A couple weeks ago I released the Portfolio Theme, which uses custom post types to display images and portfolio information. Since the featured image is a key component of the post type, I wanted a way to display that from the post dashboard- along with the title, taxonomy, author, comments, and post date.

I couldn’t find any code snippets available that did exactly what I wanted, but I did get close with WP Engineer’s post about adding thumbnails to post and pages and Shiba’s post about adding custom post type columns.

You’re welcome to download the Portfolio Theme and see how all the code was included. The code below is just the specific part about adding columns to edit screen.

Note, I already have a custom post type “portfolio” built. If you wanted to use these columns with a “art” post type for instance, you would need to swap out the name.

//  Add Columns to Portfolio Edit Screen
add_filter("manage_edit-portfolio_columns", "portfolio_edit_columns");
add_action("manage_posts_custom_column",  "portfolio_columns_display", 10, 2);
add_theme_support( 'post-thumbnails', array( 'portfolio' ) );
function portfolio_edit_columns($portfolio_columns){
	$portfolio_columns = array(
		"cb" => "<input type=\"checkbox\" />",
		"title" => _x('Title', 'column name'),
		"thumbnail" => __('Thumbnail'),
		"portfolio-tags" => __('Tags'),
		"author" => __('Author'),
		"comments" => __('Comments'),
		"date" => __('Date'),
	);
	$portfolio_columns['comments'] = '<div class="vers"><img alt="Comments" src="' . esc_url( admin_url( 'images/comment-grey-bubble.png' ) ) . '" /></div>';
	return $portfolio_columns;
}
function portfolio_columns_display($portfolio_columns, $post_id){
	switch ($portfolio_columns)
	{
		// Code from: http://wpengineer.com/display-post-thumbnail-post-page-overview
		case "thumbnail":
			$width = (int) 35;
			$height = (int) 35;
				$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');
					}
			break;
		case "portfolio-tags":
			if ($tag_list = get_the_term_list( $post->ID, 'portfolio-tags', '', ', ', '' ) ) {
				echo $tag_list;
			} else {
					echo __('None');
				}
			break;
	}
}

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

5 comments on “Adding Columns to the WP Edit Pages

  1. Hi,

    I’m trying to implement the image column as you have documented here, but I’m running into a strange problem.

    The column is added just fine for my custom post type, and images show up. The problem is that all of the images in the column are the same. Not only that, they’re the same image from one of my regular posts, not the custom post type…

    So I have my regular posts and a custom post type called “event”. In the “event’ page the column shows up, but they all display an image from a “post”.

  2. This worked pretty well for me, thank you.
    I want to use custom columns, such as Price, too. Is there a simple way to extract data from my “price” custom field into said Price column?

    Thanks again for the nice tut.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>