Editing wp_list_comments() output

Editing wp_list_comments() output

WordPress Codex says that wp_list_comments() “displays all comments for a post or page based on a variety of parameters including ones set in the administration area”. But headaches begin if you want to change the comment HTML inside theme files – if you ever tried this, but wasn’t able to find any element that appears inside comments’ HTML (try theme string search for comment-author vcard class e.g., and you’ll quickly realize what are we talking about), the reason was simple – it’s not there. This whole code is generated from comment-template.php, which itself is a part of WordPress core.

Function wp_list_comments() accepts several parameters – callback is one of them. In case you didn’t know, in WordPress ecosystem callback actually means “take the code from WordPress core, modify according to my needs, insert everything into functions.php and use callback to make me look like a WordPress guru”. Just kidding :).

If your theme supports HTML5 comments, it will also mean that html5_comment function will generate the comment HTML. So let’s have a look on how it looks like, taken directly from WordPress core:

    protected function html5_comment( $comment, $depth, $args ) {
        $tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
?>
        < id="comment-" has_children ? 'parent' : '' ); ?>>
            

                
 
                

                    
                

 
                 'div-comment',
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'],
                    'before'    => '
',
                    'after'     => '
'
                ) ) );
                ?>
            


In order to edit this, all you need to do is insert this code into functions.php, make few adjustments to get it all working, modify according to your needs and use callback parameter so the WordPress will use your custom function. This is how you call a custom function:
  bbird_under_comments,           
) );
     ?>

And this is my example of callback function – I wanted to implement Foundation grid system into comment section and rearrange some elements. You are free to modify the code as you wish. Oh, and just so you know, $comment is WordPress globals object…
     function bbird_under_comments($comment, $args, $depth) {

$tag = ( 'div' === $args['style'] ) ? 'div' : 'li'; ?>
   < id="comment-" >
            

                

  

      

          
      

  
  
    

                 
                    

                        
                        %s', get_comment_author_link() ) ); ?>
                    

 
                    

                        
                            
                                
                            
                        
                     

 
                    comment_approved ) : ?>
                    

                    
                
                   

                    
                

  
 


  

 
                 'div-comment',
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'],
                    'before'    => '
',
                    'after'     => '
'
                ) ) );
                ?>