Super Ginormous

Tag: Comments

  • WordPress 2.7 Comments Not Threading

    Wordpress Stacked LogoHaving problems getting WordPress 2.7 Comment Threading to work on your site? Unless you’re using one of the default themes provided with each version of WordPress, chances are your theme isn’t ready for comment threading when you upgrade to WordPress 2.7. To enable comment threading, you need to do the following:

    • Enable comment threads in your admin. Go to Settings > Discussion. Check the box next to Enable threaded (nested) comments __ levels deep. Save the changes and your blog can now support threaded comments.
    • Update your comments.php by replacing it with the one provided with the Default theme that comes with WordPress 2.7 (/wp-content/themes/default/comments.php) OR follow Otto’s instructions to add threading AND inline replies. (Obviously, before you go about changing any files in your theme, make a backup of your files before making any changes to your files. It’s possible that the comments.php file bundled with your theme could have been customized. Overwriting the file will cause you to lose any customizations.)
    • Once you’ve done the first 2 things, you’re pretty much ready to go. The only thing left is to update the styles to support nesting. I’ve done some of the heavy lifting for you… with my Wordpress 2.7 Comment Style Starters (#1, #2). Simply use the provided code in your theme’s stylesheet. If you’re more hands on, consider looking over this post on Stylizing WordPress 2.7 Nested/Threaded Comments to see the structure of the CSS.

    If you’re still having problems, let me know. I’m happy to help others as time permits. If you’d prefer not to do any of this yourself, and would like me to take care of it for you, I am available for a small fee ($15 via PayPal) to make the upgrade for you. All it would require is temporary Admin access to your site. If you’re unable to use the Theme Editor to modify files through your backend, FTP access would be required. Send an email to chris@cdharrison.com if you’re interested.

  • Stylizing Threaded/Nested Comments in WordPress 2.7

    WordPress 2.7 Comment Style Starters:

    Wordpress Stacked Logo

    One of the features I love in WordPress 2.7 is the ability to have threaded (nested) comments up to 10 levels deep. While viewing comments on this – or any WordPress 2.7-powered – site, you’ll notice a Reply button (assuming nested discussions are enabled). Clicking that will enable you to reply directly to that comment, keeping discussions in context.

    This is probably not all inclusive, but here is the basic structure for ol.commentlist as it exists in the Default theme’s comments.php. To take advantage of the new discussion features, I copied this file over to my own theme. (You’re more than welcome to roll your own.) For many of the elements, more than one class is used with it. Where applicable, I’ve chosen the most descriptive class (e.g. li.comment instead of li.alt) as the parent for child formatting.

    [css]
    ol.commentlist {}
    ol.commentlist li {}
    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.comment div.comment-author {}
    ol.commentlist li.comment div.vcard {}
    ol.commentlist li.comment div.vcard cite.fn {}
    ol.commentlist li.comment div.vcard cite.fn a.url {}
    ol.commentlist li.comment div.vcard img.avatar {}
    ol.commentlist li.comment div.vcard img.avatar-32 {}
    ol.commentlist li.comment div.vcard img.photo {}
    ol.commentlist li.comment div.vcard span.says {}
    ol.commentlist li.comment div.commentmetadata {}
    ol.commentlist li.comment div.comment-meta {}
    ol.commentlist li.comment div.comment-meta a {}
    ol.commentlist li.comment * {} – (p, em, strong, blockquote, ul, ol, etc.)
    ol.commentlist li.comment div.reply {}
    ol.commentlist li.comment div.reply a {}
    ol.commentlist li.comment ul.children {}
    ol.commentlist li.comment ul.children li {}
    ol.commentlist li.comment ul.children li.alt {}
    ol.commentlist li.comment ul.children li.bypostauthor {}
    ol.commentlist li.comment ul.children li.byuser {}
    ol.commentlist li.comment ul.children li.comment {}
    ol.commentlist li.comment ul.children li.comment-author-admin {}
    ol.commentlist li.comment ul.children li.depth-2 {}
    ol.commentlist li.comment ul.children li.depth-3 {}
    ol.commentlist li.comment ul.children li.depth-4 {}
    ol.commentlist li.comment ul.children li.depth-5 {}
    ol.commentlist li.comment ul.children li.odd {}
    ol.commentlist li.even {}
    ol.commentlist li.odd {}
    ol.commentlist li.parent {}
    ol.commentlist li.pingback {}
    ol.commentlist li.pingback div.comment-author {}
    ol.commentlist li.pingback div.vcard {}
    ol.commentlist li.pingback div.vcard cite.fn {}
    ol.commentlist li.pingback div.vcard cite.fn a.url {}
    ol.commentlist li.pingback div.vcard span.says {}
    ol.commentlist li.pingback div.commentmetadata {}
    ol.commentlist li.pingback div.comment-meta {}
    ol.commentlist li.pingback div.comment-meta a {}
    ol.commentlist li.pingback * {} – (p, em, strong, blockquote, ul, ol, etc.)
    ol.commentlist li.pingback div.reply {}
    ol.commentlist li.pingback div.reply a {}
    ol.commentlist li.pingback ul.children {}
    ol.commentlist li.pingback ul.children li {}
    ol.commentlist li.pingback ul.children li.alt {}
    ol.commentlist li.pingback ul.children li.bypostauthor {}
    ol.commentlist li.pingback ul.children li.byuser {}
    ol.commentlist li.pingback ul.children li.comment {}
    ol.commentlist li.pingback ul.children li.comment-author-admin {}
    ol.commentlist li.pingback ul.children li.depth-2 {}
    ol.commentlist li.pingback ul.children li.depth-3 {}
    ol.commentlist li.pingback ul.children li.depth-4 {}
    ol.commentlist li.pingback ul.children li.depth-5 {}
    ol.commentlist li.pingback ul.children li.odd {}
    ol.commentlist li.thread-alt {}
    ol.commentlist li.thread-even {}
    ol.commentlist li.thread-odd {}
    [/css]

    Here is the CSS I’m using to stylize my comments below. (You can see an example of the nesting here.) Even though a number of the selectors are currently unused, I am keeping them in place in the event I decide to do something with them in the future.

    I updated the following code to account for the presence of pingbacks in a comment thread. For my site, I used the more generic selector of ol.commentlist li instead of specifying a class (such as comment or pingback). This will allow pingbacks to be styled in much the same way as comments. The CSS above lets you target the types individually. (Which, if you wanted pingbacks to look different, you’d obviously would want to do.)

    [sourcecode language=”css”]
    ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
    ol.commentlist li { }
    ol.commentlist li.alt { }
    ol.commentlist li.bypostauthor {}
    ol.commentlist li.byuser {}
    ol.commentlist li.comment-author-admin {}
    ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
    ol.commentlist li div.comment-author {}
    ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
    ol.commentlist li div.vcard cite.fn { font-style:normal; }
    ol.commentlist li div.vcard cite.fn a.url {}
    ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
    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-size:9px; }
    ol.commentlist li div.comment-meta a { color:#ccc; }
    ol.commentlist li p { font-size:11px; margin:0 0 1em; }
    ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
    ol.commentlist li div.reply { font-size:11px; }
    ol.commentlist li div.reply a { font-weight:bold; }
    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 { border-left:5px solid #555; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
    ol.commentlist li ul.children li.depth-5 {}
    ol.commentlist li ul.children li.odd {}
    ol.commentlist li.even { background:#fff; }
    ol.commentlist li.odd { background:#f6f6f6; }
    ol.commentlist li.parent { border-left:5px solid #111; }
    ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
    ol.commentlist li.thread-alt { }
    ol.commentlist li.thread-even {}
    ol.commentlist li.thread-odd {}
    [/sourcecode]

    If you would like to learn more about the enhancements made in comments, here are a couple of sites you should check out for further information:

    WordPress 2.7 Comment Style Starters:

  • Disqus

    I disabled Disqus commenting on my site. As it stands now, it just doesn’t integrate fully enough into WordPress for me to be happy with it. I’ll see if I can migrate the handful of comments over to be on my site within the next day or so. I think Disqus has a lot of potential, but I just can’t get used to having it here.

    Update: I’ve re-enabled Disqus for the time being. Having trackbacks is a welcome addition.