e33.io

Comments are a versatile feature for allowing discussions on posts and pages in WordPress. I currently don’t have comments open on my blog posts, but I want my themes to support them dynamically. The method below optimizes comments to conditionally display and enqueue styles on posts/pages only when comments are open or exist.

First add or update the theme support for comments in the theme’s functions.php file, within the after_setup_theme hook, with the code below.

add_theme_support( 'html5', array(
	'search-form',
	'comment-form', // support for the comment form
	'comment-list', // support for the comment list
	'gallery',
	'caption',
	'script',
	'style',
) );

Then register and enqueue a CSS file specifically for the comments in the theme’s functions.php file using the code below. Note that this conditionally enqueues the CSS file on each post/page only if comments are open, or if comments exist after comments are closed.

<?php
// register optimized styles 
function evo_register_optimized_styles() {
    wp_register_style( 'comments-optimized', get_template_directory_uri() . '/assets/css/comments.css' );
}
add_action('init', 'evo_register_optimized_styles');
// enqueue optimized styles 
function evo_enqueue_optimized_styles() {
    if ( is_singular() && comments_open() || is_singular() && get_comments_number() ) {
        wp_enqueue_style( 'comments-optimized' );
    }
}
add_action( 'wp_enqueue_scripts', 'evo_enqueue_optimized_styles' );

Then create a comments.css file in the directory as registered in the function above. A simplified example of the CSS uses the styles below.

.comments-area {
	margin: 2rem 0;
}
.comment-body {
	margin: 1.5rem 0;
}
.comment-metadata,
.comment-reply-link,
.comment-notes,
.logged-in-as {
	font-size: 0.875rem;
}
.comment-author .avatar {
	border-radius: 18px;
}
.children {
	margin-left: 3rem;
}
.comment-form label {
	display: block;
}

Then create a comments.php file in root theme directory like the example below. Note that this conditionally displays the comments section to each post/page only if comments are open, or if comments exist after comments are closed.

<?php if ( comments_open() || get_comments_number() ) { ?>
<?php if ( post_password_required() ) { return; } ?>
<div id="comments" class="comments-area">
	<?php if ( have_comments() ) : ?>
		<h3 class="comments-title">
			<?php comments_number( 'No Comments', 'One Comment', '% Comments' ); ?>
		</h3>
		<ol class="comment-list">
			<?php wp_list_comments( array( 'style' => 'ol', 'avatar_size' => 36, ) ); ?>
		</ol>
		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
			<nav class="comment-navigation">
				<h5><?php previous_comments_link( 'Older Comments ❯' ); ?></h5>
				<h5><?php next_comments_link( '❮ Newer Comments' ); ?></h5>
			</nav>
		<?php endif; ?>
		<?php if ( ! comments_open() && get_comments_number() ) : ?>
			<h4 class="no-comments"><?php _e( 'Comments are closed.' ); ?></h4>
		<?php endif; ?>
	<?php endif; ?>
	<?php comment_form(); ?>
</div>
<?php } ?>

Finally, add comments in the loop on single/page PHP files with the standard template tag below, typically at the bottom of the main content area.

<?php comments_template(); ?>