in a blog type website or in an e-commerce website there needed a comment form and display comments list. In WordPress, there is provided a comment template by default and it can be customized 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 customized 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 a 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>