Enabling comments

The original incarnation of this blog had comments, but I switched them off at some point. Presumably I was fed up of spam comments. I get some great feedback on posts but it’s a shame these are hidden away in my email inbox. So I’ve opened up comments again.

I briefly explored the ActivityPub plugin which allows you to receive comments from federated platforms such as Mastodon. I don’t fully understand it so decided against using the plugin for now.

I opted for an easier solution: WordPress comments. I use a bespoke WordPress theme that didn’t have support for comments out of the box but adding them was straight forward. I prefer to overwrite the default WordPress markup where possible, using the BEM class naming convention.

To add comments, I first added the following to single.php:

<?php
if (comments_open()):
	comments_template();
endif;
?>Code language: PHP (php)

The code above checks if a post has “Allow comments” checked, then loads the contents of comments.php.

comments.php looks like this:

<section class="comments">
	<div class="comments__inner">
		<?php if(have_comments()): ?>
			<div class="comments__header">
				<h2 class="comments__title"><?php echo get_comments_number(); ?> responses to "<?php echo get_the_title(); ?>"</h2>
			</div>
			<ol id="comments" class="comments-list">
			<?php
				wp_list_comments([
					'style'			=> 'ol',
					'type'			=> 'comment',
					'reverse_top_level'	=> true,
					'callback' 		=> 'mj_blog_comments',
				]);
			?>
			</ol>
		<?php endif; ?>
		<?php
			comment_form(array(
				'label_submit'	=> 'Post comment',
				'title_reply'	=> 'Write a comment'
			));
		?>
	</div>
</section>Code language: HTML, XML (xml)

The code above is the comments section you can see at the bottom of this post. It’s adding a heading, the list of comments and the comment form.

To customise the markup of comments, I’m passing a callback function to wp_list_comments.

In functions.php, I added the following line:

require_once( 'lib/comments.php' );Code language: PHP (php)

And then inside lib/comments.php, added the following:

<?php
/**
 * Custom comment callback
 */

function mj_blog_comments() {

$comment_author_email = get_comment_author_email();
$comment_author_gravatar = get_avatar( $comment_author_email, 160 ); ?>

<li class="comment" id="comment-<?php comment_ID() ?>">
	<div class="comment__header">
		<?php if ($comment_author_gravatar): ?>
			<div class="comment__avatar"><?php echo $comment_author_gravatar; ?></div>
		<?php endif; ?>
		<p class="comment__meta">
			<cite>
				<?php if(get_comment_author_url()): ?>
					<a href="<?php echo get_comment_author_url(); ?>" class="comment__author-link" target="_blank"><?php echo get_comment_author(); ?></a>
				<?php else: ?>
					<span class="comment__author"><?php echo get_comment_author(); ?></span>
				<?php endif; ?>
			</cite>
			<span class="comment__date"><?php echo human_time_diff(get_comment_time('U'), current_time('timestamp')); ?> ago</span>
		</p>
	</div>
	<div class="comment__body">
		<?php echo comment_text(); ?>
		<?php
			comment_reply_link([
				'add_below' => true,
				'depth'     => 20,
				'max_depth' => 200,
				'reply_text' => '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M760-200v-160q0-50-35-85t-85-35H273l144 144-57 56-240-240 240-240 57 56-144 144h367q83 0 141.5 58.5T840-360v160h-80Z"/></svg> Reply'
			]);
		?>
	</div>
</li>

<?php } ?>
Code language: HTML, XML (xml)

The final step was to style the comments using some CSS. Oh, and install Akismet to hopefully handle all that spam.

Write a comment

Your email address will not be published. Required fields are marked *