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.

Reference

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s