Shiba

Adventures in WordPress

  • Home
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / WordPress Programming / How to Add Admin Columns in WordPress

How to Add Admin Columns in WordPress

by ShibaShake 7 Comments

[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.

Table of posts in the WordPress administration area.
Table of posts in the WordPress administration area.

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.

Leave a Reply Cancel reply

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

Comments

  1. Andy Globe says

    December 15, 2021 at 5:09 am

    Hi Friends,
    I am facing two problem in WordPress admin

    1. Load custom CSS for wp-admin on user-role base (editor)
    2. Remove some columns as per user-role in Woo-Commerce on products page

    please reply if you can understood my problem

    Reply
  2. Zak S says

    October 24, 2011 at 5:35 pm

    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?

    Reply
    • ShibaShake says

      October 27, 2011 at 11:17 am

      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.

      Reply
  3. Arvind Bhardwaj says

    September 22, 2011 at 11:59 pm

    Very helpful,
    Thanks

    Reply
  4. Lea Hayes says

    January 23, 2011 at 4:52 pm

    Thanks, just what I needed!

    Reply
  5. abcmoteur says

    August 4, 2010 at 1:33 pm

    Many thanks for this tip!!!

    Reply

Recent Posts

  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text
  • Screenshot of the Success, WordPress has been installed page.Migrating Your WordPress Website to Amazon EC2 (AWS)
  • Screenshot of WinSCP for creating a SFTP configuration.How to Set-Up SFTP on Amazon EC2 (AWS)
  • WordPress Gutenberg code view screenshot of this article.How to Prevent Gutenberg Autop from Messing Up Your Code, Shortcodes, and Scripts
  • Screenshot of the Success, WordPress has been installed page.How to Create a WordPress Website on Amazon EC2 (AWS)

Recent Comments

  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text (1)
    • tom
      - hi,my experience was like the same, but for me as theme developer the "lazy blocks"(https://wordpress.org/plugins/lazy-blocks/) ...
  • WordPress Custom Taxonomy Input Panels (106)
    • Phil T
      - This is unnecessarily confusing. Why declare a variable with the same name as your taxonomy? Why did you choose a taxonomy ...
  • Create Pop-up Windows in Your WordPress Blog with Thickbox (57)
    • Jim Camomile
      - I have used this tutorial several times and it is one of the few simple and effective ways to add popups with dynamic content, ...
  • How to Add Admin Columns in WordPress (7)
    • Andy Globe
      - Hi Friends, I am facing two problem in WordPress admin1. Load custom CSS for wp-admin on user-role base (editor) 2. ...
  • Example blog front-page using excerpts and the Shiba Theme.Optimize Your WordPress Plugins with Tags (5)
    • DF
      - thanks, i went the other way and added a filter if pages I wanted.

Copyright © 2023 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·