How to Build Standard WordPress Comment Templates Without Breaking Site Responsiveness

Understanding WordPress Comment Template Hierarchy

WordPress employs a template hierarchy to determine which template file to use for displaying specific content. For comments, this hierarchy is relatively straightforward. The primary file responsible for displaying comments is comments.php. If this file doesn’t exist in your theme’s root directory, WordPress will fall back to index.php or other parent theme templates. However, for custom comment layouts, you’ll want to create a dedicated comments.php file.

Basic Structure of comments.php

The comments.php file typically contains a loop that iterates through each comment and displays its details. It also includes the comment form for users to submit new comments. Here’s a foundational structure:

<?php
/**
 * The template for displaying comments.
 *
 * This file contains the closing of the "container" div and everything else that follows to close a page.
 *
 * @link https://developer.wordpress.org/themes/template-files-section/post-templates/comments-template/
 *
 * @package Your_Theme_Name
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/*
 * If the current post is protected by a password and
 * the visitor has not yet entered the password we will
 * return early without displaying the comments.
 */
if ( post_password_required() ) {
	return;
}
?>

<!-- #comments -->
<div id="comments" class="comments-area">

	<?php if ( have_comments() ) : ?>
		<h2 class="comments-title">
			<?php
			$comment_count = get_comments_number();
			if ( 1 === $comment_count ) {
				esc_html_e( 'One thought on “', 'your-text-domain' );
			} else {
				printf( /* translators: %1$s is the number of comments. */
					esc_html( _n( '%1$s thought on “%2$s”', '%1$s thoughts on “%2$s”', $comment_count, 'your-text-domain' ) ),
					number_format_i18n( $comment_count ),
					'<span>' . get_the_title() . '</span>'
				);
			}
			?>
		</h2>

		<ol class="comment-list">
			<?php
				wp_list_comments( array(
					'style'      => 'ol',
					'short_ping' => true,
					'avatar_size' => 60,
				) );
			?>
		</ol><!-- .comment-list -->

		<?php
		// Are there comments to navigate through?
		if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
		?>
			<nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">
				<h1 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'your-text-domain' ); ?></h1>
				<div class="nav-previous"><?php previous_comments_link( '<span class="meta-nav">&larr;</span> ' . __( 'Older Comments', 'your-text-domain' ) ); ?></div>
				<div class="nav-next"><?php next_comments_link( __( 'Newer Comments', 'your-text-domain' ) . ' <span class="meta-nav">&rarr;</span>' ); ?></div>
			</nav><!-- #comment-nav-below -->
		<?php endif; // Check for comment navigation -->

	<?php endif; // End if comments -->

	<?php
	// If comments are closed and there is no existing comment,
	// leave a sentence to tell the user.
	if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
	?>
		<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'your-text-domain' ); ?></p>
	<?php endif; ?>

	<?php
	comment_form( array(
		'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
		'title_reply_after'  => '</h2>',
	) );
	?>

</div><!-- #comments -->

Styling Comments for Responsiveness

The default WordPress comment structure can become unwieldy on smaller screens. To ensure responsiveness, we need to apply CSS that adapts to different viewport sizes. This involves using relative units, media queries, and potentially flexbox or CSS Grid for layout.

Basic Comment List Styling

Let’s start with some fundamental CSS to style the comment list. We’ll target the .comment-list and individual comment items (.comment).

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list .comment {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid #eee;
    display: flex; /* Use flexbox for alignment */
    align-items: flex-start; /* Align items to the top */
    gap: 1em; /* Space between avatar and comment content */
}

.comment-list .comment:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.comment-author .avatar {
    border-radius: 50%; /* Make avatars circular */
    width: 60px; /* Match avatar_size in wp_list_comments */
    height: 60px;
    flex-shrink: 0; /* Prevent avatar from shrinking */
}

.comment-content {
    flex-grow: 1; /* Allow comment content to take up remaining space */
}

.comment-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 0.5em;
}

.comment-author .fn {
    font-weight: bold;
}

.comment-reply-link {
    font-size: 0.9em;
    text-decoration: none;
    color: #0073aa;
}

.comment-reply-link:hover {
    text-decoration: underline;
}

Responsive Adjustments with Media Queries

The flexbox layout above provides a good starting point for responsiveness. However, we might need to make further adjustments for very small screens, such as stacking the avatar and content vertically or reducing spacing.

/* For smaller screens, stack avatar and content */
@media (max-width: 480px) {
    .comment-list .comment {
        flex-direction: column; /* Stack vertically */
        align-items: center; /* Center items when stacked */
        text-align: center; /* Center text */
    }

    .comment-author .avatar {
        margin-bottom: 1em; /* Add space below avatar */
        flex-shrink: 1; /* Allow avatar to shrink if needed */
    }

    .comment-content {
        width: 100%; /* Ensure content takes full width */
    }

    .comment-meta,
    .comment-author .fn,
    .comment-reply-link {
        font-size: 0.85em; /* Slightly smaller font on very small screens */
    }
}

Styling the Comment Form

The comment form also needs to be responsive. We’ll apply styles to the form elements (input fields, textarea, and submit button) to ensure they adapt well.

.comment-form {
    margin-top: 3em;
    padding-top: 3em;
    border-top: 1px solid #eee;
}

.comment-form label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url {
    margin-bottom: 1.5em;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%; /* Full width for input fields and textarea */
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-size: 1em;
}

.comment-form textarea {
    min-height: 150px; /* Minimum height for the textarea */
    resize: vertical; /* Allow vertical resizing */
}

.comment-form .form-submit {
    margin-top: 1.5em;
}

.comment-form .submit {
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.comment-form .submit:hover {
    background-color: #005177;
}

Responsive Form Adjustments

For the comment form, we might want to adjust the layout of fields like author, email, and URL on smaller screens. Often, these are placed side-by-side on larger screens but should stack vertically on smaller ones.

/* Responsive adjustments for comment form fields */
@media (max-width: 768px) {
    .comment-form .comment-form-author,
    .comment-form .comment-form-email,
    .comment-form .comment-form-url {
        margin-bottom: 1em;
    }
}

@media (max-width: 480px) {
    .comment-form .comment-form-author,
    .comment-form .comment-form-email,
    .comment-form .comment-form-url {
        margin-bottom: 1.5em; /* Ensure sufficient spacing when stacked */
    }

    .comment-form .submit {
        width: 100%; /* Make submit button full width on small screens */
        padding: 12px 20px;
    }
}

Advanced Considerations: Nested Comments and Accessibility

When dealing with nested comments, the default indentation provided by wp_list_comments can be styled to be more visually appealing and responsive. Ensure that the indentation scales appropriately with screen size.

/* Styling for nested comments */
.comment-list .children {
    margin-left: 2em; /* Default indentation for nested comments */
    padding-left: 0;
    list-style: none;
}

/* Responsive indentation for nested comments */
@media (max-width: 768px) {
    .comment-list .children {
        margin-left: 1.5em;
    }
}

@media (max-width: 480px) {
    .comment-list .children {
        margin-left: 1em; /* Minimal indentation on very small screens */
    }
}

For accessibility, ensure sufficient color contrast for text and links, and that interactive elements (like the submit button) are keyboard-navigable. The use of semantic HTML within comments.php and proper ARIA attributes (often handled by WordPress core functions) is crucial.

Integrating comments.php into Your Theme

To use your custom comments.php file, you need to call it from your theme’s template files, typically single.php (for single posts) and page.php (for single pages) where comments are usually displayed. This is done using the comments_template() function.

<?php
// In single.php or page.php, before the closing