With WordPress 2.7 coming closer and closer, I’ve been doing more work on some of the new features and implementing them in my themes. I’ve got the comments and pings separated, now I wanted a little more control of how the new comment loop displayed my comments. Namely the avatar being to small and arranging the comment meta data differently. So after a couple of days I’ve got it working using the comment callback feature. Basically you define how the comment loop pieces fit together. I’ll continue below to post the actual code.
The heart of the code is put into a themes functions.php file, if one doesn’t exist then simply adding one will suffice. This is how my comment code looks but if you look most of the pieces are from the old way the comments were displayed and the code is the same.
[php htmlscript=”true”]
<?php function custom_comment($comment, $args, $depth) {
$GLOBALS[‘comment’] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID( ); ?>">
<div id="comment-<?php comment_ID( ); ?>">
<div class="avatar_cont"><?php if ($args[‘avatar_size’] != 0) echo get_avatar( $comment, $args[‘avatar_size’] ); ?></div>
Comment by <em><?php comment_author_link() ?></em>:
<?php if ($comment->comment_approved == ‘0’) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title="">
<?php comment_date(‘l, F jS Y’) ?> at <?php comment_time() ?></a> | <?php edit_comment_link(‘Edit’,”,”); ?></small>
<?php comment_text() ?>
<?php echo comment_reply_link(array(‘before’ => ‘<div class="reply">’, ‘after’ => ‘</div>’, ‘reply_text’ => ‘Reply to this comment’, ‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’] )); ?>
</div>
<?php } ?>
[/php]
The biggest headache I had was with the comment reply link, I was looking at some older pre beta 2 code and some of the options had since been changed.
After getting the code into the functions file it’s necessary to tell the comment loop to use these directions for displaying. Editing the wp_list_comments function like below will call the custom template.
[php light=”true”]<?php wp_list_comments(‘callback=custom_comment’); ?>[/php]
Notice the custom_comment is the same as the function name in the first block of code, this is how it’s identified.
Thanks to Otto for pointing this out:
Instead of hardcoding the avatar size the callback code will now pull out the size that you specify in the wp_list_comments arguments. As an example this would produce a avatar size of 48 while still using the custom callback.
[php light=”true”]<?php wp_list_comments(‘avatar_size=48&callback=custom_comment’); ?>[/php]
Thanks to Jan Dembowski for pointing out a problem with the comment form box not showing up in the right place when replying to comments. The code above reflects the change necessary to fix the problem. By adding this [php light=”true”]<div id="comment-<?php comment_ID( ); ?>">[/php] and then closing the div before the end of the function the comment form will now show up right underneath the comment being replied to instead of under all the children comments.
By baal666 December 1, 2008 - 4:23 pm
Hi,
Thanks for the explanations… However, I am not sure how to use this.
1) In which folder do you create “functions.php”?
2)I am not sure where to put the last code … You say “Editing the wp_list_comments function” but I am not sure where it is exactly…
Thanks
By baal666 December 1, 2008 - 4:29 pm
Hmm… I realize that my question is not that smart. Let me rephrase it.
Ok first, I found functions.php and I edited it.
Then, what I mean by “where to put it” is that if I follow your other code that splits comments between comments/trackbacks/pingbacks I have more than one call to the function:
1) php wp_list_comments(‘type=comment’);
2) php wp_list_comments(‘type=pings’);
What exactly should be modified in the code?
Thanks
By baal666 December 1, 2008 - 4:41 pm
Another problem I found…
I added the first code in mytheme…/functions.php right below another function that was already there.
But when I tried to post or update a post, I got the following:
Warning: Cannot modify header information – headers already sent by (output started at /home……../mytheme//functions.php:6) in /home……../wp-includes/pluggable.php on line 848
By Vaibhav January 28, 2009 - 3:32 pm
Chances are that you have some sort of extra whitespace in your functions file.
By Dmitriy Donchenko December 4, 2008 - 8:42 am
If you are using google analyticator plugin and Outgoing Traffic monitoring enabled, commentators URLs showing with errors.
Need to disable Outgoing traffic monitoring in google analyticator plugin setting.
By Jeremy Clark December 4, 2008 - 9:37 am
Good to know, I’ve never used that plugin but it’s good info to know. Thanks
By steveegg December 8, 2008 - 8:11 pm
Thanks. This is just what I was looking for.
By Jeremy Clark December 8, 2008 - 8:17 pm
Glad it helped.
By Otto December 12, 2008 - 11:06 am
Your custom callback function should really get the avatar_size parameter out of the args, and use that for the size of the avatars instead of hardcoding it to 50. This would make your example code more compatible for other themes, as the avatar_size can be passed into the wp_list_comments function.
By Jeremy Clark December 12, 2008 - 11:31 am
Thanks for pointing that out, and thanks for getting it into wordpress in the first place. I’d forgot to update the code after it was added. I’ve updated the code now using the example from the Walker:start_el function.
By Mike December 12, 2008 - 11:34 am
I’m trying to modify this to make it work the way I want, but one thing isn’t working.
If I use: php wp_list_comments (array(‘callback’ => ‘custom_comment’)); it works.
If I use: php wp_list_comments (array(‘reply_text’ => ‘Reply to this comment’)); it works.
If I try to use: php wp_list_comments (array(‘callback’ => ‘custom_comment’, ‘reply_text’ => ‘Reply to this comment’)); it doesn’t
They work independently of each other, but not together.
Suggestions?
By Mike December 12, 2008 - 11:47 am
Scratch that, I figured it out.
I needed to define the reply_text within my functions.php page, not in the comments.php page where I was including the callback method. I figured it out on my own, yay me.
By Jeremy Clark December 12, 2008 - 12:24 pm
Glad you figured it out. I’ve also edited the code to show how to change it.
By Saberj December 13, 2008 - 5:28 am
Is there a simple way to add a class to comment text using the callback method? It looks like the way you are doing things here, that you have to re-style everything with a callback. I would like to keep everything, but add a div tag to the text itself.
By Birthplace of the Process of Illogical Logic December 15, 2008 - 11:57 am
My WordPress 2.7 comment fix…
I spent pretty much every waking moment I had at home this weekend trying to wrap my head around the new comment loop in WordPress 2.7. Otto’s detailed explanation was helpful, but did not give me a way to “break down” the new wp_lis…
By AsceticMonk December 17, 2008 - 5:26 am
Thanks for your article! It’s very helpful. However, I do have two problems. Initially, I can’t get the reply link to appear, but when I changed $args[‘max_depth’] to a hardcoded number, then the reply link appears. The second problem is when I tested the thread commenting, the replies still show as depth-1. Any ideas?
By Jeremy Clark December 17, 2008 - 8:16 am
@Saberj I’m not really sure sorry.
@AsceticMonk have you checked the options in the dashboard under discussion. There are options to turn on threading and to set the depth. That’s the only I can think of, if you still can’t get it to work head over to http://wordpress.org/support and we’ll see if someone can’t help you.
By AsceticMonk December 17, 2008 - 8:48 pm
Thanks Jeremy! That was it, I forgot to enable it in the dashboard. So stupid of me!
By Wooden Fish » Personal Struggle With Threaded Comments December 17, 2008 - 8:58 pm
[…] comment layout, so I used a custom callback function. This part can be confusing, so I recommend this post from Jeremy Clark. You can start out using the example function he […]
By Aoshi December 23, 2008 - 9:49 pm
Hi there, i’ve just loaded the theme you created, Techozoic and i’m having an issue with the comments.
Fatal error: Call to undefined function function_exisits() in /…/…/…/…/…l/aoshi/wp-content/themes/techozoic-fluid/comments.php on line 152
What can i do to fix this error?
By Aoshi December 23, 2008 - 9:50 pm
Forgot to state that i am currently on WordPress 2.7
By dwyz December 23, 2008 - 11:47 pm
I’m having exactly the same problem as above.
Fatal error: Call to undefined function function_exisits() in /home/——-/wp-content/themes/techozoic-fluid/comments.php on line 152
Awesome template, but bit useless for a non-techy like me, please help 🙂
By Aoshi December 24, 2008 - 2:50 am
Found out the error was caused by a typo in line 152 of the comments.php.
By dwyz December 24, 2008 - 7:46 am
Got it – ‘exists’ was spelled incorrectly, cheers.
By Jeremy Clark December 24, 2008 - 8:39 am
Yeah I have since fixed the problem and waiting on approval of the new version at the theme area of wordpress.org. Thanks for using my theme.
By Jan Dembowski January 3, 2009 - 8:31 pm
Jeremy,
Do you know how to get the comment “Leave a Reply” box to appear within the comment’s … ? When I click on the Reply to this comment link it appears outside of that comment’s .
Thanks,
Jan Dembowski
By Jan Dembowski January 3, 2009 - 8:37 pm
Nuts, the formating got removed… The comment reply box is appearing outside of that comments LI … /LI tags.
By Jeremy Clark January 4, 2009 - 8:19 pm
It sounds like the comment.php is missing the call to
By ReformedHippie January 21, 2009 - 10:22 am
I have downloaded and installed your latest Techozoic theme and have a question… how do I get the total number of comments to appear in a bubble just like you do on your website. Right now the total comments are printed in text.
By Jeremy Clark January 21, 2009 - 7:31 pm
Yes that is some custom code I have on my site. I’ll include it in the next version of Techozoic.
By dwyz January 22, 2009 - 4:36 am
Hi Jeremy.
Can you let me know how i insert line breaks into my posts using your theme?
One posted, my txt all bunches together with no returns, cheers, dwyz
By Jeremy Clark January 22, 2009 - 6:57 am
Adding this to the stylesheet should fix it.
p {margin-top: .6em;
}
By Dan February 15, 2009 - 8:18 am
Many thanks for this, just what I was looking for. 🙂
Just a quick comment, on line 13, you need to move the vertical line surrounded by two non-breaking space into the code of “edit_comment_link”, so that the vertical line only appears if you’re logged in.
By Jeremy Clark February 18, 2009 - 7:50 am
It’s kinda of catch 22 if you move it to the edit comment link then the link generated has the line and spaces in it, I think it looks better to have line outside the link.
By Shelly March 28, 2009 - 11:10 am
Hey Jeremy,
I had a question about this. I’m also trying to fix my threaded comments to put in some custom stuff, and I’m running into a couple of issues I can’t seem to make work. My biggest one is wrapping the comment replies in a singe div. (meaning, if a comment has “children”, I want to basically capture ALL the children in one big div under the parent comment.)
Now, I have figured out how to do the parent/child relationship, but my issue is that the comment Loop is not setting the outer div once – instead it’s setting it for every child comment.
Do you happen to know of a way to “pause” the comment loop within the function, to output that since opening/closing div tag? Right now, I’ve got it figure out that when the first instance of a child is discovered, I can place in the divs – I just don’t want them to repeat for every *instance* of a child – just open on the first and close on the last. Got any tips on that front?
(great tutorial by the way! 🙂 )
By Shelly March 28, 2009 - 1:00 pm
I got it 🙂 Well, I’m more than halfway there anyway. I just needed this in my function:
$child = get_comment_class( $args );
$child = $child[has_children];
if($child == ‘1’ ) {
echo ” . “\n”;
}
So now if this comment is a parent, it’ll stick in a div. Still trying to get the arrangement correct, but at least figuring that out got my a lot farther ahead than I was 🙂
By Jeremy Clark March 30, 2009 - 9:01 am
Glad you figured it out.
By Shelly March 30, 2009 - 9:42 am
🙂 Well, I *did* – but it turned out the extra effort was for naught. It turns out I needed to do something that is beyond the scope of my knowledge for PHP – and I’m currently trying to sort it. I was “taking the long road,” when apparently there was a much easier method – but since inserting code into WP core functions is beyond my PHP scopr of knowledge, I was stuck.
if you’re interested (I’m not asking you to solve this for me, but if you’d like to direct me to a clue, that would be awesome 🙂 )basically the core code (in the comments-template.php file) holds “start_levl()” and “end_lvl()” functions, that hold case/breaks. The “div” case is actually what I need to insert code into. The “ol” and “ul” cases both have ID’s attached to them, but I needed an extra line added to the “div” case. My issue is on *how* to add that extra line *without* editing core code (i.e. using my functions.php file to insert the extra info).
I still haven’t gotten that figured out – but when (ir if – I don’t even know if this is possible) I do, I’ll post it back here.
By Jeremy Clark March 30, 2009 - 9:51 am
That’s out of my league as well. But if you do find a solution I’d like to post it here for others who want the same layout.
By Shelly March 31, 2009 - 8:59 am
Well, I got it. Whether or not it’s a *great* solution, I dont’ know. Someone with more PHP knowledge than I could probably pull it off in less lines of code than I did.But the way I see it is 1) it works and 2) I’m not hacking core files anymore.
BECAUSE it’s so many lines of code, I’m not going to post the entire thing here, but I did promise I’d come back and tell you if I succeeded, and because I like to share what little knowledge I have that resides in my brain, I’ll give you snippets of how (because seriously, it’s a lot more code than I’m comfortable placing on someone else’s site!)
Basically, what I needed was PHP’s “extend” for classes. In the comments-template.php file, the “Walker_Comment” class needed to be overwritten. Problem is, it’s a pretty big class, so you have a lot of code to overwrite. Basically everything from line 1128 all the way down to the end. The GOOD news is, all I had to do was rewrite a few of those lines. Because you’re extending a class, this will override the current one in core – so you’re not repeating functions (and getting that horrid “cannot redeclare” error.
So here’s what lines I overwrite:
1128 is “class Walker_Comment extends Walker {”
I renamed the class so now it reads “bb_class Walker_Comment extends Walker {”
1154 – 1156 says:
switch ( $args[‘style’] ) {
case ‘div’:
break;
I changed that to say:
switch ( $args[‘style’] ) {
case ‘div’:
echo “Show/Hide Replies\n”;
echo “\n”;
break;
1178-1180 says:
switch ( $args[‘style’] ) {
case ‘div’:
break;
that was changed to this:
switch ( $args[‘style’] ) {
case ‘div’:
echo “\n”;
echo “\n\n”;
break;
Line 1279 says:
function wp_list_comments($args = array(), $comments = null ) {
I changed that to:
function bb_list_comments($args = array(), $comments = null ) {
and finally, line 1354 says:
$walker = new Walker_Comment;
I changed that to call in the new class:
$walker = new bb_Walker_Comment;
Now, in your comments.php file (in your theme) instead of calling “wp_list_comments” you call in “bb_list_comments”. All the same functionality, etc applies (even your tutorial above).
By adding the jQuery library into my header.php file, and calling the show/hide display, now my comments will expand by clicking the “show/hide replies” link. If you want to see it in action, you can go to my site (trying NOT to put in a shameless plug here, but maybe if people see what I was trying to do, it’ll help):
http://brassblogs.com/blog/wordpress-27-and-comment-display
scroll to the bottom, and the last comment has a “Show/Hide Replies” link. Click it and see what happens.
The awesome thing is, by rewriting said class, it’ll go as many levels deep as you like. My site’s set to go three levels deep, but I haven’t had anyone reply to a reply yet, so you can’t see the effect – but on my localhost install I have it 5 levels deep with a bunch of test comments, and it goes down for every single level. So awesome.
Hope that helps someone out 🙂
By Shelly March 31, 2009 - 9:02 am
And by the way, I’m probably going to post the full code on my own site so people can use it (I don’t mind using up my OWN server space!) – you mind if I link back here as well? (Actually this might be better as a plugin rather than a function, I think I’ll see if i can’t pull that off…) To show people how to do the remote callback stuff?
I should also mention that pagination *should* work too – you’re not messing with anything except basically adding divs, but I haven’t tried the pagination thing to see what effect it has.
By Jeremy Clark March 31, 2009 - 9:45 am
Feel free to link here, and let me know when you get the page up with the code and I’ll link to it. I might be using that code, I really like the show/hide replies feature.
By Shelly March 31, 2009 - 12:14 pm
Okay, I’ve uploaded it here:
http://brassblogs.com/lab/expandable-comment-replies
Turned it into a plugin. The post is partially finished – I need to tweak it, and I’m also going to add it to the WordPress Extend area – but there you go.
Thanks! 🙂
By Shelly March 31, 2009 - 3:46 pm
Okay Jeremy – I replied on my site too – but I pu in some changed and just re-uploaded the new version. let me know if you still have issues 🙂
By Ajax May 23, 2009 - 6:25 am
Nice function, for sure!
By Jaejae August 23, 2009 - 8:23 pm
Sweet man, You just saved me a lot of time goin after the core function… I wasnt aware of the callback possibility.
By sooran September 15, 2009 - 6:23 am
tancks.
This Post Helped me
Good Time
By Marko Randjelovic January 5, 2010 - 4:45 pm
Thanks for sharing this callback function, it will save me a lot of headaches. 🙂
By jQuery Comment Replies wordpress plugins forms | wordpress plugins March 9, 2013 - 4:34 am
[…] several tutorials availble for how to edit the comment layout, but Jeremy Clark‘s is the one that actually started this wordpress […]