Advanced WordPress Comment Styles and Tricks
255Comments are gold. There’s little a blogger loves more than to see a whole list of comments posted on his/her article. It’s great to know people want to engage with you, and they can add a lot to an article.
However, if comments are not done well, they can be difficult to read and follow, or even just downright boring.
What we’re going to do first is create a custom comment callback that allows us to specify the way the comments are output, then lay out the structure for the comment list and reply form, add extra functionality such as author-only styles, implement comment subscription options and spam protection, and, finally, we’ll add nice CSS styling to everything we’ve done.
We will be working with the default WordPress theme in order to make everything easy to follow, and to ensure everyone can follow along. We will also be ignoring all styling elements until the very end, so if it looks bad, just be patient!
An important note to remember is that anytime I refer to line numbers, I’m referring to the line numbers of the code I posted, not the line numbers in your files.
1 – Create Custom Comment Callback
The comment callback is just a way of telling WordPress what HTML to spit out for your comments.
Rather than trying to modify the default theme’s existing comment callback, we’re going to create our own, by adding this to functions.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?php //this function will be called in the next section function advanced_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>"> <div class="comment-author vcard"> <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?> <div class="comment-meta"<a href="<?php the_author_meta( 'user_url'); ?>"><?php printf(__('%s'), get_comment_author_link()) ?></a></div> <small><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?><?php edit_comment_link(__('(Edit)'),' ','') ?></small> </div> <div class="clear"></div> <?php if ($comment->comment_approved == '0') : ?> <em><?php _e('Your comment is awaiting moderation.') ?></em> <br /> <?php endif; ?> <div class="comment-text"> <?php comment_text() ?> </div> <div class="reply"> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?> </div> <div class="clear"></div> <?php } ?> |
What this code does is specify exactly how we want each, individual comment to be displayed. This allows us to define custom class/id settings for each element as well, rather than being bound to the default theme’s settings.
2 – Lay Out Your Template File
The code in the previous section created the structure for individual comments, now we need to lay out the structure for the actual comments page, on which all of the comments will be displayed (Including the comment form).
If your comments.php has anything in it already, replace it with the code below. I have included comments throughout the code to explain a few important details.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <?php /** * @package WordPress * @subpackage Default_Theme */ // Do not delete these lines if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!'); if ( post_password_required() ) { ?> <p class="nocomments">This post is password protected. Enter the password to view comments.</p> <?php return; } ?> <!-- You can start editing here. --> <?php if ( have_comments() ) : ?> <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3> <ol class="commentlist"> <?php wp_list_comments('type=comment&callback=advanced_comment'); //this is the important part that ensures we call our custom comment layout defined above ?> </ol> <div class="clear"></div> <div class="comment-navigation"> <div class="older"><?php previous_comments_link() ?></div> <div class="newer"><?php next_comments_link() ?></div> </div> <?php else : // this is displayed if there are no comments so far ?> <?php if ( comments_open() ) : ?> <!-- If comments are open, but there are no comments. --> <?php else : // comments are closed ?> <!-- If comments are closed. --> <p class="nocomments">Comments are closed.</p> <?php endif; ?> <?php endif; ?> <?php if ( comments_open() ) : ?> <div id="respond"> <h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3> <div class="cancel-comment-reply"> <small><?php cancel_comment_reply_link(); ?></small> </div> <?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?> <p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p> <?php else : ?> <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( is_user_logged_in() ) : ?> <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out »</a></p> <?php else : //this is where we setup the comment input forums ?> <p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" /> <label for="url"><small>Website</small></label></p> <?php endif; ?> <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>--> <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Post" /> <?php comment_id_fields(); ?> </p> <?php do_action('comment_form', $post->ID); ?> </form> <?php endif; // If registration required and not logged in ?> </div> <?php endif; // if you delete this the sky will fall on your head ?> |
If you need help understanding the purpose of anything in comments.php, check out the article on Net Tuts about unraveling comments.php.
3 – Enable Nested Comments
People have mixed feelings about threaded comments, but they can be quite useful in organizing the discussion flow. This step is entirely optional and won’t break anything if you choose not to enable nested comments.
Assuming you do wish to enable them, you need to go to your WordPress Dashboard and click on Settings > Discussion > Enable threaded (nested) comments # levels deep (i.e. how many times can you reply to a reply).
4 – Make the Author Stand Out
Particularly useful for people who write tutorials and need to answer questions from their readers, this bit of code will make any comment left by the author of the article stand out from the community’s comments.
Newer WordPress versions make this very easy. They will automatically add certain CSS classes to comments (Assuming that you used the <php comment_class(); ?> tag that we mentioned in step 1).
To style the comments, just add CSS rules for the following classes:
- byuser – For comments left by any registered user on the site.
- bypostauthor – For comments left by the author of the current post (Very useful for styling comments by guest authors on their own posts, but not on any other posts)
- comment-author-name – Where “name” is the user’s name. This can be good for styling comments from an individual user, e.g. comment-author-admin
For an older method of doing this manually (Allowing you to style comments based on specific emails being used), check out this post.
5 – Disable Comments on Old Posts
This can be done through the WordPress settings, under Discussion, but in case you’d like to do this automatically from within the theme, place this code in your functions.php:
1 2 3 4 5 6 7 8 9 10 11 | <?php function close_comments( $posts ) { if ( !is_single() ) { return $posts; } if ( time() - strtotime( $posts[0]->post_date_gmt ) > ( 30 * 24 * 60 * 60 ) ) { $posts[0]->comment_status = 'closed'; $posts[0]->ping_status = 'closed'; } return $posts; } add_filter( 'the_posts', 'close_comments' ); ?> |
This snippet was originally posted by Jeff Star at Perishable Press.
The important part is the “30 * 24 * 60 * 60.” That means 60 seconds, time 60 minutes, times 24 hours, times 30 days. So if you wanted to make it happen after 3 months, you could change the first 30 to a 90.
This could be useful for theme developers who would like to make “Commenting on Old Posts Disabled” a feature of their theme.
6 – Subscribe to Comments
Often times a reader will ask a support question via post comments. Receiving an email whenever another comment is posted is a much easier way for that reader to know an answer has been posted than manually checking every now and then (if they even remember to do that).
Subscribe to Comments by Mark Jaquith is a great plugin that adds a link to subscribe to further comments just below the message box of the comments page. It also includes a subscription manager that is placed under Tools in your WordPress Dashboard, allowing users to unsubscribe from posts at any time.
We will style this button in the last section.
7 – Add Extra Moderation Links
Even with anti-spam protection, you will occasionally have comments that you need to mark as spam or delete entirely, so lets add links that allow us to do so. This will allow us to moderate comments from the website itself, not just the dashboard.
First add this to your functions.php
1 2 3 4 5 6 7 | <?php function delete_comment_link($id) { if (current_user_can('edit_post')) { echo '<a href="'.admin_url("comment.php?action=cdc&c=$id").'">del</a> '; echo '<a href="'.admin_url("comment.php?action=cdc&dt=spam&c=$id").'">spam</a>'; } } ?> |
Next, put this code in functions.php after line 24 of the custom callback function we created in section 1.
1 | <?php delete_comment_link(get_comment_ID()); ?> |
like so:
1 2 3 4 | <div class="reply"> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?> <?php delete_comment_link(get_comment_ID()); ?> </div> |
Your outcome should look something like this:
Thanks goes to Joost de Valk for this great snippet.
8 – Add an Extra Layer of Spam Protection
Spammers are always a problem, even though there are a whole slew of plugins to protect against them. This piece of code will add an extra barrier that they have to break through. Essentially what it does is block any comment that does not have a referrer (i.e. where the user came from previously) in the posting request, which is usually indicative of bots.
Paste this into your functions.php
1 2 3 4 5 6 7 8 | <?php function check_referrer() { if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == “”) { wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, get out of here!') ); } } add_action('check_comment_flood', 'check_referrer'); ?> |
This snipped was also from From Joost de Valk. There is a chance you could block some legitimate users though, but if spam is becoming a major issue, it’s worth considering.
9 – Add Comment Feed Link
To display a link to your comments RSS feed, paste this somewhere in your comments.php file:
1 | <?php comments_rss_link('Subscribe to Comments via RSS'); ?> |
One of the best places would be immediately after the comment input forums.
1 2 3 4 5 6 7 8 9 10 | <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> <small>Allowed tags: <?php echo allowed_tags(); ?></small> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Post" /> <?php comment_id_fields(); ?> </p> <?php do_action('comment_form', $post->ID); ?> </form> <div class="comment-rss"><?php comments_rss_link('Subscribe to Comments via RSS'); ?></div> |
10 – Display Allowed Tags
Bold text can really help people’s points stand out in their comments, just as italics can be great for things like addresses and error messages (404: Not Found). Letting your readers know they are allowed to use certain HTML tags in their messages can be a real help.
Paste this:
1 | Allowed tags: <?php echo allowed_tags(); ?> |
in your comments.php. I have put it just above the textarea and placed “small” tags around it.
1 2 3 | <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> <small>Allowed tags: <?php echo allowed_tags(); ?></small> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Post" /> |
It should come out looking something like this:
This snippet comes from Net Tuts.
11 – Show Total Number of Comments
If you’d like to display the total number of comments posted sitewide, put this snippet anywhere in your theme’s template files, such as header.php
1 2 | <?php $numcomms = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'"); if (0 < $numcomms) $numcomms = number_format($numcomms); echo "There's <span>".$numcomms."</span> total comments on "; bloginfo('name'); ?> |
It will be displayed as something like There’s 1534 total comments on your website name. The “span” tags around “.$numcomms.” are there so we can emphasize the number of comments with CSS later. I have also wrapped the code in div tags like so:
1 2 3 4 | <div class="comment-total"> <?php $numcomms = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'"); if (0 < $numcomms) $numcomms = number_format($numcomms); echo "There's <span>".$numcomms."</span> total comments on "; bloginfo('name');?> </div> |
This snippet comes from Hiroshi at PHP Magic Book
12 – Add Some CSS
After everything we have done, your result should look pretty similar to the default theme here.
Obviously this is no good, so we want to get a little happy with the CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | /**************** advanced comment styles ****************/ h3#comments,.comment-navigation,.comment-navigation:after,#respond:after,.comment-rss{display:block} ol.commentlist{width:100%} h3#comments,#respond h3{height:25px;text-align:left;background:#4c7faa;color:#fff;padding:5px 0 0 5px} ol.commentlist,li.authorcomment,li.comment,#respond h3,form#commentform,input#submit{margin:0} ol.commentlist,ol.commentlist ul,form#commentform{padding:0} ol.commentlist{border-bottom:1px solid #ccc} ol.commentlist ul{margin:0 0 0 20px} li.authorcomment,li.comment,form#commentform textarea,form#commentform input{border:1px solid #ccc} li.authorcomment,li.comment{padding:10px 0 0 10px;list-style:none;border-bottom:none} li.even{background:#fff} li.odd{background:#efefef} .authorcomment{background:#deebf9} ul.children ul{margin-left:20px} ul.children li{border-right:none} .vcard img{float:left;background:#c4c4c4} .vcard img,.comment-navigation .newer a,.comment-navigation .older a{padding:5px} .comment-meta,ol.commentlist li small,p.subscribe-to-comments label{position:relative} .comment-meta,ol.commentlist li small{top:10px;left:10px} .comment-text{margin:0 10px 0 0} .reply,.comment-navigation .newer,input#submit{float:right} .reply,.comment-navigation .newer a,.comment-navigation .older a,input#submit{background:#4c7faa} .reply{margin:0 10px 10px 0} a.comment-reply-link,.reply a:link, .comment-navigation .newer a,.comment-navigation .older a,input#submit{display:inline-block;text-align:center;cursor:pointer;color:#fff} a.comment-reply-link,.reply a:link{padding:5px 0} a.comment-reply-link,.reply a:link,input#submit{width:70px} a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover, .comment-navigation .older a:hover,input#submit:hover{background:#e7e7e7;text-decoration:none;color:#4c7faa;font-weight:bold} a.comment-reply-link:hover,.reply a:hover,input#submit:hover{width:68px} a.comment-reply-link:hover,.reply a:hover{padding:4px 0} a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover,.comment-navigation .older a:hover{border:1px solid #4c7faa} .comment-navigation{margin:10px 0 10px 0} .comment-navigation:after,#respond:after{content:".";height:0;visibility:hidden} .clear{clear:both} .comment-navigation .newer a:hover,.comment-navigation .older a:hover{padding:4px} form#commentform textarea,form#commentform input{padding:2px 3px} form#commentform textarea{width:442px} input#submit{padding:5px 0 !important;border:0 !important} input#submit,p.subscribe-to-comments input{outline:0} input#submit:hover{padding:4px 0 !important;border:1px solid #4c7faa !important} p.subscribe-to-comments{background:url('images/email_32.png') no-repeat} p.subscribe-to-comments,.comment-rss{height:32px;text-indent:42px;padding:5px 0 0 0} p.subscribe-to-comments input{margin:5px 3px 3px 3px !important;border:0} p.subscribe-to-comments label{top:-2px;color:#666} .comment-rss{background:url('images/rss_32.png') no-repeat} /*comment total stlying*/ .comment-total{text-align: center;font-size: 1.5em;color: #fff;} .comment-total span{font-size: 2em;color: #800000;} |
You can see my finished modification of the default theme comments page here.
Because there are a few things only visible to the site admin, here’s a screenshot of the logged-in admin view:
The CSS above is written such that this could all be incorporated into almost any, if not all, themes without more than a few small modifications, so don’t feel like you’re stuck with the default theme!
To make it easier on you, feel free to download all the files for my modified default theme here.
13 – Going Further
We’ve covered a lot of ground here, but if you’d like to go even further with your site’s comments, here are some links for further reading:
- Adding Form Validation to WordPress Comments Using jQuery
- Numbering Your Comments, Pingbacks, Trackbacks, or All
- Hack Together a User Contributed Link Feed With WordPress Comments
- How to Rearrange WordPress Comments: Latest on Top
- Plugin: AJAX Edit Comments 2.0
- Separating Trackbacks from Comments
Enjoy this post? You should follow me on Twitter!
I’m in the middle of re-styling and branding my website and I’ve been stuck on customizing my comments to be just how I like them – this article is like a perfect timing God-send! It’s like you read my mind.
I’ll be referring to this article like the Bible of Comment Formatting over the next few days. Definitely a great resource! Thank you!!
Great! I’m really glad it was helpful! I’d love to see what you come up with when you’re done.
Haha, I love the name for it Anne! Makes me want to re-title the article! :D
Pippin, I’ll be sure to post back and let you know when I’ve published my new look!
Michael, well that’s just how I think of it :P glad you liked my wording! :)
I’ll be eager to see it. Ha, I agree with Michael, your name for it is great!
Great article. Pity it’s not working for me, when I implement this after submitting comments a white screen appears and goes no further. I love how this comments section looks here too.
How can I add wysiwyg to comment form?
Check out this link here: http://www.techmixer.com/add-wysiwyg-comment-rich-text-editor-on-wordpress-comment-using-tinymcecomment/
Thanks ))
not working for me and i am using premium theme i am not trying hard to edit because once i lose my template it will be unable for me to recover
Literally tired to find something unique WordPress Comment Style but here i got everything thanks to share with Us.. keep posting something new like this!! will RT you!!
Effective Ideas and Suggestions Good.
Nice
thnks a lot…some plugin not works in my site, i’ll try this manually…
alert(“Fuck”)
A very informative and appreciated article. I’m always looking for the little touches I can add for clients and this will definitely help.
It’s always the little touches that make the client really happy.
Most of the advanced styles and tricks here are new to me. Thanks a lot Pippin. :)
Nice info, thanks
this is great!
How about numbering comments as well?
There are several methods of numbering comments. I included a link to one method in the last section, “Going Further”.
http://wpengineer.com/numbering-your-comments-pingbacks-trackbacks-or-all/
Another really simple, though not nearly as good way is to style your ordered list such that the numbers of each item are shown. This will work for all but nested comments. In my css I declared it like this: li.authorcomment,li.comment{list-style:none;}. You could simple get rid of this declaration and use the default “ol” numbering.
Actually good post. I simply came across your current website as well as desired to state that I’ve truly loved surfing your site posts. In the end I’ll become registering to your current provide for and I also I do hope you post once again! Thank you!
Nice tips…
thanks for sharing
dakldjsa
good to see an article on advanced styles. great job. thanks souza@ fomaxtech
Wow, all in one! I won’t search in multiple sites anymore to re-stylish my comments’ section. This is a great-save-time-post.
Tk u!
Simply awesome!! Thanks a lot :-)
Wow, I didn’t realize that there was so much that you could do just with your comments. Thank you so much for the tips and advice.
I completely agree with the comments you are or when you create a blog we like to know that people think
Thank you very much for this.
Only just getting into using word press, I have only created one site with a news page and feed link so far. It must be said that the styling is not fantastic, I struggled finding my way around to certain areas and codes as I’m fairly new to PHP as well (I came from a graphic design background!)
So this is very useful indeed to me, as well as the going further links you posted. One thing I have seen on some blog comments is a styling that sets the background colour of each comment different so one plain the next grey etc etc. Have you got any resources for how this is done?
Damian, this is really quite easy. The CSS code I posted above accounts for alternating comment colors. Every comment, unless it belongs to the author or is a nested comment, is given a class of either “even” or “odd”. Style these classes with different background colors.
I posted a quick tip on how to do this on my site: http://pippinspages.com/css/alternate-comment-colors/
This is a test, please remove this comment!
Amazing! This is exactly was I was looking for my blog:) Thank You, Thank You, Thank You Pippin :p Your Tutorials are always very detailed and in deph.
Great work. Keep up:)
J.
Great! I’m glad you found it helpful.
Thanks for putting this up. Honestly, I never really noticed blog comments before I stumbled upon this blog. The design of this blog’s comment section stands out and because of that, I remember it compared to other blogs I come by. Thanks for showing the coding to making the comments section stand out. Definitely helps to add a little something special to a plain ol’ blog.
FINALLY one person who is putting up a working comments file. Excellent. Thank you!
Looks good Pippin – lots of info.
I don’t usually comment on posts that mention PHP coding… I just read the post then lie down in a darkened room. LOL
But this one caught my attention, especially the “Display Allowed Tags”
I’ve seen blogs that use this but I’ve never used it when I comment.
I’d be interested to know how many people use this facility when commenting and if it is worth adding.
Wow this is a really great article. Ever since I started learning how to design WP themes I have been having trouble finding posts that tell exactly how to create a nice comments template and style it. Now that I found it, I will definately share with some of my WP newbie friends.
Thanks!
Great, I hope all of you find it helpful.
i like your comment style too… i want to ask you about this (We DoFollow), What does it means… are you telling people your blog is DoFollow or its something else….
Do reply me
What was it like?
Has anyone heard of ECHO? It’s the next generation commenting system. It’s the way to share your content, and watch the live reaction. You can quickly embed Echo on WordPress, Blogger, or any website and turn your static pages into a real-time stream of diggs, tweets, comments and more. To see Echo in action visit http://www.NewIdeaTube.com and click on “Comment and Get Noticed” on the main page! Enjoy :)
Man, that was some Pippin tutorials. Sorry, I couldn’t resist, it has a nice ring to it. :) Best of all, for me anyway, it led me to something I’ve been wanting to do for a long time with is separating comments and trackbacks. I’ll read that post next, hopefully it’s a easy to follow as this was.
Very good article, I will stress this blog regularly because there are a quality content. I wish the same time take the opportunity to publish our video Our graphic design studio: http://www.youtube.com/watch?v=9yNdCFLLWks&feature=player_embedded
Pefecto! Excellent article and well explained. I seems more and more are pushing the boundaries of wordpress. It’s a clever platform but lacks this type of function!
Olá,
gostaria de convida-lo para conhecer o DiTudU. Sou editor e nele mostro diversos portfolios, concursos, ideias, animações, tabelas de preços e etc.
DiTudU:
http://www.blogditudu.com.br
Espero que goste!
Great post
Thanks a lot
Wonderful.. This is what we need… thanks for share this tricks
Thanks for the information you have provided here…this is really great…i love to read all the stuff in this site…the site is really awesome…great job dude
Thank you for this! Seriously! More power to this site! (^_^)
Great comments template for WP.
I’m glad you found it useful.
I was just looking for info about comment form. It’s the most puzzling file in a theme.
Great post and write up! I am definitely bookmarking this for my next WordPress project!
Keep up the good work.
oh …. beatiful,nice ….
the Moderation Links idea is really helpful thank you :) .
Good. It’s a little thing, but really can make moderating comments more efficient.
It’s very useful but it’s so difficult to beginner as me ,,
thanks again
Awesome post! I’m working on a WordPress site at the moment and I already found a very useful tip in this article!
Thanks for the post, enjoyed it.
Thanks for the post, enjoyed it.
It’s good to see that some bloggers are according so much attention to comments. there are other bloggers who are so fussy about how people should comment on their blog – no keyword, no-follow, etc – that it becomes a turn-off to comment.
Love love this
Thanks for cool toturial
Great post, it is so clear to follow, thanks.
I am new in wp, I try to learn it, thanks for your useful tips for comment
peopleeeeeeeeeeee
Very helpful post. Thanks!
Great tips and very easy to understand. This will definitely be very useful for me when I get a chance to start my blog. Thanks for the resource.
Thank you so much. Works like a charm.. BUT now it’s impossible to use Windows Live Writer after changing/adding the code to the functions.php file.
After removing it, publishing works again. Of course there is no real error message, only: “The response to the metaWeblog.editPost method received from the blog server was invalid: Invalid response document returned from XmlRpc server” inside Windows Live Writer :(
I’ve never used Windows Live Writer before, so I don’t have any incite into exactly what may be causing the problem. But you should try removing each snippet of code individually, and see if you can narrow down which piece is causing it to break.
Thank you, Pippin.
It’s definitely the “Custom Comment Callback” snippet. When I remove the snippet it’s working fine. Something seems very wrong with the code because I started getting error messages in WP admin when deleting comments after using the new snippet:
“Warning: Cannot modify header information – headers already sent by (output started at /html/wp-content/themes/xxx/functions.php:15) in /html/wp-includes/pluggable.php on line 868”
functions 15 is:
“<?php //this function will be called in the next section"
line 868 in pluggable.php is "header("Location: $location", true, $status);" (seems to be wp_redirect function).
Any idea? Is there no easy way to put all the stuff in the comments.php file instead of functions.php?
Thank you :-)
The error about header information is because you have a whitespace (or more) after or before a closing php tag. Check line 868 of your functions.php, most likely there is a blank line immediately after it. Delete that and it should work.
whitespace…. :o yes… unbelievable… and now the Windows Live Writer error is gone as well.
T-H-A-N-K Y-O-U very much, Pippin.
It’s really easy to miss and has definitely happened to me several times.
Hi I used this method and it works great on single.php, so it works for posts. But the REPLY link doesnt work for comments on pages. People can post comments but when Ive tried to reply to them I get this error: “addComment is undefined”
Have you found this Pippin? If so is there a fix? Im desperate to get this working but unsure why its happening. Ive got two websites running this comments system and have the same error on each.
Thanks
Is there more to the error, perhaps a line number and a filename?
Hi Pippin, yeh the error is on line:1 and no file name just the page the error occurs so: http://www.mysite.com/page-name/?replytocom=44#respond.
Line 1 is :
I dont get why it works on posts but not pages?
Ive just noticed that once1 comment is placed on a page the main comment form dissappears?
OK so if there is a comment on a page the comment form disappears and the reply link doesnt work anyway. I have found a fix:
There are two things you must do:
1. In comments.php replace
with this
2. In wp-includes/comment-template.php at line 1012 change
$comment = get_comment($comment);
$post = get_post($post);
to:
$comment = get_comment($comment);
$post = get_post($comment->comment_post_ID);
OK so if there is a comment on a page the comment form disappears and the reply link doesnt work anyway. I have found a fix:
There are two things you must do:
1. In comments.php replace
( comments_open() ) :
with this( comments_open() OR is_page() ) :
2. In wp-includes/comment-template.php at line 1012 change
$comment = get_comment($comment);
$post = get_post($post);
to:
$comment = get_comment($comment);
$post = get_post($comment->comment_post_ID);
Excellent. This is great to know. I’m glad you were able to find a fix that will probably be useful to a lot of people.
It took a bit of Googling and it was actually a problem some clever person fixed for the atahualpa theme, as I think its method for advanced comments is similar to this one.
Its good to share and I hope this helps other people. Ive also written the bug fix up on my blog effutio, so I never forget it!
yes agree with you
yes
thank you for sharing this…. ;)
I have a post about how to move the Reply link button to the end of comment thread. I think in some cases, this is desired behavior than placing it in the first comment of the thread as provided in the default WordPress installation.
For anyone who interested to know the trick, here is the link: http://suhanto.net/moving-reply-button-end-wordpress-comment-thread/
hey i used this and i love it look :) http://oh-dolly.info/2009/12/17/affiliate-clearout/#comments yay me :) anyways have you got a tut on how to style the comment form ??
I am trying to open the modified theme in dreamweaver to see how the code is in its complete state. However, it comes up with a warning:
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\8.wordpress\wp-content\themes\modified_default\functions.php:436) in C:\xampp\htdocs\8.wordpress\wp-includes\functions.php on line 790
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\8.wordpress\wp-content\themes\modified_default\functions.php:436) in C:\xampp\htdocs\8.wordpress\wp-includes\functions.php on line 791
I am using the latest version of wordpress.
Any ideas?
The error is because you have an empty line after or before a tag. Look at the very through your file and delete any blank lines after “?>”.
I have a new plugin in ‘WordPress comments’ area. I think I’d put the link here, who knows it can be useful to somebody.
This WordPress plugin/widget will display top commenters of your blog in the form of gravatar images. The images can be stacked up or listed in a sidebar box, linked to the commenter’s website. You can also change its behavior to display the current post commenters in a single post, also in the form of gravatar images.
The plugin can be downloded from the following address: http://suhanto.net/top-commenters-gravatar-widget-wordpress/
Great tips thanks for the article, it has be really useful
Great tips.. I like to ask some questions that you might able to help me out. I want to disable a comment box but want to keep the video comments only. How do I do that?
It would depend on what the video comment plugin is you’re using.
I use Katlura Video comment or Viddler Video comment. I saw one website that has successfully disabling the text comment and keep the video comments running. I wonder how we can do that?
Leaving a comment is the biggest support to Blogger.Thanks!
Wow that is a lot of tips I can use to improve my comment area, and hopefully get more interaction, like your blog here :)
Ive just noticed that once1 comment is placed on a page the main comment form dissappears?
It disappears completely? What if you refresh the page, or log out and back in?
Congratulations useful article! I wanted to ask why the form does not move in the comment to which an answer? thanks!
Can you elaborate a little more? I’m not sure I understand your question.
Sorry! Bad English… :) I’m italian. I would to say if is possible to move the form for input a comment, in the specific post when i click in the button “Reply”.
I’m testing the code you have made, but not work.
Every work fine! Any elements!
Thanks for this article! I am redesigning my blog at the moment.
It really helps when I am styling my blog’s comment section.
Is there a way to get Subscribe to Comments without a plugin?
Nice Post
Hey Pippin!
Great reading and great functionality. Thanks a lot. Been searching for a good walk-through for this in a long time.
Cheers,
no no
Implemented this tutorial a ways back. Love the results. I do notice tho that trackbacks are missing entirely. I’m sure that was by design. Was wondering how hard it would be to bring in the trackbacks? Preferably separated and under the comment reply box. I’ve found several tutorials, but…… they are based on the original comment code, so I can’t begin to figure out how to implement…..
Ya know….if ya get time! ;)
I usually do go through the spam filter, so even the simple fact you have a Gravatar
Hi Pippin
Nice post-but as usual it didn’t work for me-WordPress as you know, is my bette-noir!
With TwentyTen default commets.php code and your custom comment css I get a display resembling but not the same as your final comments page (not surprisingly).
With your comments.php code & your custom comments css again I get a final output resembling your final output and with these error messages thrown in:
Warning: call_user_func() expects parameter 1 to be a valid callback, function ‘advanced_comment’ not found or invalid function name in C:\xampp\htdocs\wordpress3\wp-includes\comment-template.php on line 1308
Warning: call_user_func() expects parameter 1 to be a valid callback, function ‘advanced_comment’ not found or invalid function name in C:\xampp\htdocs\wordpress3\wp-includes\comment-template.php on line 1308
Ha ha!
Keep up the good work! :-)
Buddy i also had this problem, copy the advanced_comment funtion from the fucntion code given above… copy that code and place it into your functions.php, so the call back funtion which is calling that function finds it there placed in the function.php and there you will go fine…
Thanks for the useful information. I have used to style the reply button below comments in my blog
After reading this article I am sure I can improve my wordpress blog a lot. This will help me.
I’ll try to implement some of these. Thanks for sharing Pippin.
你写的教程很不错,查了很多资料都没你写的详细,受教了 thanks!
你写的教程很不错,查了很多资料都没你写的详细,受教了 thanks
Hi, have you got any tip on removing the date from the comment section?
Remove line number 9 from the very first function in this tutorial.
Thanks for sharing the information. Keep us updated.
This is a nice post ! continue the good work!
Fabulous post. I entirely agree. Well put!
order Creative Suite 5
vista ultimate oem
cheap microsoft software
oem version
office oem version
autodesk discount
great article, i will apply this to my site. Thanks
Very helpful for my current project. Thank You.
Cool ideas! It’s always nice to dress up the comments section a little bit. I think it creates more of a professional look to the site.
hi, very impressive and helpfull
small bug i noted, opening div is not closed in advanced comment function in functions.php @ line 8.
thank you very much
i really aprreciate the way you high light some of the most important facts and figure on web 2.0..cheap textbooks is also following 2.0 standards.. i have used all the standards which i knew may be it is lacking some thing… can anyone suggest me what should i do to improve it more..
thanks
Nice post!!!
thanks for your work!
hi, Im traveling from Vegas to Chi-town and reading your blog on my pda and its showing up kind of unformatted so Im leaving a comment so I can come back and finish reading it later.
this is very good :D
good post ,thanks! This article was Very helpful. i like your website,I am fond of reading online punjabi news.
This is really helpful! These code sets work nicely. Thanks for sharing.
Perfect coding and attention to details! cheers!
Just would like to ask a question out of the topic. Why do this site does not include a search bar in case we want to search for a topic? What are your thoughts on this. Is search bar not “in”now?
Hi Pipin thanks for the article and it perfectly worked :) i just implemented it in my site… :)
But i hav one small issue… when i try to reply a comment the reply comment textbox is not opening below the comment to be replied, instead it is opening right at the bottom of all comments on page…
I tried all things but cant fix the issue frnd… pls have a look at site http://www.vijayfansclub.com/ and help me to solve it
Regards
Vjay
This is a great way to tweak wp comments manually. Sometimes using third party apps like Disqus will cause unwanted issues. Thanks for taking the time to write this. oh and amazing blog design too!!
Dear candidates,
Our employers are looking for freshers (2008,2009,2010) with MCA MBA MSc
Btec BSc candidates for new job openings in hyderabad, mumbai, delhi,
kolkatta, bangalore, chennai,
Post Resume
Really nice styles! Thank You!
your posts are very good quality. It can be seen from so many people who comment on this post. hopefully you can provide the best in the next posting. thank you..
thanks for the news. success always for you
Great post. Thank you! We found it very usefull
Agree Great post. Thank you!
Also have to agree. The compellation is just outstanding! Thank you
Excellent with the moss texture for land. At a first glance I thought this would be a super long and hard tutorial but you used some really smart techniques.
Thanks for post! it is very helpful information. :)
I have bookmarked this page and will return soon to hear additional about it
I am totally delighte with strong you blog greatly that warned me! God bless yo
great this is really informative.
It,s nice blog. success always for you
Hello
I have been checking out a few of your articles and i can state pretty nice stuff. I will surely bookmark your blog.
I enjoy learning from reading you blogs, although I am still learning all the lingo.
Can you please paste those few lines of code that have to be included in header.php for this to work? Threaded commenting works, but javascript doesn’t. It won’t place reply box below the comment I’m replying to.
make sure you have this in your heeader.php before the wp_head();
Sorry, formatting screwed up.
if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ );
Yeah, I already have that in header.php… Weird.
Well, if it’s not too much trouble, please take a look here:
http://www.bit.ly/ihTrVO
Everything is fine except it doesn’t move reply DIV below the comment I’m replying to.
Fixed. For some reason I had “” in single.php before .
Sorry for the multiposting, thanks for the great tutorial :)
Update:
There seems to be problem with something in single.php. I’ve just pasted content from original template single.php and commenting works. Div ID naming or something?
I’m not sure, but I’ve had trouble getting the comment reply form to work correctly with custom comment call backs as well.
Some really cool tricks.. will be implementing some in my next project. thank you for sharing.
Great work.
过来看看哦,嘿嘿。;-)
very very informative and problem solving. thanks for the post.
A very very thanks to all the authors who were indulged in developing such an easy and great UI code. Thanks a lot. And keep on the work.
Soccer is my favorite,so is David Beckham
Thanks :)
FASTEST SCENE RELEASE SITE | DIRECT FROM FTP TRACKERS !
http://www.releasescene.org
Current release added !
Display Allowed Tags – gut idee.
“One of to flourish using hypnosis to stop smoking is that they’re no withdrawal symptoms, ” Anderson said.
Great Tut thank you for sharing. It’s helped a lot with my redesign
This actually is indeed Awesome expertise having writing and many because of yahoo search engine choose up me on here. I liked reading your content and added to the book marks. The ideas you used to place up was clearly understandable. My husband additionally appreciated after studying this post. Let me undergo for more earlier.
hey thanks for the tutorial, can I directly use function comment_reply_link on the template, I mean, is it necessary to create the custom comment inside template function
Yes you can, but you do not have to.
im found error on line 60, any help?
What is the error?
yes, its work to may blog. thanks dude!
I appreciate you taking the effort to write this subject. Great line up. We will be linking to this on our site. Keep up the great writing.
I am grad you taking the effort to prepare this article. Great line up. We will be linking to this on our site. Keep up the excellent writing.
Nice job! Some cool tricks I can implement in my future projects…
Bookmarked. I’ll try to do this later at home. Very kind of you for sharing this.
-awan
Great tutorial! Just one thing, I cannot get comments by the author (myself) to display differently, it always displays as either the li.even or li.odd. I tried adding the classes you suggested but to no aveil.
Nice.
Stil need modification to get the right html verification :)
I’m so wet
Thanks for the steps, kinda hard for me to follow but all is well.
The wordpress reply to comment feature is so nice especially the reply button which is not on blogger blog but nevertheless you can still use some codes to include it on your blogger. Read it here http://bloggersfaq.blogspot.com/2011/09/how-to-add-reply-button-to-blogger.html
I am just curious what will be next. Usually people think only about themselves but this could really change because we have such people who partake their knowledge and informationrunner tips
Thank you! it looks hard but I set up up with a breeze =)
pikavippi The state of michigan includes a great number of brokers who will be competent on troubles to do with insurance and may therefore offer all of them with the information they could require about insurance throughout Mich. The actual insurance firm that you have picked to work with should be accommodating and turn into accommodate the particular interaction that works great for your cars. All signs the popularity the vertailu Mi has gotten, that plainly explains exactly why a lot more drivers get through the years been able to be able to guarantee 4 wheeled devices with insurance guidelines in Michigan.
I’m building a custom theme to take advantage of WordPress 3 (hope this article still applies), but geez, styling the comments section without some thorough research is impossible.
Your tutorial looks to be the closest to what I was looking for and will hopefully help me to sort out my comments just the way I like it.
Will report back with my master creation. Thanks for sharing your undoubtedly hard earned knowledge, Pippin.
fbfbfbfbf
pikavippi The state of michigan includes a great number of brokers who will be competent on troubles to do with insurance and may therefore offer all of them with the information they could require about insurance throughout Mich. The actual insurance firm that you have picked to work with should be accommodating and turn into accommodate the particular interaction that works great for your cars. All signs the popularity the vertailu Mi has gotten, that plainly explains exactly why a lot more drivers get through the years been able to be able to guarantee 4 wheeled devices with insurance guidelines in Michigan.run tips
Great post, I hope you can write more and more these great improation.I like this very much. my friend told me that this blog is competitive. i will read more.Thanks for sharing your article. I really enjoyed it.
pikavippi The state of michigan includes a great number of brokers who will be competent on troubles to do with insurance and may therefore offer all of them with the information they could require about insurance throughout Mich. The actual insurance firm that you have picked to work with should be accommodating and turn into accommodate the particular interaction that works great for your cars. All signs the popularity the vertailu Mi has gotten, that plainly explains exactly why a lot more drivers get through the years been able to be able to guarantee 4 wheeled devices with insurance guidelines in Michigan.run tipsrun tips
Interesting tutorial. I’m trying to get my head round php and these code snippets helped. They’re going in my library. Thanks for sharing this.
like the style of your blog very much
I’ve been using Discus comment system because i found it a bit too hard to custom the default system. This seem to make it easy to do so. Will test it out. Thank you for sharing Pippin!
We offer the Markelov`s simulator ! This electric massager is a result of long-term research in the sphere of anticellulite massage, muscle pain, traumas. It is manufactured in accordance with doctors’ recommendations. The massager consists of a programming device and electrode header. The pain-relief effect is based on the influence of electrical impulses. It regenerates tissues, softens hardened muscles, stretches and relaxes them. Try it, you will not regret!
Very nice hack. I highlighted author comments using this tutorial :)
Custom build website designs, web designers dorset.
Pretty section of content. I just stumbled upon your site and in accession capital to assert that I get in fact enjoyed account your blog posts. Anyway I will be subscribing to your feeds and even I achievement you access consistently rapidly.
It looks like you tend to be pretty up to date on this.
What version of WordPress does this tutorial apply to?
Yes, I was wondering about this too. I thought it was March 2012 but it was last year.
Under `Lay Out Your Template File` – I was able to replace it just fine but for some reason, `wp_list_comments` isn’t displayin’ the list of comments. Are you sure this will work on the latest wordpress? Let me know and thanks!
Thanks for that. I’ve managed to apply the comments to my blog :) keep up the good work!
I truly suchlike when you address this type of sundry internal your posts. Perhaps could you remain this?
Great article. I am always on the look out for new ideas that I can use on my blogs. It would be great if someone had the time to create a dictionary of plug ins and other super cool extras that can be utilised in a WordPress blog. If only I had the time I would love to take a project like that on.
The public rely on the toilet cleaners to keep the toilets fresh. The public rely on the trash-men to remove their unwanted garbage. The public rely on the fast-food trainee to provide them with easy, stress-free food. So recognize that there are those who need you to do a good job. Please don’t let them down。
Interesting tutorial. I’m trying to get my head round php and these code snippets helped. They’re going in my library. Thanks for sharing this.
Thanks for sharing helpful information, I really like your all post. I will bookmark your blog for future updates.
excellent tutorial for the advance wordpress. But it quit hard in terms of applying.
great piece, you missed a few spellin mistakes near the end tho lol
spot on stuff
Excellent tutorial. Very useful information. Thanks
How can i change the size of the avatars?
<?php echo get_avatar($comment,$size='48',$default='’ ); ?>
… seems to have no effect.
When i look up the source code in firebug i can see that there is generated a new class…
So it generates the avatar in 32*32px instead of the 48*48px like it should be.
This is the class which is generated from (whereever?!) and wich resizes the avatar to 32*32px
it won´t show up again …
ddd
What a great walkthrough! This was a complete lifesaver as I’ve been wracking my brain messing with my theme trying to get this to work and now it does thanks to you!
When you come down to price of these Bus air conditioner spare parts, you will be so amazing and value for money
http://www.cheapmontblancpenssaleus.com/montblanc-ingrid-bergman-pens-c-13.html
(duanxueyuan1)tomsoutletshop
Wonderful items from you, man. I have remember your stuff prior to and you are just
too wonderful. I actually like what you’ve acquired right here, really like what you’re stating and
the way wherein you say it. You make it entertaining and you
continue to care for to keep it smart. I can’t wait to read much more from you. This is actually a terrific web site.
Hi there, I discovered your web site via Google at the same time as looking for a similar subject, your web site came up, it seems great. I have added to favourites|added to bookmarks.
You actually make it appear so easy along with your presentation however I to find this matter to be actually one thing that I think I’d never understand. It sort of feels too complicated and extremely broad for me. I’m looking ahead to your next post, I will attempt to get the dangle of it!
Just write to the author to share, if you are interested in the hat just to my site to see!
Thank You !!!!!!!!!!!!!!!!!!!!!
What a great tutorial! I will be coming back to this page again and again. Like to see that wp_syntax plugin being used too.
Thanks for your blog. I just landed up in your blog and I really appreciate your blog. It is full of resourceful information.
I understand that one can add a class via the comment_class( ‘class-name’ ) function. What i cannot figure out is how to determine the comment author’s WP role and then add a class based on that.
I simply could not go away your site prior to suggesting that I really loved the standard info an individual provide for your guests? Is gonna be again steadily to investigate cross-check new posts
Peculiar article, just what I wanted to find.
Great tutorial friend. Thank you so much.
—
If you don’t see your avatars/gravatars like me…
go to functions.php and replace this code:
<?php echo get_avatar($comment,$size='48',$default='’ ); ?>
with this one:
I have the same problem. Will you be so kind to tell me the code?
I love the layout you have on your comments right now, is there anyway you would share the code? :)
oh please be so kind to tell me which line of code
Can you tell me which line of code to use?
—-Sorry–
I’m really sorry but I had some trouble getting my reply behind the right message
>_<
Don’t you have to enclose the HTML and CSS that’s in the functions.php file inside echo ”? I also have to contend with sidebar and widget codes in my functions.php file. The way it is right now, it throws out all kinds of php errors.
Thаnk yοu for sharing yоuг info.
I really aρpreciate your efforts and I ωill be waiting
for youг further write upѕ thаnk yоu once again.
The Middle Season 4 Episode 7 The Safe
Thanks for this! It really helped me A LOT. This article was very easy to follow!
Hey mate,
thanks for the post.
I was wondering if you know how to display the same comment box across different pages?
I want the same comments to show on 4-5 pages
Thanks in advance!
Hello, My name is Keisa. This tutorial is fabulous :)
I have a question though…if you don’t mind answering…
How can I make each comment separate from the other nested comment?
You know how the nested comments are inside of the parent comment, and then depth-3 and so on are nested inside of the other nested comments…I’d pretty much like all comments, parent and child to have their own background and border. without the parent background showing on the left…(hopefully that makes sense)
Please help, and thanks in advance.
-Keisa
Also, is there anyway to make the reply comment box positioned insite the comment li that the visitor wishes to reply to?
hi, i need a beautiful, eye-catching style for the comments on my forum,
just the style, not any programming code, any suggestion??
Why doesn’t this piece of code work with this comment tutorial?
php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ) ***
This code doesn’t work. Sorry for my previous comment…
Like this piece of code for comments section
It’s appropriate time to make a few plans for the longer term and it is time to be happy. I’ve read this put up and if I could I desire to counsel you few interesting things or advice. Perhaps you could write subsequent articles relating to this article. I desire to read even more things approximately it!
To show your comments in reverse order change line 25 of the comments.php to
wp_list_comments(‘type=comment&reverse_top_level=true&callback=codeit_advanced_comment’);
the important bit is the ‘reverse_top_level=true’
Hope that helps someone.
ooops sorry you may/will want to remove the ‘codeit_’ from that revised line it is put there as a prefix to the function to stop any possible conflicts.
One of the mysteries of the District of Columbia, along with there being no “J Street” in the alphabetical good north face outlet store locations warm enough grid in downtown Washington, is that there is no direct access between the White House and West Wing.
My acquaintance accredit your site and I appreciate it, it acceptable and altered with beginning online autograph . casino
Thanks to a really useful article
I really like what you guys are usually up too. This sort of clever work
and exposure! Keep up the awesome works guys I’ve added you guys to my own blogroll.
I beloved as much as you will obtain performed right here. The caricature is attractive, your authored material stylish. however, you command get bought an shakiness over that you wish be delivering the following. in poor health indubitably come further before once more as exactly the same just about very regularly within case you shield this increase.
of course like your web-site but you have to take a look at the spelling on several of your posts. Several of them are rife with spelling problems and I find it very bothersome to tell the truth then again I’ll definitely come again again.
You really make it appear really easy along with your presentation however I to find this topic to be really one thing which I feel I’d never understand. It kind of feels too complicated and extremely vast for me. I am looking forward for your subsequent publish, I will try to get the cling of it!
4564
i ne