I don't Know your template code it is correct or no but your code contain error because you used error position to put comment template code
put the comment template code outside the loop and within the container class
like this
<?php get_header();?>
<div id="content">
<div class="right">
<div class="article">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<small><?php the_time('F jS, Y'); ?></small>
<?php the_content();?>
<br /><br />
<hr />
<br /><br />
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
<?php comments_template(); ?>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer();?>
My code
this code within comments.php file
<?php
/* Prevent the direct loading of comments.php */
if (!empty($_SERVER['SCRIPT-FILENAME']) && basename($_SERVER['SCRIPT- FILENAME']) == 'comments.php') {
die(__('You can not access this file directly.', 'Yallanpe-Theme'));
}
/* If the post is password protected then display text and return */
if(post_password_required()) : ?>
<h5>
<?php
_e('This Post is password protected, Enter the password to view the comments', 'Yallanpe-Theme');
return;
?>
</h5>
<?php endif;
/* If we have comments to display, we display them */
if(have_comments()) : ?>
<div id="comments-container">
<?php wp_list_comments( array('walker' => new YPE_walker_comment)); ?>
<script>
$(document).ready(function() {
$("#comments-container ul#comment-list li.depth-1 .comment-avatar img").addClass("img-thumbnail");
$("#comments-container ul#comment-list li.depth-1 ul.children .comment-avatar img").addClass("img-circle");
});
</script>
</div><!-- /#comments-container -->
<?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : ?>
<div class="comments-nav-section">
<h5 class="text-left"><?php previous_comments_link(__('← Older Comments', 'Yallanpe-Theme')); ?></h5>
<h5 class="text-right"><?php next_comments_link(__('Newer Comments →', 'Yallanpe-Theme')); ?></h5>
</div><!-- end comment-nav-section -->
<?php endif; ?>
<?php
/* If we don't have comments and the comments are closed, display a text */
elseif (!comments_open() && !is_page() && post_type_supports(get_post_type(), 'comments')) : ?>
<h5> <?php _e('Comments are Closed.', 'Yallanpe-Theme'); ?> </h5>
<?php endif;
/* Display the comment form */
comment_form();
?>
and this code below within functions.php (I used Bootstarp framework for comment form)
<?php
class YPE_walker_comment extends Walker_Comment {
var $tree_type = 'comment';
var $db_fields = array( 'parent' => 'comment_parent', 'id' => 'comment_ID' );
function __construct() { ?>
<h4>Comments</h4>
<ul id="comment-list">
<?php }
function start_lvl( &$output, $depth = 0, $args = array() ) {
$GLOBALS['comment_depth'] = $depth + 1; ?>
<ul class="children">
<?php }
function end_lvl( &$output, $depth = 0, $args = array()) {
$GLOBALS['comment_depth'] = $depth + 1; ?>
</ul>
<?php }
function start_el( &$output, $comment, $depth, $args, $id = 0 ) {
$depth++;
$GLOBALS['comment_depth'] = $depth;
$GLOBALS['comment'] = $comment;
$parent_class = (empty($args['has_children']) ? '' : 'parent'); ?>
<li <?php comment_class($parent_class); ?> id="comment-<?php comment_ID() ?>">
<div class="row">
<div class="col-sm-2">
<div class="comment-avatar">
<?php
$avatar_size = 80;
if ($comment->comment_parent != 0) { $avatar_size = 80; }
echo get_avatar($comment, $avatar_size);
?>
</div>
</div>
<div class="col-sm-10">
<div class="comment-header">
<?php
$reply_args = array(
'add_below' => $add_below,
'depth' => $depth,
'max_depth' => $args['max_depth']
);
?>
<ul id='author-time' class="list-inline">
<li><?php echo get_comment_author_link(); ?> </li>
<li class="pull-right text-muted"><?php comment_date(); ?> at <?php comment_time(); ?></li>
</ul>
<em>
<ul id="reply-delete" class="list-inline">
<li><?php comment_reply_link(array_merge($args, $reply_args)); ?></li>
<?php if (current_user_can('edit_post')) { $id = get_comment_ID(); ?>
<li><?php echo ' <a href="'.admin_url("comment.php?action=editcomment&c=$id").'">Edit</a>'; ?></li>
<li><?php echo ' <a href="'.admin_url("comment.php?action=cdc&c=$id").'">Delete</a>'; ?></li>
<li><?php echo ' <a href="'.admin_url("comment.php?action=cdc&dt=spam&c=$id").'">Spam</a>'; ?></li>
<?php } ?>
</ul>
</em>
</div>
<div class="comment-content">
<?php
if( !$comment->comment_approved ) : ?>
<em class="text-muted">
<?php _e('Your comment is awaiting moderation.', 'Yallanpe Theme'); ?>
</em>
<?php else: comment_text(); ?>
<?php endif; ?>
</div>
</div>
</div>
<?php }
function end_el( &$output, $comment, $depth = 0, $args = array() ) { ?>
</li>
<?php }
function __destruct() { ?>
</ul>
<?php }
}
function YPE_custom_comment_form($defaults) {
$comment_notes_after = '';
$defaults ['comment_notice_before'] = '';
$defaults ['comment_notes_after'] = $comment_notes_after;
$defaults ['id_form'] = 'commentform';
$defaults ['comment_field'] = '<p class="form-group">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"> <span class="glyphicon glyphicon-comment"></span></span>
<textarea class="form- control" name="comment" id="comment" cols="30" rows="10">
</textarea>
</div>
</div>
</p>';
$defaults ['label_submit'] = 'Submit Comment';
$defaults ['title_reply'] = '<section id="comment-form"><h4>Add Comment</h4></section>';
return $defaults;
}
add_filter ('comment_form_defaults', 'YPE_custom_comment_form');
function YPE_custom_comment_fields() {
$commenter = wp_get_current_commenter();
$req = get_option('require_name_email');
$aria_req = ($req ? " aria-required='true'" : '');
$fields = array(
'author' => '<div class="form-group">' .
'<p>'.
'<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>' .
'<input type="text" class="form-control" id="author" name="author" value="'. esc_attr($commenter['comment_author']) .'" '. $aria_req .' placeholder="Enter Your Name" />'.
'</div>'.
'</div>'.
'</p>'.
'</div>',
'email' => '<div class="form-group">' .
'<p>'.
'<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>' .
'<input type="text" class="form-control" id="email" name="email" value="'. esc_attr($commenter['comment_author_email']) .'" '. $aria_req .' placeholder="Enter Your Email" />'.
'</div>'.
'</div>'.
'</p>'.
'</div>',
'url' => '<div class="form-group">' .
'<p>'.
'<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span>' .
'<input type="text" class="form-control" id="url" name="url" value="'.esc_attr($commenter['comment_author_url']) .'" placeholder="Enter Your Website URL" />'.
'</div>'.
'</div>'.
'</p>'.
'</div>',
);
return $fields;
}
add_filter ('comment_form_default_fields', 'YPE_custom_comment_fields');
?>
