Threaded Comments in WordPress 2.7

This was pretty quick and easy, really, you don’t even have to do much code, it’s more about styling the nested comments. First of all you have to switch them on in Settings – Discussion, then some slight theme modifications in header.php and the comments.php section. I don’t want to write about them here because it’s already written in the WordPress codex over here: Enhanced Comment Display.

Make sure you don’t skip the javascript modifications section, though I managed to get threded comments without it, but javascript makes it alive. It’s the code that is responsible for putting the reply form just below the comment you want to reply to on the fly, i.e. without having to reload and render a new page.

Now use Firebug to create and modify CSS on the comments page – just use your imagination and make it look good. The issues I had are:

• The textarea box was ~700px wide and it overlayed my sidebar when I tried to reply to someone. Changed that to 100% – looks good now
• The comments and replies are actually different elements. The comments are OL (ordered list) and the replies are UL (unordered list). The UL with the classname ‘children’ should have the margin-left, don’t mess that up.
• Threded comments can be lost without borders. I don’t really like how they look in the default theme, but my variant is a little bit of padding-left and border-left for the UL/OL commentlist/children LI elements.
• The ‘Reply’ anchor is not part of the comment and is not within the P tags, so I had to margin-left that separately.
• The comment form in a reply needs a margin-left, but doesn’t when you’re starting the thread. You can use something similar to this (.comment indicates that it’s a reply and #respond is the actual form):

  .comment #respond { margin-left: 42px; }
  

I guess that’s it. Questions and suggestions are welcome in the comments.