I am building a theme and want to restructure the HTML output of the comments in a post. In comments.php, it uses wp_list_comments() to output the comments. What is the filter hook I need to use to change the layout of the comment HTML?

CodePudding user response：

There are 2 ways:

1. Custom Callback Function, takes care how a comment renders.
2. Custom Comment Walker Class, takes care how entire comment list renders.

I suggest to modify the callback one.

1. Find at comments.php where the comments list renders.

wp_list_comments(
  array(
  'callback' => 'my_custom_comment', // our custom comment callback
  )
)

2. Create the callback, either functions.php or whatever your structure is.

function my_custom_comment( $comment, $args, $depth ) {
  // Here you render your custom comment based on parameters above.

  // IMPORTANT:
  // The markup here requires an opening <li> or <div> tag
  // depending on how is configured on your $args, but not
  // a closing tag, cause it's closed by `Walker_Comment`.
  // See the class for more details.

  // Example:
  /*
  <li >
    <article >
      ...
    </article>
  */
  // no closing tag for li because this comment may have other `children` inside this `<li>` tag.
}

See how WordPress handles it at html5_comment method: https://developer.wordpress.org/reference/classes/walker_comment/

Test it and expand it yourself.