Refine Medium layout: wider hero image, reordered comments, thumbnail nav

comments.php

@@ -8,22 +8,41 @@ if (post_password_required()) {
 }
 ?>
 
-<div id="comments" class="comments-area reading-container">
+<div id="comments" class="comments-area reading-container mt-5">
+
+	<?php
+	// Move the comment form ABOVE the comments thread.
+	$commenter = wp_get_current_commenter();
+	$req = get_option('require_name_email');
+	$html_req = ($req ? " required='required'" : '');
+
+	$args = array(
+		'class_form' => 'comment-form mb-5',
+		'class_submit' => 'btn btn-secondary fw-bold text-uppercase mt-4 px-4 py-2',
+		'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title h4 font-sans mb-4 fw-bold">',
+		'title_reply_after' => '</h2>',
+		'comment_field' => '<div class="comment-form-comment mb-4"><label for="comment" class="form-label text-muted small text-uppercase tracking-wider fw-bold">Add a Perspective <span class="text-danger">*</span></label><textarea id="comment" name="comment" cols="45" rows="4" maxlength="65525" required="required" class="form-control border-0" style="background-color: #f1f3f5;"></textarea></div>',
+		'fields' => array(
+			'author' => '<div class="row g-3 mb-3"><div class="col-md-6 comment-form-author"><label for="author" class="form-label small fw-bold">Name ' . ($req ? '<span class="text-danger">*</span>' : '') . '</label><input id="author" name="author" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30" maxlength="245"' . $html_req . ' class="form-control bg-white" /></div>',
+			'email' => '<div class="col-md-6 comment-form-email"><label for="email" class="form-label small fw-bold">Email ' . ($req ? '<span class="text-danger">*</span>' : '') . '</label><input id="email" name="email" type="email" value="' . esc_attr($commenter['comment_author_email']) . '" size="30" maxlength="100" aria-describedby="email-notes"' . $html_req . ' class="form-control bg-white" /></div></div>',
+			'url' => '<div class="comment-form-url mb-4"><label for="url" class="form-label small fw-bold">Website</label><input id="url" name="url" type="url" value="' . esc_attr($commenter['comment_author_url']) . '" size="30" maxlength="200" class="form-control bg-white" /></div>',
+		),
+	);
+	comment_form($args);
+	?>
 
 	<?php if (have_comments()): ?>
-		<h2 class="comments-title">
+		<h2 class="comments-title mt-5 h5 font-sans border-bottom pb-3 mb-4">
 			<?php
 			$comment_count = get_comments_number();
 			if ('1' === $comment_count) {
 				printf(
-					esc_html__('One thought on &ldquo;%1$s&rdquo;', 'wisdom1'),
+					esc_html__('One Response', 'wisdom1')
-					'<span>' . get_the_title() . '</span>'
 				);
 			} else {
 				printf(
-					esc_html(_nx('%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comment_count, 'comments title', 'wisdom1')),
+					esc_html(_nx('%1$s Response', '%1$s Responses', $comment_count, 'comments title', 'wisdom1')),
-					number_format_i18n($comment_count),
+					number_format_i18n($comment_count)
-					'<span>' . get_the_title() . '</span>'
 				);
 			}
 			?>
@@ -35,7 +54,7 @@ if (post_password_required()) {
 				array(
 					'style' => 'ol',
 					'short_ping' => true,
-					'avatar_size' => 60,
+					'avatar_size' => 0,
 				)
 			);
 			?>
@@ -47,29 +66,11 @@ if (post_password_required()) {
 		// If comments are closed and there are comments, let's leave a little note, shall we?
 		if (!comments_open()):
 			?>
-			<p class="no-comments"><?php esc_html__('Comments are closed.', 'wisdom1'); ?></p>
+			<p class="no-comments text-muted small fw-bold"><?php esc_html__('Comments are closed.', 'wisdom1'); ?></p>
 			<?php
 		endif;
 
 	endif; // Check for have_comments().
-	
-	$commenter = wp_get_current_commenter();
-	$req = get_option('require_name_email');
-	$html_req = ($req ? " required='required'" : '');
-
-	$args = array(
-		'class_form' => 'comment-form mt-4',
-		'class_submit' => 'btn btn-secondary fw-bold text-uppercase mt-4 px-4 py-2',
-		'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title h4 font-sans mb-4 fw-bold">',
-		'title_reply_after' => '</h2>',
-		'comment_field' => '<div class="comment-form-comment mb-4"><label for="comment" class="form-label text-muted small text-uppercase tracking-wider fw-bold">Add a Perspective <span class="text-danger">*</span></label><textarea id="comment" name="comment" cols="45" rows="4" maxlength="65525" required="required" class="form-control bg-light border-0"></textarea></div>',
-		'fields' => array(
-			'author' => '<div class="row g-3 mb-3"><div class="col-md-6 comment-form-author"><label for="author" class="form-label small fw-bold">Name ' . ($req ? '<span class="text-danger">*</span>' : '') . '</label><input id="author" name="author" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30" maxlength="245"' . $html_req . ' class="form-control bg-white" /></div>',
-			'email' => '<div class="col-md-6 comment-form-email"><label for="email" class="form-label small fw-bold">Email ' . ($req ? '<span class="text-danger">*</span>' : '') . '</label><input id="email" name="email" type="email" value="' . esc_attr($commenter['comment_author_email']) . '" size="30" maxlength="100" aria-describedby="email-notes"' . $html_req . ' class="form-control bg-white" /></div></div>',
-			'url' => '<div class="comment-form-url mb-4"><label for="url" class="form-label small fw-bold">Website</label><input id="url" name="url" type="url" value="' . esc_attr($commenter['comment_author_url']) . '" size="30" maxlength="200" class="form-control bg-white" /></div>',
-		),
-	);
-	comment_form($args);
 	?>
 
 </div><!-- #comments -->

single.php

@@ -39,7 +39,7 @@ get_header(); ?>
 					<?php if (has_post_thumbnail()): ?>
 						<div class="post-thumbnail-full mb-5">
 							<?php the_post_thumbnail('full', array(
-								'class' => 'img-fluid w-100',
+								'class' => 'img-fluid article-hero-image rounded',
 								'style' => 'aspect-ratio: 16/9; object-fit: cover;'
 							)); ?>
 						</div>
@@ -71,11 +71,41 @@ get_header(); ?>
 			<div class="col-lg-8 col-xl-7">
 				<nav class="navigation post-navigation mt-5 border-top border-bottom py-4" aria-label="Posts">
 					<div class="row justify-content-between g-4">
-						<div class="col-sm-6 text-start">
+						<div class="col-md-6 text-start">
-							<?php previous_post_link('<div class="text-muted small fw-bold mb-1">Previous</div><div class="fw-bold">%link</div>', '%title', false, ''); ?>
+							<?php
+							$prev_post = get_previous_post();
+							if (!empty($prev_post)):
+								?>
+								<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"
+									class="text-decoration-none d-flex align-items-center gap-3">
+									<?php if (has_post_thumbnail($prev_post->ID)): ?>
+										<?php echo get_the_post_thumbnail($prev_post->ID, 'thumbnail', array('class' => 'post-nav-thumbnail shadow-sm')); ?>
+									<?php endif; ?>
+									<div>
+										<div class="text-muted small fw-bold mb-1 text-uppercase tracking-wider">Previous</div>
+										<div class="fw-bold text-dark lh-sm"><?php echo esc_html($prev_post->post_title); ?>
+										</div>
+									</div>
+								</a>
+							<?php endif; ?>
 						</div>
-						<div class="col-sm-6 text-end">
+						<div class="col-md-6 text-end">
-							<?php next_post_link('<div class="text-muted small fw-bold mb-1">Next</div><div class="fw-bold">%link</div>', '%title', false, ''); ?>
+							<?php
+							$next_post = get_next_post();
+							if (!empty($next_post)):
+								?>
+								<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>"
+									class="text-decoration-none d-flex align-items-center justify-content-end gap-3 text-end">
+									<div>
+										<div class="text-muted small fw-bold mb-1 text-uppercase tracking-wider">Next</div>
+										<div class="fw-bold text-dark lh-sm"><?php echo esc_html($next_post->post_title); ?>
+										</div>
+									</div>
+									<?php if (has_post_thumbnail($next_post->ID)): ?>
+										<?php echo get_the_post_thumbnail($next_post->ID, 'thumbnail', array('class' => 'post-nav-thumbnail shadow-sm')); ?>
+									<?php endif; ?>
+								</a>
+							<?php endif; ?>
 						</div>
 					</div>
 				</nav>

style.css

@@ -227,6 +227,10 @@ a:hover {
 	color: var(--brand-deep-midnight);
 }
 
+.comment-list .comment-author .says {
+	display: none;
+}
+
 .comment-list .comment-author img {
 	border-radius: 50%;
 }
@@ -296,3 +300,23 @@ a:hover {
 .footer-link:hover {
 	color: var(--brand-gold-leaf);
 }
+
+/* --- 5. Article Details Custom Styles --- */
+.article-hero-image {
+	width: 100%;
+}
+
+@media (min-width: 992px) {
+	.article-hero-image {
+		width: calc(100% + 20%);
+		margin-left: -10%;
+	}
+}
+
+.post-nav-thumbnail {
+	width: 80px;
+	height: 80px;
+	object-fit: cover;
+	border-radius: 4px;
+	flex-shrink: 0;
+}