What’s up, WordPress whizzes? Ready to dip your toes into the ocean of customization? Today, we’re focusing on your website’s comments section. Out-of-the-box WordPress comments are, well, a bit vanilla. We’re here to add some sprinkles. Follow along and you’ll learn how to customize your WordPress comments layout. We’re talking PHP, CSS, and a whole lot of fun. Let’s do this!
First thing’s first: we need to locate the file responsible for the comments structure. This will be in your theme’s folder and is usually named comments.php.
If you’re new to theme files, here’s how to find it:
Appearance > Theme Editor.comments.php file and click on it to open.comments.php contains PHP code which forms the structure of your comments section. It might look intimidating at first, but don’t worry. We’ll break it down.
The file contains several key elements:
wp_list_comments(): This function outputs the list of comments.comment_form(): This function outputs the comment form.These are the two parts we’ll be focusing on.
To change the layout of the comments list, we’ll create a custom callback function for wp_list_comments(). This function controls the structure of each comment.
Here’s a basic example of a custom callback function:
function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php echo get_avatar($comment,$size='48'); ?>
<?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?>
</div>
<div class="comment-meta commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a>
<?php edit_comment_link(__('(Edit)'),' ','') ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>
<?php comment_text() ?>
</div>
</li>
<?php
}
To use your custom callback function, change wp_list_comments() in comments.php to this:
wp_list_comments('type=comment&callback=mytheme_comment');
Now your comments will be outputted using your custom callback function. Make any changes you need to suit your website!
To customize the form visitors use to leave a comment, we’ll provide an array of arguments to the comment_form() function.
Here’s an example of a custom comment_form():
$comments_args = array(
'title_reply'=>'Got Something To Say?',
'fields' => apply_filters('comment_form_default_fields', array(
'author' => '<p class="comment-form-author">' . '<label for="author">' . __('Name') . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="author" name="author" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>',
'email' => '<p class="comment-form-email"><label for="email">' . __('Email') . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="email" name="email" type="text" value="' . esc_attr($commenter['comment_author_email']) . '" size="30"' . $aria_req . ' /></p>',)
),
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x('Comment', 'noun') . '</label><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
'comment_notes_after' => '',
);
comment_form($comments_args);
This form has a custom prompt, fields for name and email, and a field for the comment itself. Customize as you like!
Last but not least, let’s make it look pretty! Add your own CSS to your theme’s style.css file to style your comments. Don’t forget to check how it looks on different screen sizes!
This could look something like this:
.comment-author .vcard {
font-size: 1.2rem;
font-weight: bold;
color: #007BFF;
}
.comment-meta .commentmetadata {
font-size: 0.8rem;
color: #6c757d;
}
.comment-form-author, .comment-form-email {
width: 100%;
padding: 10px;
}
.comment-form-comment {
width: 100%;
padding: 10px;
}
This CSS will increase the size of the author’s name, change its color, modify the comment metadata, and give padding to our input fields to make them look nice and roomy.
The whole code from comments.php including the custom callback function for the comments list, the custom comment_form(), and the styling would look something like this:
<!-- comments.php -->
<?php
// Custom callback function for comments list
function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php echo get_avatar($comment,$size='48'); ?>
<?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?>
</div>
<div class="comment-meta commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a>
<?php edit_comment_link(__('(Edit)'),' ','') ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>
<?php comment_text() ?>
</div>
</li>
<?php
}
// Custom comment form
$comments_args = array(
'title_reply'=>'Got Something To Say?',
'fields' => apply_filters('comment_form_default_fields', array(
'author' => '<p class="comment-form-author">' . '<label for="author">' . __('Name') . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="author" name="author" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>',
'email' => '<p class="comment-form-email"><label for="email">' . __('Email') . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="email" name="email" type="text" value="' . esc_attr($commenter['comment_author_email']) . '" size="30"' . $aria_req . ' /></p>',)
),
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x('Comment', 'noun') . '</label><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
'comment_notes_after' => '',
);
// Output comments list and form
wp_list_comments('type=comment&callback=mytheme_comment');
comment_form($comments_args);
?>
<!-- style.css -->
.comment-author .vcard {
font-size: 1.2rem;
font-weight: bold;
color: #007BFF;
}
.comment-meta .commentmetadata {
font-size: 0.8rem;
color: #6c757d;
}
.comment-form-author, .comment-form-email {
width: 100%;
padding: 10px;
}
.comment-form-comment {
width: 100%;
padding: 10px;
}
Remember to always make a backup of your original comments.php file before making any changes, just in case. Now, you’re all set to customize your comments layout like a WordPress master! 🚀
Enables the creation of unique, personalized landing pages at scale by offering unlimited placeholders for dynamic content.
Essential for crafting content-rich, unique pages for each visitor or target group, optimizing for local SEO, e-commerce variability, or specific event details.