Nested (Threaded) Comments and Styling « Visible Invisibles Support Forum

Visible Invisibles Support Forum » WordPress Tips and Tricks

Nested (Threaded) Comments and Styling

(3 posts) (2 voices)

Started 2 years ago by Whesley McCabe
Latest reply from Whesley McCabe

Tags:

Since WordPress 2.7, a function has been made available to nest comments as threads. What's great is that WordPress takes care of all of the major parts of nesting comments, and gives the admins the ability to fully style each comment with CSS.

The only thing you have to do is modify your theme's comments.php file and replace the old loop with a single line of code:

<?php wp_list_comments('type=comment&style=div'); ?>

The rest is simple CSS.

Let's assume you have a post with comments like so:

1. I have a question (by Commenter 1)
     A. I have an answer (by Post Author)
          a. That answers my question (by Commenter 1)
     B. I have the same question (by Commenter 2)
          a. Here is the same answer I gave before (by Post Author)
               I. Thank you (by Commenter 2)
2. I have a different question (by Commenter 3)
     A. Here is the answer to that question (by Post Author)
     B. Here is a different answer (by Registered User)
          a. That is also correct (by Post Author)
          b. Here are some notes on this answer (by Registered User)
     C. Thank you both (by Commenter 3)
3. I just wanted to say thanks (by Commenter 4)

WordPress adds special classes to each comment depending on where it is nested in the comment list. These special classes can be referenced in your style.css file. Looking at the above layout, WordPress will use the following classes for each comment:

1. comment even thread-even depth-1 parent
     A. comment byuser comment-author-{authorname} bypostauthor odd alt depth-2 parent
          a. comment even depth-3
     B. comment odd depth-2 parent
          a. comment byuser comment-author-{authorname} bypostauthor even alt depth-3 parent
               I. comment odd depth-4
2. comment even alt thread-odd depth-1 parent
     A. comment byuser comment-author-{authorname} bypostauthor odd depth-2
     B. comment byuser comment-author-{username} even depth-2 parent
          a. comment byuser comment-author-{authorname} bypostauthor odd depth-3
          b. comment byuser comment-author-{username} even depth-3
     C. comment odd depth-2
3. comment even thread-even depth-1

Confused yet? Here's the important stuff you should remember:

When someone posts a comment that is not a reply, it is given the class depth-1. Any reply to a depth-1 comment is given the class depth-2. Any reply to depth-2 comments is considered depth-3, and so on.
When a registered user posts a comment, the comment is given the class byuser and comment-author-user-nicename. If the user's name is Peter Pan, the class will be called comment-author-peter-pan
When the post author comments or replies, the comment is given the class bypostauthor
The classes even, odd, and alt are unpredictable, but are still useful for alternating the background colors for the comments.

Here are some examples of how to use the classes:
All top-level (depth-1) comments should have a border:

div[class~="depth-1"] { border: 1px solid black; }

All nested comments (depth-2 to depth-4 — assuming comments are limited to 4 levels deep) should be nudged to the right:

div[class~="depth-2"], div[class~=["depth-3"], div[class~=["depth-4"] { margin-left: 5px; }

All comments by Peter Pan should be lime green text on dark green background:

div[class~="comment-author-peter-pan"] { color: #00ff00; background-color: #008000; }

All comments by the post author should be yellow text on dark blue background:

div[class~="bypostauthor"] { color: #ffff00; background-color: #000080; }

All even comments should have a white background:

div[class~="even"] { background-color: #ffffff; }

All odd comments should have a light gray background:

div[class~="odd"] { background-color: #eeeeee; }

Posted 2 years ago #

FMNcrazy
Member

So, we simply need to delete all whats currently inside comment.php and replace it with:
<?php wp_list_comments('type=comment&style=div'); ?> ??
Where will we place
div[class~="depth-1"] { border: 1px solid black; }
div[class~="depth-2"], div[class~=["depth-3"], div[class~=["depth-4"] { margin-left: 5px; }
and the likes? Thanks Admin.

Posted 2 years ago #

Whesley McCabe
Key Master

So, we simply need to delete whats currently inside comment.php and replace it with:
<?php wp_list_comments('type=comment&style=div'); ?> ??

Not quite. The old way to list comments looks something like this:

...
<?php if ($comments) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>

	<ol class="commentlist">

	<?php foreach ($comments as $comment) : ?>

		<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
			<?php echo get_avatar( $comment, 32 ); ?>
			<cite><?php comment_author_link() ?></cite> Says:
			<?php if ($comment->comment_approved == '0') : ?>
			<em>Your comment is awaiting moderation.</em>
			<?php endif; ?>
			

			<small class="commentmetadata"><a>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','  ',''); ?></small>

			<?php comment_text() ?>

		

	<?php
		/* Changes every other comment to a different class */
		$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
	?>

	<?php endforeach; /* end for each comment */ ?>

	

 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
		<!-- 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; ?>
...

The new way - the nested way - looks something like this:

...
<?php if ( have_comments() ) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?>
		<div class="alignright"><?php next_comments_link() ?>
	

	<ol class="commentlist">
	<?php wp_list_comments(); ?>
	

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?>
		<div class="alignright"><?php next_comments_link() ?>
	
 <?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; ?>
...

The navigation bits can be left out if you don't let WordPress break the comments into pages (which can be enabled / disabled on the Settings ► Discussion page). You should also make sure nested comments are enabled, which can be done on the same settings page.

As for the styling, it should be added to the end of your theme's style.css file.

Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.