Using wp_list_comments To Create Customised Comments

/ Wordpress / by Paul Robinson / 11 Comments
This post was published back on February 9, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

There are quite a few themes out there that still use the classic method of looping through comments to display them. While, I guess, that is still a valid way of displaying comments on a WordPress blog, I would strongly advise changing it to wp_list_comments().

Something that can be confusing is how to customise the way comments are displayed when using wp_list_comments(). You can’t just edit the HTML as there isn’t any there to edit. Instead you must use the callback option that is provided in the argument list of wp_list_comments(). A callback is an instruction to run another function that you define. We will use this to customise the HTML of the comments while maintaining the ability to use threading (should you wish).

Defining The Callback

First let’s define our callback function. You can call it anything you like, but I would advise calling it something like themename_comment where ‘themename’ is the name of your current theme. Here is a simple example:

Note the lack of a closing <li>. This is purposely left out as WordPress will automatically close any tags itself. Just for giggles let’s go through what all of the functions mentioned in the above code do:

This function outputs a list of classes as class="class1 class2 class3". They include odd/even, current depth and others. An extra class can be provided if needed.
The unique numeric ID for the current comment.
Uses the commenters email to check for a gravatar. First parameter must be the $comment object, second is the size for the avatar, last is the URL to a default avatar (must be full URL).
Gets the link to the current comment. Parameter is the ID for the comment link wanted.
Gets the link to edit the current comment. First parameter is the text for the link, second is what to place before, last is what to place after.
Gets the text for the current comment.
Gets the link to reply to the current comment. Will only be visible is threaded comments is enabled in settings->discussion. Lots of parameters, check the codex for all of them.

Using The Callback With wp_list_comments

To instruct wp_list_comments to use the callback you simply do this:

There is obviously the CSS to create for making your comments look nice, but this is just a tutorial to explain more about creating the customised comments, not styling them. All of the css classes can be seen in the code above anyway & if you want to style children the classes are exactly the same, but they are all children of the <ul> class children.

That’s it. As always any questions leave a comment, or drop me an email. Also any suggestions or tips are always welcome.

P.S. I have just noticed the theme I am currently using doesn’t use wp_list_comments. Guess I’m going to have to get stuck in an change it… The irony. 😆


Author’s gravatar

Excellent tutorial. thanks for sharing. I will like to read on separate comments and pingbacks.

Author’s gravatar

Brilliant tutorial – i’m new to wordpress and this was very useful.

Thank you 🙂

Author’s gravatar

hi paul! just passing through the interwebs as i’m looking to separate trackbacks and comments… which isn’t that hard, but i’m finding that if you limit the blog to X number of comments per page the pagination gets all kinds of weird. so if you have any tutorials on that, i’m all eyes.

Author’s gravatar author

Hi Kathy,

All kinda weird? I know sometimes I’ll leave a comment & the page will load blank, but that’s because it’s loaded the next page due to bug with comment threading (I think).

What other weird things are happening & I’ll let you you know if I’ve heard anything. 😉

Author’s gravatar

Ah! Thanks sooo much for this! (=^_^=)

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more