5

Is there a filter or something to add these kind of icons based categories and what not to all posts?

I can't seem to find one. I tried the_title but ofc that gets sanitized and just displays the html.. Thanks!

2 Answers 2

3

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> ";
}
6
  • Oh my now I feel stupid. I DID check the source multiple times but I totally missed the <tr> classes somehow. Thanks mate.
    – jimihenrik
    Jun 26, 2015 at 20:18
  • don't worry, this also happens to me all the time ;-) Sometimes we just need to borrow another pair of eyes for a minute. I would consult the admin style in the core regarding the dashicon CSS commands. @jimihenrik
    – birgire
    Jun 26, 2015 at 20:24
  • Yeah true, but I'm still intrigued. The native formats (video/gallery) etc have and extra HTML element there anyway, not just classes, so wondering if one could be added via a filter.
    – jimihenrik
    Jun 26, 2015 at 20:31
  • 1
    You mean the post format icon? There doesn't seem to be any explicit filter to modify this output. I updated the answer with the corresponding code in the core. You might try CSS or Javascript to modify it to your needs. @jimihenrik
    – birgire
    Jun 26, 2015 at 20:54
  • 1
    Well there exists set_post_format, but I'm not sure how flexible this is regarding other formats than the default ones. It looks like we are stuck with the default formats defined in get_post_format_strings(). @jimihenrik
    – birgire
    Jun 26, 2015 at 21:06
0
tr.type-post td.column-title strong:before {
color: #ccc;
display: inline-block;
margin: 0 4px;
font-size: 14px;
font-family: "dashicons";
font-weight: normal;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
tr.post_format-post-format-link td.column-title strong:before {
content: "\f103";}
tr.post_format-post-format-video td.column-title strong:before {
content:"\f126";}
tr.post_format-post-format-audio td.column-title strong:before {
content:"\f127";}tr.post_format-post-format-image td.column-title strong:before {
content:"\f128";}tr.post_format-post-format-gallery td.column-title strong:before {
content:"\f161";}tr.post_format-post-format-chat td.column-title strong:before {
content:"\f125";}tr.post_format-post-format-quote td.column-title strong:before {
content:"\f122";}tr.post_format-post-format-aside td.column-title strong:before {
content:"\f123";}
tr.post_format-post-format-status td.column-title strong:before {
content:"\f130";}
1
  • 1
    9 years later 😅 But thanks 👏 Pure css won't help you getting them per category or any custom variable though 😇
    – jimihenrik
    Jan 20 at 9:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.