Hacking Term List Table

Term Table
Standard

Term list table, unlike post list table, is not very customizable. What I needed was to display the thumbnail/icon of each term, to make it easier for the content editors to distinguish one term from another.

I consider this as a hack, not because we’re going to edit a core file (never ever do that, please!), but because we’re (ab)using a filter hook to display the thumbnail, which should normally be done through an action hook. Unfortunately, if we take a look at wp-admin/includes/class-wp-terms-list-table.php file, there’s only one action hook in there, which can’t help us. However, there’s a filter hook that can be useful for our situation: "{$taxonomy}_row_actions", normally used to customize the action links that show up when we hover over a term row.

Before we begin, We need to decide how we attach an image to a term. There are many plugins out there that can help us with this, but in this guide we’ll be using my own plugin, KC Settings. By the way, if the plugin of your choice doesn’t use termmeta table to store terms metadata, I strongly suggest you to look for another plugin :)

Let’s get started with creating a mu-plugin file, or editing a our theme’s function.php file (not recommended). We’ll be using the category taxonomy throughout this guide, but you can off course use other taxonomies.

First we’ll add an entry for KC Settings, (please refer to the sample files included in the plugin to learn about the setting array), or you can also use the Builder if you like.

function my_category_metadata( $groups ) {
  $groups[] = array(
    'category' => array(
      array(
        'id'        => 'category-meta',
        'title'     => 'Metadata',
        'fields'    => array(
          array(
            'id'    => 'icon',
            'title' => 'Icon',
            'type'  => 'file'
          )
        )
      )
    )
  );

  return $groups;
}
add_filter( 'kc_term_settings', 'my_category_metadata' );

Now we can attach an image when creating/editing a term:

Attach/set term icon

To get the data, we can use get_term_meta(). For example, assuming the category ID is 20:

print_r( get_metadata('term', 20, 'icon', true) );

…which outputs:

Array
(
  [selected] => Array
    (
      [0] => 38
    )
  [files] => Array
    (
      [0] => 38
    )
)

Next, we’ll display each term’s icon on the term list table:

function my_category_column_hack( $actions, $term ) {
  if ( $icon = get_metadata('term', $term->term_id, 'icon', true) ) {
    if ( isset($icon['selected'][0]) && $img = wp_get_attachment_image( $icon['selected'][0]) )
      echo '<a href="'.get_edit_post_link($icon['selected'][0]).'" class="term-icon">'.$img.'</a>';
  }

  return $actions;
}
add_filter( 'category_row_actions', 'my_category_column_hack', 10, 2 );

We’re basically done, and the term table should now display the icons of each term. However, we need to add some CSS to make it look a little bit sexier and to match the Media screen.

function my_admin_inline_styles() {
  $screen = get_current_screen();
  if ( $screen->base == 'edit-tags' ) { ?>
<style>.term-icon {float:left;width:40px;height:40px;overflow:hidden;margin-right:10px} .term-icon img {max-width:100%;height:auto}</style>
  <?php }
}
add_action( 'admin_print_styles', 'my_admin_inline_styles', 99 );

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>