This blog uses a modified Hemingway Reloaded theme but the theme is old and does not support nested comments and uses a customized way to display list of comments under a post instead of standard wp_list_comments(). Hence, when we decided to display nested comments, I needed to tweak comments.php in the theme for that and to use comment post form for reply too. Below is the experience of tweaking which I am sharing with you.
The wp_list_comments() function uses Walker_Comment class which extends Walker. The walker class has four abstract methods and we need to define them while extending the class. So I decided to extend Walker_Comment itself and override the four abstract methods.
As a first step the all code
-
foreach ... endforeach
in <ol id="comments">...</ol> was replaced with
As you can see there is the custom walker class called Walker_Sanisoft_comment which is passed to wp_list_comments(). Following is the basic stub I used for Walker_Sanisoft_Comment class which I got by reading through the code of Walker_Comment class
-
class Walker_Sanisoft_Comment extends Walker_Comment
-
{
-
function start_lvl(&$output, $depth, $args)
-
{
-
$GLOBALS['comment_depth'] = $depth + 1;
-
}
-
-
function end_lvl(&$output, $depth, $args)
-
{
-
$GLOBALS['comment_depth'] = $depth + 1;
-
}
-
-
function start_el(&$output, $comment, $depth, $args)
-
{
-
$depth++;
-
-
$GLOBALS['comment_depth'] = $depth;
-
-
{
-
-
return;
-
}
-
-
$GLOBALS['comment'] = $comment;
-
-
}
-
-
function end_el(&$output, $comment, $depth, $args)
-
{
-
}
-
}
After putting in the comments listing markup, code and adding 'reply' link etc in the new walker class, finally it looked like
-
class Walker_Sanisoft_Comment extends Walker_Comment
-
{
-
var $currentLevel = null;
-
-
function start_lvl(&$output, $depth, $args)
-
{
-
$GLOBALS['comment_depth'] = $depth + 1;
-
?>
-
<li>
-
<cite> </cite>
-
<div class="content" style="height: 2em;"> </div>
-
</li>
-
<?php
-
}
-
-
function end_lvl(&$output, $depth, $args)
-
{
-
$GLOBALS['comment_depth'] = $depth + 1;
-
}
-
-
function start_el(&$output, $comment, $depth, $args)
-
{
-
$depth++;
-
-
$GLOBALS['comment_depth'] = $depth;
-
-
{
-
-
return;
-
}
-
-
$GLOBALS['comment'] = $comment;
-
-
-
{
-
$this->currentLevel = $depth;
-
}
-
else
-
{
-
if (0 <$comment->comment_parent && 1 <$this->currentLevel && $this->currentLevel>= $depth)
-
{
-
?>
-
<li>
-
<cite> </cite>
-
<div class="content" style="height: 2em;"> </div>
-
</li>
-
<?php
-
}
-
-
$this->currentLevel = $depth;
-
}
-
?>
-
<li id="comment-<?php comment_ID(); ?>">
-
<?php
-
if (0>= $comment->comment_parent)
-
{
-
?>
-
<div class="clear" style="height: 25px;"></div>
-
<?php
-
}
-
?>
-
<cite>
-
<span class="gravatar" style="float: right; padding: 3px;"><?php echo get_avatar($comment, 40); ?></span>
-
<span class="author"><?php comment_author_link(); ?></span>
-
<span class="date"><?php comment_date('n.j.y'); ?> / <?php comment_date('g:ia'); ?></span>
-
</cite>
-
<div class="content" id="div-comment-<?php comment_ID() ?>" style="min-height: 46px;">
-
<div style="padding-left: <?php echo (2 * ($depth - 1)); ?>%">
-
<?php if ($comment->comment_approved == '0') : ?>
-
<em>Your comment is awaiting moderation.</em>
-
<?php endif; ?>
-
<?php comment_text(); ?>
-
<?php comment_reply_link(array_merge($args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'], 'respond_id' => 'comment-form'))); ?>
-
</div>
-
</div>
-
<span id="formHeading_<?php comment_ID(); ?>" style="display: none;">Leave a Reply to <a href="#comment-<?php comment_ID(); ?>"><?php echo get_comment_author(); ?></a></span>
-
<?php
-
}
-
-
function end_el(&$output, $comment, $depth, $args)
-
{
-
?>
-
</li>
-
<?php
-
}
-
}
So you can see if you want to use your own markup in the comments making a Walker class is the thing to do.
Next thing was to update comment post form to use for comment reply too with addition of some javascript. So I added id for form title as 'commentFormTitle', also replaced submit button and hidden field section from
-
<div class="formactions"> <a href="#">Preview your comment</a>
-
<input type="submit" name="submit" tabindex="5" class="submit" value="Add your comment" />
-
</div>
-
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
to
-
<input type="submit" name="submit" tabindex="5" class="submit" value="Add your comment" />
-
<?php cancel_comment_reply_link('Cancel reply'); ?>
-
<?php comment_id_fields(); ?>
. The default wp-includes/js/comment-reply.js didn't work for our need. Hence, I copied wp-includes/js/comment-reply.dev.js to the theme and modified it slightly. You can download it from here.
and everything works. Oh! it looks more complicated than it really is. You can try this tweak on any theme which doesn't have nested comments OR if you want to have your own markup and it should work.
Happy tweaking 
No comments yet.