WordPress Theme Development – Comment Section and Replies

By Raddy in WordPress ·

In this video, you are going to learn how to create a custom article comment section using the WordPress API’s and on top of that, we are going to do the replies and we’ll add some SCSS to make it look pretty.

For the JavaScript bit of this tutorial, I will be using the jQuery library as it will make things so much easier for us and it’s already loaded in WordPress.

The full theme, with the new code updated, is also available on my GitHub page to download and use.

I know I did all of the code in one page, but if you would like to be a bit more organised I’ve given every script a title of where they should go. Obviously it’s up to you to decide how you organise your code.

First of all we have to start with single.php where we want to display the comments. I am using the comments_templat function which by default loads the comments.php page that you have to manually create.

<?php comments_template(); ?>

Now that we’ve linked the single.php and comments.php it’s time to start writing the wp_list_comments function which will help us to bring the comments to the page.

<div class="minimalist_comments">
	<ol class="commentlist">
	<?php wp_list_comments( 'type=comment&callback=theminimalist_comment&avatar_size=62&max_depth=2' ); ?>
	</ol>
</div>

Next we have the callback function which I named theminimalist_comment as my theme is called “TheMinimalist” theme.

<?php
function theminimalist_comment($comment, $args, $depth) {
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'div-comment';
	}?>
	
	<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>">
	
	<?php 
    if ( 'div' != $args['style'] ) { ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body"><?php
	} ?>
	
        <div class="comment-author vcard">
			<?php if ( $args['avatar_size'] != 0 ) {
                echo get_avatar( $comment, $args['avatar_size'] ); 
            } 
			printf( 
				__( '<cite class="fn">%s</cite> · <div class="comment-meta">%s %s</div> ' ), 
				get_comment_author_link(),
				get_comment_date(),
				get_comment_time() 
			); 
			?>
		</div>
		
		<?php if ( $comment->comment_approved == '0' ) { ?>
			<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em><br/>
		<?php } ?>

		<?php 
			// comment_text(); returns p
			echo "<p class='comment-text'>" . get_comment_text() . "</p>";
		?>

        <div class="reply">
		→
			<?php 
                comment_reply_link( 
                    array_merge( 
                        $args, 
                        array( 
                            'add_below' => $add_below, 
                            'depth'     => $depth, 
                            'max_depth' => $args['max_depth'] 
                        ) 
                    ) 
            ); ?>
		</div>
		
		<?php 
    		if ( 'div' != $args['style'] ) : ?>
		</div>

		<?php endif; }
?>

<?php if(comments_open()) : ?>
	<?php if(get_option('comment_registration') && !$user_ID) : ?>
		<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
		<?php else : ?>

		<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
			<?php if($user_ID) : ?>

				<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. 
	<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>

			<?php else : ?>

				<p>
					<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
					<label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label>
				</p>
				<p>
					<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
					<label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label>
				</p>

				<p>
					<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
					<label for="url"><small>Website</small></label>
				</p>

			<?php endif; ?>
			<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

			<p>
				<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
				<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
			</p>

			<?php do_action('comment_form', $post->ID); ?>
		</form>

	<?php endif; ?>
<?php else : ?>
	<p>The comments are closed.</p>
<?php endif; ?>

So far so good. Now we have to include our jQuery script to make the reply form work.

<script type="text/javascript">

jQuery('document').ready(function(){

	jQuery('.comment-reply-link').click(function(e) {
		e.preventDefault();

		let commentId = jQuery( this ).attr('data-commentid');
		console.log(commentId);

		jQuery('.reply-commentform, #commentform').remove();
		jQuery( this ).append().after(`
		
		<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" class="reply-commentform">
			<?php if($user_ID) : ?>
				<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>
			<?php else : ?>
				<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
				<label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p>
				<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
				<label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label></p>
				<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
				<label for="url"><small>Website</small></label></p>
			<?php endif; ?>
			<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
			<p>
			<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
			<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
			<input type="hidden" name="comment_parent" id="comment_parent" value="${commentId}">
			</p>
		</form>
		
		`);

	});
});

</script>

Finally we need to make our comments and form presentable. I am using SCSS here.

/* Comments */
#commentform {

    textarea {
        min-height: 200px;
        width: 100%;
    }

    input {
        width: 100%;
    }

    input[type="submit"] {
        background-color: #000;
        color: #fff;
    }

    input[type="submit"]:hover {
        background-color: $primary-color-hover;
        color: #fff;
    }
    

}

ol.commentlist {
    position: relative;
    padding: 0;
    list-style-type: none;
    list-style-position: inherit;

    .children {
        position: relative;
        list-style: none;
    }

    li.comment.depth-1  { border-bottom: 1px solid $secondary-color; }

    .comment-body { padding: 2em 0 1.2em 80px; }

    p.comment-text { margin: 0; }

    cite { text-transform: capitalize; font-weight: bold; font-style: normal;}

    .comment-meta {
        display: inline-block;
        font-size: smaller;
    }
    
    img.avatar {
        position: absolute;
        left: 0;
    }

    input[type="button"], input[type="submit"] {
        background-color: #000;
        color: $secondary-color;
    }

    form { margin-top: 4em; }
    .cm-name { text-transform: capitalize; }
    .comment-meta {
        color: $secondary-color;
    }

    .alert-approval {
        color: #155724;
        position: relative;
        padding: .75rem 1.25rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
  
}

That’s all. If you have any questions you should try to comment below 😁

GitHub: https://github.com/RaddyTheBrand/WordPress-Theme-Development-Comment-Section-and-Replies

Follow my YouTube channel for more Tutorials like this one. Thank you for watching and reading this article.

Functions reference: https://codex.wordpress.org/Function_Reference/wp_list_comments