Compact pingback list with favicons

Question

The first you do: separate regular comments and pingbacks. In your comments.php set the type parameter for both:

<ol class="commentlist">
<?php
// show regular comments
wp_list_comments(
    array (
        'type'     => 'comment',
        'style'    => 'ul'
    )
);
?></ol>

<ol class="pinglist">
<?php
// show pingbacks and trackbacks, short: "pings"
wp_list_comments(
    array (
        'type'     => 'pings',
        'style'    => 'ul'
    )
);
?></ol>

Now, there is a problem: You don’t want to print an empty <ol> if there are no approved pings.

So I let’s use a simple ping counter:

/**
 * Count amount of pingbacks + trackbacks for a post.
 *
 * @param int $post_id Post ID for comment query. Default is current post.
 * @return int
 */
function t5_count_pings( $post_id = NULL )
{
    $pings    = 0;
    $comments = FALSE;

    if ( NULL !== $post_id )
    {
        $comments = get_comments(
            array (
                'post_id' => $post_id, # Note: post_ID will not work!
                'status'  => 'approve'
            )
        );
    }
    elseif ( ! empty ( $GLOBALS['wp_query']->comments ) )
    {
        $comments = $GLOBALS['wp_query']->comments;
    }

    if ( ! $comments )
        return 0;

    foreach ( $comments as $c )
        if ( in_array ( $c->comment_type, array ( 'pingback', 'trackback' ) ) )
            $pings += 1;

    return $pings;
}

Now we wrap our ping list into a conditional:

if ( $num = t5_count_pings() )
{
?>
<h2 id="pingbacks"><?php
    printf( _n( 'One pingback', '%d pingbacks', $num, 't5_theme' ), $num );
?></h2>
<ol class="pinglist">
<?php
wp_list_comments(
    array (
        'type'     => 'pings',
        'style'    => 'ul'
    )
);
?></ol>
<?php
}

If t5_count_pings() returns a 0, PHP will read that like a FALSE and the list container will not be printed.

Now the formatting. wp_list_comments() accepts a parameter callback, and we can use that to render the content of each ping. I named mine t5_list_pings_callback() and add it like this:

wp_list_comments(
    array (
        'type'     => 'pings',
        'style'    => 'ul',
        'callback' => 't5_list_pings_callback'
    )
);

The content of this function is very simple:

/**
 * Callback for wp_list_comments( array ( 'type' => 'pings' ) )
 *
 * @param  object $comment
 * @return string
 */
function t5_list_pings_callback( $comment )
{
    $url     = esc_url( $comment->comment_author_url );
    $icon    = t5_external_favicon( $url );
    $name    = esc_html( $comment->comment_author );

    print "<li><a href="https://wordpress.stackexchange.com/questions/96595/$url">$icon $name</a>";
}

Two important notes:

Do not add the closing </li>. WordPress will do that for you.
We need a function t5_external_favicon(). Let’s ask Google.

.

/**
 * Get an img element for a favicon from Google.
 *
 * @param  string $url
 * @param  string $class class attribute
 * @param  int    $size
 * @param  string $alt
 * @return string
 */
function t5_external_favicon( $url, $class="icon", $size = 16, $alt="" )
{
    $host     = parse_url( $url,  PHP_URL_HOST );
    $icon_url = "https://plus.google.com/_/favicon?domain=$host";

    return "<img class="$class" width="$size" height="$size" alt="$alt" src="https://wordpress.stackexchange.com/questions/96595/$icon_url" />";
}

We use an empty alt attribute because the images are really just decoration. And the width and height should always be set, because some sites use really large icons.

And that’s it. This is how it looks on wpkrauts.com:

screenshot

Related Posts: