How to Add Admin Columns in WordPress

[If you want to add custom post type columns, here is a tutorial that deals specifically with custom post types.]

Many of the key administration areas within WordPress displays a table containing a list of objects and some of their attributes.

For example, the Posts screen displays a table with a list of posts and some of their attributes including author, categories, tags, number of comments, and date.

The Media, Links, Pages, Comments, Plugins, and Users menus also contain tables and a listing of objects and their attributes.

Sometimes, you may want to add a new attribute for display, or remove an attribute from these tables.

You can do so by using the appropriate filter and action hooks for each of these tables. In particular, there is a filter hook that controls the columns or attributes you want to display, and an action hook where you control the actual data shown in your new custom columns.

  • To delete a column, you simply need to unset it in the filter hook function.
  • To add a column that is already handled by the WordPress system, but not displayed by default, you only need to set it in the filter hook function.
  • To add a new custom column, you will need to set it in the filter hook function, as well as manage how to process and display the column data in the action hook.

Below, we describe how to add a new custom attribute to the Media Library menu. This menu currently shows a list of attachments and their attributes. We want to add a new column to this table showing the Tags attribute for each of the attachment objects.

The admin column filter hook for the Media Llibrary menu is manage_media_columns and its corresponding action hook is manage_media_custom_column. Add the hooks to your theme or plugin initialization function.

<?php
	add_filter('manage_media_columns', 'add_tag_column');
	add_action('manage_media_custom_column', 'manage_attachment_tag_column', 10, 2);
?>

There are similar hooks for each of the other menus, for example manage_posts_columns and manage_posts_custom_column for the posts menu.

Once we have added the hooks, we define the add_tag_column filter function. This function will allow us to add new columns or delete existing columns.

function add_tag_column($posts_columns) {
        // Delete an existing column
	unset($posts_columns['comments']);

       // Add a new column
	$posts_columns['att_tag'] = _x('Tags', 'column name');

	return $posts_columns;
}

Line 3 – Delete the number of comments column.
Line 6 – Add a new custom column called att_tag.

Next, we need to define how data is displayed for this column. We do this in the manage_attachment_tag_column function below which is tied to the manage_posts_custom_column action hook.

function manage_attachment_tag_column($column_name, $id) {
	switch($column_name) {
	case 'att_tag':
		$tagparent = "upload.php?";
		$tags = get_the_tags();
		if ( !empty( $tags ) ) {
			$out = array();
			foreach ( $tags as $c )
				$out[] = "<a href='".$tagparent."tag=$c->slug'> " . esc_html(sanitize_term_field('name', $c->name, $c->term_id, 'post_tag', 'display')) . "</a>";
			echo join( ', ', $out );
		} else {
			_e('No Tags');
		}
		break;
	default:
		break;
	}
	
}

You can manage more custom columns by creating more entries in your switch statement.

By using these column filter and action hooks, you can customize what is shown in the current WordPress administration menus to anything you want.

Finally, if you want to change the a column width, specify it in it’s CSS style as follows –

	<style>
		.column-att_tag { width: 150px; }
	</style>

The CSS class name for the column is always ‘.column-‘ + the column name (or key). In the example above, our column name is att_tag therefore our CSS style class is .column-att_tag.

Related Articles

Comments

  1. Zak S says

    For some reason I have been having trouble styling the width, even if I use !important. It should be pretty simple, just a bit of css, but no matter where I put it the width won’t change. Any suggestions?

    • says

      It may be getting overwritten later on. I could check the HTML source to see if there is an inline style. Perhaps also try setting the priority of your admin_head so that it happens later.

Trackbacks

Leave a Reply

Your email address will not be published.

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>