Cool Tips

Maybe you know that since WordPress 2.7, your wordpress theme may have nested/threaded style with reply button and easy to follow looks.

But for many themes, you just see a reply link in your comments, not a button reply; or you may not have border around your comments.

Today I will teach you how to add nested/threaded style to your wordpress comment theme.

1. Go to your WordPress Dashboard->Settings -> Discussion and select Enable threaded (nested) comments X levels deep

2. If your theme already has threaded comments, you’ll see a Reply link on each comment. If not, continue following the steps below.

3. Add this code above <?php wp_head(); ?> in the header.php file (which is contained in your theme folder):

<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

4.Got to Appearance > Editor> Comments.php . Find and change these code:

<?php wp_list_comments(); ?>

into these code:

<?php wp_list_comments(‘avatar_size=44′); ?>

to make your comment’s avatar larger.

5. Go to Appearance -> Editor -> Style.CSS (this file maybe called with many difference names but in many case it’s called like that. You need to edit your main CSS file). Add these code to any where at you CSS file:

ol.commentlist { list-style:none; margin:0; padding:0; text-indent:0; }
ol.commentlist li { border:5px solid #ddd; height:1%; margin:0 0 10px; padding:

5px 7px 5px 57px; position:relative; }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { }
ol.commentlist li div.comment-author { padding:0 170px 0 0; }
ol.commentlist li div.vcard { font:bold 14px/1.4 helvetica,arial,sans-serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url { color:#c00; text-decoration:none; }
ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
ol.commentlist li div.vcard img.avatar { border:5px solid #ddd; left:7px;

position:absolute; top:7px; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font:bold 10px/1.4 helvetica,arial,

sans-serif; position:absolute; right:10px; text-align:right; top:5px; }
ol.commentlist li div.comment-meta a { color:#333; text-decoration:none; }
ol.commentlist li div.comment-meta a:hover { color:#000; }
ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0

 0 1em; }
ol.commentlist li ul { font:normal 12px/1.4 helvetica,arial,sans-serif;

list-style:square; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li div.reply { background:#999; border:2px solid #666;

border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;

color:#fff; font:bold 9px/1 helvetica,arial,sans-serif; padding:5px 10px;

  text-align:center; width:36px; }
ol.commentlist li div.reply:hover { background:#c30; border:2px solid #c00; }
ol.commentlist li div.reply a { color:#fff; text-decoration:none;

text-transform:uppercase; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {  }
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#f7f7f7; }
ol.commentlist li.odd { background:#fff; }
ol.commentlist li.parent { }
ol.commentlist li.pingback { }
ol.commentlist li.pingback.parent { }
ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

(These code are generated by Chris Harrison )

I want the border of avatar smaller so I edited this line:

ol.commentlist li div.vcard img.avatar { border:5px solid #ddd;

 left:7px; position:absolute; top:7px; }

into this:

ol.commentlist li div.vcard img.avatar { border:2px solid #ddd;
 left:7px; position:absolute; top:7px; }

 6. Now refresh your blog and try to use nested comment  

Related posts:

1. Top 20 should have WordPress plugins
2. Ways to become a professional and famous blogger
3. How to create an 125×125 ad box by using CSS and DIV
4. AdsMinded theme edited version
5. You think you can cheat Google Adsense?