Tutorial on how to create a WordPress comment template

in a blog type website or in a ecommerce website there needed a comment form and display comments list. In wordpress there is provided a comment template by default and it can be customised also no make the comment template step by step

first write the below code in a post or page template to get the default or customised comment form and list.

<?php
if ( comments_open() || get_comments_number() ) :
	comments_template();
endif;
?>

now start to make the custom comment template and for that first you need to create a comments.php file inside your theme folder and take a div and make return if password required or comment is not opened, inside the comments.php file which will be the container of the comment portion or area.


<?php
if ( post_password_required() || ! comments_open() ) {
return;
}
?>
<div id=”comments” class=”comments-container”>
</div>

Now inside the comment template there is two part the first part is the comment listing part ane the second part is the comment form part

The first part: the comment listing part

for the listing part first check if have comment for the post or page and inside that take a order list or any type of list you want, and inside that get the comment list with the argument and the argument will content the callback, style and short_ping,

the callback you van give any callback id you have created, the style denots the ol or any listtype you are using, and short_ping will be true or false and then pass the argument through calling the function wp_list_comments();

then make a pagination to show the older or newest comments , and also take that inside condition if have pagination else it will show if there is not sufficient comment for pagination

and then check if comment are opened or not and give a message if comment is not opened you van ommit that portion if you does not want to show any message if the comment is not opened.

now the code for desplay comment list is:


<?php if ( have_comments() ) : //checking if there is comments for the post or page ?>
<ol class=”commentlist”>
<?php
$comment_list_args = array(
‘callback’ => ‘codemystery_comments’,
‘style’ => ‘ol’,
‘short_ping’ => true,
);
wp_list_comments( $comment_list_args ); // get the comment lins inside ol
?>
</ol>
<?php if ( get_comment_pages_count() > 1 && get_option(‘page_comments’) ) : // are there comments to navigate through ?>
<div class=”comments-pagination”>
<p>
<?php
previous_comments_link( __(‘← Older Comments’, ‘codemystery’) );
echo ” “;
next_comments_link( __(‘Newer Comments →’, ‘codemystery’) );
?>
</p>
</div>
<?php endif; // check for comment navigation ?>

<?php if( ! comments_open() && get_comments_number() ) : ?>
<p class=”nocomments”>
<?php _e(‘Comments are closed.’ , ‘codemystery’); ?>
</p>
<?php endif; ?>
<?php endif; // have_comments() ?>

Now the second part is the comment form part

if you does not want to show the default vomment form of wordpress , you want to shoe your own with html part like bootstrap form then you need to create two array

the first argument array for the field html

and the second argument array is for the field veriation and the first arg array the field argument array have to pass through the second argument array the form attribute array

and then you need to pass the second argument array the form attribute array through the function calling comment_form();

The code for the comment form is:


<?php
$commenter = wp_get_current_commenter();
$req = get_option(‘require_name_email’);
$aria_req = ( $req ? ” aria-required=’true'” : ” );

$comment_field_args = array(
‘author’ => ‘<div class=”comment-form-author”>’ . ‘<label for=”author”>’ . __(‘Name’, ‘codemystery’) . ( $req ? ‘<span class=”required”>*</span>’ : ” ) . ‘</label><input id=”author” name=”author” type=”text” class=”full-width” value=”‘ . esc_attr( $commenter[‘comment_author’] ) . ‘”‘ . $aria_req . ‘ tabindex=”1″ /></div>’,
’email’ => ‘<div class=”comment-form-email”><label for=”email”>’ . __(‘Email’, ‘codemystery’) . ( $req ? ‘<span class=”required”>*</span>’ : ” ) . ‘</label><input id=”email” name=”email” type=”text” class=”full-width” value=”‘ . esc_attr( $commenter[‘comment_author_email’] ) . ‘”‘ . $aria_req . ‘ tabindex=”2″ /></div>’,
‘url’ => ‘<div class=”comment-form-url”><label for=”url”>’ . __(‘Website’, ‘codemystery’) . ‘</label>’ . ‘<input id=”url” name=”url” type=”text” class=”full-width” value=”‘ . esc_attr( $commenter[‘comment_author_url’] ) . ‘” tabindex=”3″ /></div><div class=”clear”></div>’
);

$comment_form_args = array(
‘logged_in_as’ => ‘<p class=”logged-in-as”>’ . __(‘Logged in as’, ‘codemystery’) . ‘ <a href=”‘ . get_option(‘siteurl’) . ‘/wp-admin/profile.php”>’ . $user_identity . ‘</a>. <a href=”‘ . wp_logout_url(apply_filters(‘the_permalink’, get_permalink( ))) . ‘” title=”‘ . __(‘Log out of this account’, ‘codemystery’) . ‘”>’ . __(‘Log out’, ‘codemystery’) . ‘</a></p>’,
‘comment_notes_after’ => ”,
‘title_reply’ => __(‘Leave a comment’, ‘codemystery’),
‘title_reply_to’ => __(‘Leave a reply to %s’, ‘codemystery’),
‘comment_field’ => ‘<label for=”comment”>’ . __(‘Message’, ‘codemystery’) . ‘</label><textarea name=”comment” id=”comment” rows=”7″ tabindex=”4″ class=”full-width” aria-required=”true”></textarea>’,
‘fields’ => apply_filters( ‘comment_form_default_fields’, $comment_field_args )
);
comment_form( $comment_form_args );
?>

Now here is the full code for comments.php file

<?php
/**
 * The template for displaying Comments.
 */

if ( post_password_required() || ! comments_open() ) {
	return;
}
?>

<div id="comments" class="comments-container">
	<?php if ( have_comments() ) : //checking if there is comments for the post or page ?>
		<ol class="commentlist">
			<?php
				$comment_list_args = array(
										'callback' => 'codemystery_comments',
										'style' => 'ol',
										'short_ping' => true,
									 );
				wp_list_comments( $comment_list_args ); // get the comment lins inside ol
			?>
		</ol>
		<?php if ( get_comment_pages_count() > 1 && get_option('page_comments') ) : // are there comments to navigate through ?>
			<div class="comments-pagination">
				<p>
					<?php 
					previous_comments_link( __('← Older Comments', 'codemystery') ); 
					echo " "; 
					next_comments_link( __('Newer Comments →', 'codemystery') ); 
					?>						
				</p>
			</div>
		<?php endif; // check for comment navigation ?>

		<?php if( ! comments_open() && get_comments_number() ) : ?>
			<p class="nocomments">
				<?php _e('Comments are closed.' , 'codemystery'); ?>
			</p>
		<?php endif; ?>
	<?php endif; // have_comments() ?>

	<?php
	$commenter = wp_get_current_commenter();
	$req = get_option('require_name_email');
	$aria_req = ( $req ? " aria-required='true'" : '' );

	$comment_field_args = array(
								'author' => '<div class="comment-form-author">' . '<label for="author">' . __('Name', 'codemystery') . ( $req ? '<span class="required">*</span>' : '' ) . '</label><input id="author" name="author" type="text" class="full-width" value="' . esc_attr( $commenter['comment_author'] ) . '"' . $aria_req . ' tabindex="1" /></div>',
								'email' => '<div class="comment-form-email"><label for="email">' . __('Email', 'codemystery') . ( $req ? '<span class="required">*</span>' : '' ) . '</label><input id="email" name="email" type="text" class="full-width" value="' . esc_attr(  $commenter['comment_author_email'] ) . '"' . $aria_req . ' tabindex="2" /></div>',
								'url' => '<div class="comment-form-url"><label for="url">' . __('Website', 'codemystery') . '</label>' . '<input id="url" name="url" type="text" class="full-width" value="' . esc_attr( $commenter['comment_author_url'] ) . '" tabindex="3" /></div><div class="clear"></div>'
						  );


	$comment_form_args = array(
				'logged_in_as' => '<p class="logged-in-as">' . __('Logged in as', 'codemystery') . ' <a href="' . get_option('siteurl') . '/wp-admin/profile.php">' . $user_identity . '</a>. <a href="' . wp_logout_url(apply_filters('the_permalink', get_permalink( ))) . '" title="' . __('Log out of this account', 'codemystery') . '">' . __('Log out', 'codemystery') . '</a></p>',
				'comment_notes_after' => '',
				'title_reply' => __('Leave a comment', 'codemystery'),
				'title_reply_to' => __('Leave a reply to %s', 'codemystery'),
				'comment_field' => '<label for="comment">' . __('Message', 'codemystery') . '</label><textarea name="comment" id="comment" rows="7" tabindex="4" class="full-width" aria-required="true"></textarea>',
				'fields' => apply_filters( 'comment_form_default_fields', $comment_field_args )
			);
	comment_form( $comment_form_args );
	?>
</div>
Please comment and share to improve the site more and give advice to make the site better or any information you need

Thanks for Reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.