Numbering comments with wp_list_comments

  • I recently installed a new theme on my blog & overall I’m happy with it, but one feature I’d like to add is a number before each comment. Perhaps this is something easy to do, but alas it’s beyond my WP know-how!

    Do you know how to add a number before each comment on an entry? Here is the code in my template:

    <ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li>
<div>
<div class="comment-author vcard">
<?php echo get_avatar( $comment, $size = '60' );  ?>
<cite class="fn"><?php comment_author_link() ?></cite>
<span class="says">says:</span>
</div>
<div class="comment-meta commentmetadata"> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?></a></div>
<?php comment_text() ?>
</div>
</li>
 <?php endforeach; ?>
</ol>
<div style="clear: both;"></div>
Viewing 5 replies - 1 through 5 (of 5 total)

  • Edit stylePurple.css (line 956)

    .commentlist li {
background-image:url(images/comment-bottom.gif);
background-position:left bottom;
background-repeat:no-repeat;
display:block;
float:left;
font-weight:bold;
list-style-image:none;
list-style-type:none;
margin:0;
padding:0 0 45px;
width:560px;
}

    Remove:

    display:block;
list-style-type:none;

    (line 946)

    .commentlist {
list-style-image:none;
list-style-type:none;
}

    Remove:
    list-style-type:none;

    Thread Starter bakingandbooks

    (@bakingandbooks)

    Thank you for your reply esmi!

    I made the modifications you suggested but still don’t see a number before each comment. For instance, on this post.

    Is there anything else I should change to make numbers show up? Here is what my comments css looks like right now:

    /* Begin Comments*/

.commentlist {
padding: 0px;
margin: 0px 0px 0px 17px;
width: 560px;
background-image: url(images/comment-bg.gif);
list-style-image: none;
float: left;
}

.commentlist li {
	font-weight: bold;
	width: 560px;
		background-image: url(images/comment-bottom.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
	padding: 0px 0px 45px 0px;
	margin: 0px;
	list-style-image: none;
	float: left;
	}

.commentlist li div {
	width: 540px;
	display: block;
	background-image: url(images/comment-top.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 10px;
	float: left;
}

.commentlist li .avatar {
	float: left;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
	}

.commentlist cite {
	font-size: 18px;
	float: left;
	font-style: normal;
	margin-left: 10px;
	margin-right: 6px;
	margin-top: 5px;
	font-weight: normal;
	}

.says {
display: none;
}

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	display: block;
	float: left;
	width: 90%;
	margin-left: 3%;
	}

#commentform p {
clear: both;
	}

.alt {
	margin: 0;
	padding: 10px;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentlist .children li {
	width: 90%;
	display: block;
	margin: 0px;
	background-color: #FDFDFD;
	background-image: url(images/comment-children-bg.gif);
	background-position: left;
	background-repeat: repeat-y;
	border: 1px solid #E2E2E4;
	overflow: hidden;
}

.commentlist .children li div {
width: 97%;
padding: 3%;
background-image: url(images/comment-children-top.gif);
background-repeat: no-repeat;
background-position: top left;
}

.commentlist .commentmetadata {
	font-weight: normal;
	float: left;
	margin: 5px 0px 0px 0px;
	display: block;
	clear: both;
	background-image: none;
	width: 90%;
	margin-left: 3%;
	}

.commentlist .vcard, .commentlist .children .comment-author, .commentlist .children .vcard, .commentlist .commentmetadata, .commentlist .children .comment-author, .commentlist .children .comment-meta   {
	background-image: none;
	width: 100%;
	padding: 0px !important;
}

.commentlist .reply, .commentlist .children .reply {
	float: right;
	background-image: none;
	width: 54px;
	height: 22px;
	margin-bottom: 0px;
	padding: 0px;
	margin-right: 10px;
	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.commentlist .reply a:link, .commentlist .reply a:hover, .commentlist .children .reply a:link, .commentlist .children .reply a:hover {
	background-image: url(images/reply.gif);
	width: 39px;
	height: 17px;
	display: block;
	color: #FFF;
	font-size: 8px;
	text-transform: lowercase;
	font-weight: normal;
	padding: 5px 0px 0px 15px;
	letter-spacing: 1px;
}

.commentlist .children li {
padding-bottom: 10px;
}

.commentlist .children li ul li {
padding-bottom: 10px;
background-color: #FFF;
}

#respond {
margin-top: 20px;
float: left;
background-image: none;
}

.commentlist #respond h3, .commentlist #respond a {
margin-left: 28px;
}

#comments {
line-height: 30px;
}

.children {
clear: both;
}

.children .commentmetadata, .children .vcard  {
	background-image: none;
}

.children textarea {
width: 90% !important;
}

.children input {
width: 80% !important;
}

#cancel-comment-reply-link {
display: block;
background-image: url(images/comment-close.gif);
width: 144px;
height: 21px;
padding: 5px 0px 0px 23px;
font-weight: normal;
color: #84878E;
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

#respond div {
background-image: none;
}

#submit {
width: 120px !important;
}

    Thank you for your help!

    Remove:
    list-style-type:none;

    from .commentlist and .commentlist li

    Thread Starter bakingandbooks

    (@bakingandbooks)

    Thanks Esmi!

    That fixed it, the numbers are showing up. Now I just have to figure out how to make them appear before the name for each comment. Right now the numbers are appearing all over the place… if I posted the comments.php code would you help me figure that out?

    Many, many thanks.

    Thread Starter bakingandbooks

    (@bakingandbooks)

    Looking around my site I just realized that the numbers show up perfectly in Firefox, don’t show up at all in IE and are all over the place in Safari. Ack! Any ideas how to fix this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Numbering comments with wp_list_comments’ is closed to new replies.