Custom HTML for Comments Section in WordPress Theme
While creating a custom WordPress theme, most developers come across the complicated task of working out the WordPress template. More than that, the default comment templates are never easy to modify or customize. If you are trying to design a WordPress theme and are stuck while giving your comments a customized look, you should read. In this article, we will discuss how you can customize a call-back template that WordPress uses for your comment structure.
For developers: While designing a theme for WordPress, or any other platform, it is best to let the default comment design stay as it is to ensure that there are no conflicts with the third-party plugins. Whether you are migrating from HTML to WordPress theme or creating a new theme altogether, the following steps will work in all the cases.
Following are the steps that you need to follow:
Step 1: Create a new file newer-comments.php
In the first step, create a new file with the name of your choice (we will use newer-comments.php in the demo code), and paste the code snippet below:
<?php
// my custom comments output html
function newer_comments( $comment, $args, $depth ) {
// Get correct tag used for the comments
if ( ‘div’ === $args[‘style’] ) {
$tag = ‘div’;
$add_below = ‘comment’;
} else {
$tag = ‘li’;
$add_below = ‘div-comment’;
} ?>
<<?php echo $tag; ?> <?php comment_class( empty( $args[‘has_children’] ) ? ‘’ : ‘parent’ ); ?> id=”comment-<?php comment_ID() ?>”>
<?php
// Switch between different comment types
switch ( $comment->comment_type ) :
case ‘pingback’ :
case ‘trackback’ : ?>
<div class=”pingback-entry”><span class=”pingback-heading”><?php esc_html_e( ‘Pingback:’, ‘textdomain’ ); ?></span> <?php comment_author_link(); ?></div>
<?php
break;
default :
if ( ‘div’ != $args[‘style’] ) { ?>
<div id=”div-comment-<?php comment_ID() ?>” class=”comment-body”>
<?php } ?>
<div class=”comment-author vcard”>
<?php
// Display avatar unless size is set to 0
if ( $args[‘avatar_size’] != 0 ) {
$avatar_size = ! empty( $args[‘avatar_size’] ) ? $args[‘avatar_size’] : 70; // set default avatar size
echo get_avatar( $comment, $avatar_size );
}
// Display author name
printf( __( ‘<cite class=”fn”>%s</cite> <span class=”says”>says:</span>’, ‘textdomain’ ), get_comment_author_link() ); ?>
</div><! — .comment-author →
<div class=”comment-details”>
<div class=”comment-meta commentmetadata”>
<a href=”<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>”><?php
/* translators: 1: date, 2: time */
printf(
__( ‘%1$s at %2$s’, ‘textdomain’ ),
get_comment_date(),
get_comment_time()
); ?>
</a><?php
edit_comment_link( __( ‘(Edit)’, ‘textdomain’ ), ‘ ‘, ‘’ ); ?>
</div><! — .comment-meta →
<div class=”comment-text”><?php comment_text(); ?></div><! — .comment-text →
<?php
// Display comment moderation text
if ( $comment->comment_approved == ‘0’ ) { ?>
<em class=”comment-awaiting-moderation”><?php _e( ‘Your comment is awaiting moderation.’, ‘textdomain’ ); ?></em><br/><?php
} ?>
<div class=”reply”><?php
// Display comment reply link
comment_reply_link( array_merge( $args, array(
‘add_below’ => $add_below,
‘depth’ => $depth,
‘max_depth’ => $args[‘max_depth’]
) ) ); ?>
</div>
</div><! — .comment-details →
<?php
if ( ‘div’ != $args[‘style’] ) { ?>
</div>
<?php }
// IMPORTANT: Note that we do NOT close the opening tag, WordPress does this for us
break;
endswitch; // End comment_type check.
}
This is only a demo template that you can start with, and it includes the primary output. It also includes some extra divs, which will help in easier styling.
Step 2: Now include your newer-comments.php template
Include the newly created file newer-comments.php inside the child or the parent theme and go to your functions.php file. Next, use the require_once function to load the file. Following code snippet is an example of the step:
// Include better comments file from a Parent theme
require_once get_parent_theme_file_path( ‘/functions/newer-comments.php’ );
// Or include via a child theme
require_once get_stylesheet_directory() . ‘/functions/newer-comments.php’;
Step 3: Add newer comments callback to wp_list_comments
In the next step, we need to tell WordPress that from now onwards, it will be using our custom-made template for displaying the comments:
For the parent theme: In WordPress template customization, if you are working on parent theme, then you will want to edit your wp_list_comments function to add the callback in then arguments in the following manner:
<?php
// Display comments
wp_list_comments( array(
‘callback’ => ‘newer_comments’
) ); ?>
For the child theme: In case you are working with a child theme or a plugin and you are interested in filtering the comment html output, then you need to use the wp_list_comments_args filter and pass the callback as shown below:
// Filter the comment list arguments
add_filter( ‘wp_list_comments_args’, function( $args ) {
$args[ ‘callback’ ] = ‘newer_comments’;
return $args;
} );
In both cases, we are referencing the function name we used in step 1 (newer_comments).
Step 4: Tweaking the custom HTML Output
If you successfully completed the above steps, then WordPress will now use newer_comments function for the comment HTML output in the theme. While you can also use the wp_list_comments function, you can also edit the code that shows each comment. Now you are all set to enjoy the fruits of your hard work in WordPress template customization, and you can edit the function to make the WordPress comments look the way you want them to.
Some other cool stuff that you can do are explained as below:
Display regular comments and the pingbacks differently
If you look at the code carefully, you will notice the switch statement that has been used to display the pingbacks or trackbacks differently. Though it is generally recommended to disable the pingbacks, if you intend to use them, you can always do it using the switch statement.
Display a ‘badge’ for the comment user
If yours is a community blog, where the users can login to comment, then you can give them customized badges and it can also display the role of the user on the page. You can assign different badges for author, admin, subscriber, contributor, etc. You can do it by using the code below:
global $wp_roles;
if ( $wp_roles ) {
$user_id = $comment->user_id;
if ( $user_id && $user = new WP_User( $user_id ) ) {
if ( isset( $user->roles[0] ) ) { ?>
<div class=”comment-user-badge <?php echo esc_attr( $user->roles[0] ); ?>”><?php esc_html( translate_user_role( $wp_roles->roles[ $user->roles[0] ][‘name’] ) ); ?></div>’
<?php }
} else { ?>
<div class=”comment-user-badge guest”><?php esc_html_e( ‘Guest’, ‘textdomain’ ); ?></div>
<?php }
}
Change the size of the Gravatar
We know you saw this one coming in the article, so here it is. You can also change the size of the Gravatar with your newer comments. You can do so through the wp_list_comments array using the manual method or by wp_list_comments_filter. If you are designing an HTML to WordPress theme, then you surely need to try it once.
Highlight the comments of the Author
Whether it is a community blog or any other website, we often notice that the author comments are highlighted. Well, it has less to do with the custom comment output, but many themes do not have it as a default feature. In your comment class output, all the comments made by the Author will include the bypostauthor_classname, and you can highlight them in a simple manner:
.by post author {background: #ffff99;}
Conclusion
So far, we have discussed a lot of things that you can do with the comment section of your WordPress page. It is worth mentioning that the way comments are depicted on our WordPress page says a lot about the overall reputation of the page. Please note that the file names used in the codes shown in this article may differ from user to user, and you can choose a file name of your choice.
