How to add icons to post listing (edit.php) in admin

by

We can style the table with CSS and dashicons.

Example:

For our video category, we can use for example:

.edit-php .wp-list-table tr.category-video td.post-title strong:before {
    content: "\f126";
    color: #ccc;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    font-size: 20px;
    line-height: 20px;
    font-family: "dashicons";
    font-weight: normal;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

where we target the tr.category-video class.

Just check out how it’s used in the backend, to get an idea of the CSS attributes.

We can get the list of dashicons here.

Update:

Here’s it the part of the WP_Posts_List_Table class that displays the post format icon:

$pad = str_repeat( '— ', $level );
echo "<td $attributes><strong>";    
if ( $format = get_post_format( $post->ID ) ) {
    $label = get_post_format_string( $format );

    echo '<a href="' . esc_url( add_query_arg( array( 'post_format' =>  
             $format, 'post_type' => $post->post_type ), 'edit.php' ) ) . '" 
             class="post-state-format post-format-icon post-format-' . $format 
             . '" title="' . $label . '">' . $label . ":</a> ";
}

Leave a Comment