Modify Custom Taxonomy Columns

WordPress custom taxonomies are useful for grouping wordpress posts and custom post types. For example, tags and categories are standard taxonomies provided by WordPress to group WordPress objects.

By creating our own custom taxonomies, we can creating our own groupings of posts and custom post types.

WordPress also provides a standard user interface for managing our custom taxonomy objects. For example, in the screen-shot below we show the user interface for our shiba_theme custom taxonomy object.

To the right, it displays the our list of shiba_theme objects, together with their names, descriptions, slug, and associated posts. In this case however, we use the custom taxonomy description field to store an array of data associated with our theme object.

As such, it is long and not user readable.

Therefore, we want to remove the description field and replace it with the header image associated with each theme object.

Here, we consider how to modify custom taxonomy user interface columns.

1. Create shiba_theme Custom Taxonomy

We start by creating our shiba_theme custom taxonomy object using the register_taxonomy function.

if (!is_taxonomy('shiba_theme')) {
	register_taxonomy( 'shiba_theme', 'post', 
			   array( 	'hierarchical' => FALSE, 'label' => __('Theme'),  
					'public' => TRUE, 'show_ui' => TRUE,
					'query_var' => 'theme',
					'rewrite' => array('slug' => 'theme') 
					) );
}

2. Modify Custom Taxonomy Columns

To modify our shiba_theme custom taxonomy columns, we must hook into the manage_edit-$taxonomy_columns filter.

Since our taxonomy name is shiba_theme, our filter hook becomes –
manage_edit-shiba_theme_columns

// Add to admin_init function
add_filter("manage_edit-shiba_theme_columns", 'theme_columns');	

function theme_columns($theme_columns) {
	$new_columns = array(
		'cb' => '<input type="checkbox" />',
		'name' => __('Name'),
		'header_icon' => '',
//		'description' => __('Description'),
		'slug' => __('Slug'),
		'posts' => __('Posts')
		);
	return $new_columns;
}

Line 8 – Add a header_icon column for displaying a thumbnail of the header image associated with each shiba_theme object.
Line 9 – Do no set the description column.

After we hook into manage_edit-shiba_theme_columns the description column gets removed, but our header image thumbnail still does not get rendered.

3. Render New Custom Taxonomy Column Data

To render our custom taxonomy header icon we must hook into the manage_$taxonomy_custom_column filter.

Since our custom taxonomy name is shiba_theme, our filter hook becomes -
manage_shiba_theme_custom_column

// Add to admin_init function	
add_filter("manage_shiba_theme_custom_column", 'manage_theme_columns', 10, 3);

function manage_theme_columns($out, $column_name, $theme_id) {
	$theme = get_term($theme_id, 'shiba_theme');
	switch ($column_name) {
		case 'header_icon':	
			// get header image url
			$data = maybe_unserialize($theme->description);
			$out .= "<img src=\"{$data['HEADER_image']}\" width=\"250\" height=\"83\"/>"; 
 			break;

		default:
			break;
	}
	return $out;	
}

Line 5 – Get our shiba_theme taxonomy object.
Line 6 – The $column_name here corresponds to the column names used in our theme_columns function in step 2.
Line 9 – Get the header image data associated with our shiba_theme object.
Line 10 – Concatenate the header image to our output string $out.

Once we do this, our header icon gets rendered.

We Are Done!

We can use the same process to add new actions for our custom taxonomy objects.

For example, in the screen-shot above we have added the actions Images and Copy to our shiba_theme objects.

Related Articles

Comments

  1. Jatin says

    Hello 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…

  2. Gábor Barát says

    Hi!

    Thank you for this great tutorial. I managed to add additional columns to my custom taxonomy. But now I would have to add a column which contains a BUTTON (and not just passive data). Clicking the button should change the value of a custom field for the custom taxonomy.

    Maybe it’s easier to show it with an image (“Issue” is the custom taxonomy; I’m trying to do an issue-based publishing system):
    http://img442.imageshack.us/img442/669/customcol.png

    My initial solution was to duplicate the default edit taxonomy term form, with hidden fields for the data and a visible submit button. But then I realized that this would create a nested form, since the whole taxonomy term table is wrapped in a form called “posts-filter” (and forms can’t be nested).

    If you have any ideas on how to accomplish this custom column with button, it would be highly appreciated!

    Gabor

    • says

      Hmmm, how about just expanding the Quick Edit menu? Otherwise, I suppose we could make each button into a submit button (no form, just the button) and then hook into the relevant form function. But that seems a bit messy.

  3. says

    Hey!

    First of all congratulations on so informative web site. I found a lot of useful stuff here. Thanks!

    I have one question. I am creating a simple catalog of products. Idea is that product has an thumbnail image a description and simple gallery (using media from wp). Products can be sorted in different categories.

    I’ve created custom taxonomy “Categories” for product. The problem I have is how to attach image to each category? So that when I do category list I can do image grid?

    Thank you for your answer in advance,
    Matic

  4. says

    Thanks for this tutorial. Your site has a ton of stuff. It seems like every time I search, your tutorials come up.

    I hacked in a color code for each term in a taxonomy and used your example to display it along side the other details.

  5. Binarybit says

    Could you please either create a post or explain to all of us how on gods earth it is possible to add a custom input field to a taxonomy… this is something which is driving me absolutely crazy!!!

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>