Author: Dawid Adach
Comments
Another significant part of each blog are its comments. They let our readers express their thoughts on our content and share it with others. In the previous lesson, we placed a comment
- Create a new file inside the inc folder called
template-tags.inc.phpand paste in the following code: - Update
functions.phpin order to include the file we have just created: - Create another file called
comments.phpin our main folder of the theme: - Update the
single.phpfile and replace the current comment and reply markup: (lines 142-251) - with the following function:
<?php
if ( !function_exists( 'shape_comment' ) ) :
/**
* Template for comments and pingbacks.
*
* Used as a callback by wp_list_comments() for displaying the comments.
*
* @since Shape 1.0
*/
function shape_comment( $comment, $args, $depth ) {
$GLOBALS[ 'comment' ] = $comment;
switch ( $comment->comment_type ) :
// case 'pingback' :
case 'trackback' :
?>
<div class="post pingback">
<p><?php _e( 'Pingback:', 'shape' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( '(Edit)', 'shape' ), ' ' ); ?></p>
</div>
<?php
break;
default :
?>
<?php
if ( $depth > 1 ) {
echo '<div class="media d-block d-md-flex ml-5">';
}
?>
<div class="media d-block d-md-flex mt-4" <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<?php if($comment->user_id) { ?>
<?php echo get_avatar( $comment, null, $default, $alt, array( 'class' => array( 'd-flex', 'mb-3', 'mx-auto' ) ) ); ?>
<?php } else { ?>
<span>
<?php echo get_avatar( $comment, 100 ); ?>
</span>
<?php } ?>
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">
<?php if($comment->user_id) { ?>
<a href="<?php echo get_home_url().'/profile/?id='.$comment->user_id ?>" class="user"><?php printf( __( '%s', 'shape' ), sprintf( '<cite data-toggle="tooltip" data-placement="top" title="View profile" class="fn">%s</cite>', get_comment_author_link() ) ); ?></a>
<?php } else { ?>
<a class="user"><?php printf( __( '%s', 'shape' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?></a>
<?php } ?>
<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args[ 'max_depth' ], 'add_below' => 'li-comment', 'reply_text' => '<i class="fa fa-reply pull-right"></i>' ) ), $comment_id ); ?>
</h5>
<h7>
<i class="fa fa-clock-o"></i> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"><time pubdate datetime="<?php comment_time( 'c' ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( '%1$s', 'shape' ), get_comment_date(), get_comment_time() );
?>
</time></a> <?php edit_comment_link( __( '(Edit)', 'shape' ), ' ' ); ?>
</h7>
<?php if ( $comment->comment_approved == '0' ) : ?>
<em><?php _e( 'Your comment is awaiting moderation.', 'shape' ); ?></em>
<br />
<?php endif; ?>
<p><?php echo get_comment_text(); ?></p>
<?php
if($comment->comment_parent == 0){
$comment_id = $comment->comment_ID;
}else {
$comment_id = $comment->comment_parent;
}
?>
</div>
</div>
<?php
if ( $depth > 1 ) {
echo '</div>';
}
?>
<?php
break;
endswitch;
}
endif; // ends check for shape_comment()
?>
/**
* Include external files
*/
require_once('inc/pagination.inc.php');
require_once('inc/template-tags.inc.php');
<?php
/**
* The template for displaying Comments.
*
* The area of the page that contains both current comments
* and the comment form. The actual display of comments is
* handled by a callback to shape_comment() which is
* located in the inc/template-tags.php file.
*
* @package Shape
* @since Shape 1.0
*/
?>
<?php
/*
* If the current post is protected by a password and
* the visitor has not yet entered the password we will
* return early without loading the comments.
*/
if ( post_password_required() )
return;
?>
<div id="comments" class="">
<?php // You can start editing here -- including this comment! ?>
<?php if ( have_comments() ) : ?>
<div class="card card-comments mb-3 wow fadeIn">
<div class="card-header font-weight-bold">
<?php if(get_comment_pages_count() > 1) echo ' class="mb-1"';?> <?php echo (get_comments_number()) ? get_comments_number() : '';?> Comments
</div>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through? If so, show navigation ?>
<nav role="navigation" id="comment-nav-above" class="site-navigation comment-navigation text-center mb-2">
<?php previous_comments_link( __( '<i class="fa fa-caret-left left" aria-hidden="true"></i> Older Comments', 'shape' ) ); ?>
<?php next_comments_link( __( 'Newer Comments <i class="fa fa-caret-right right" aria-hidden="true"></i>', 'shape' ) ); ?>
</nav>
<!-- #comment-nav-before .site-navigation .comment-navigation -->
<?php endif; // check for comment navigation ?>
<div class="card-body">
<?php
/* Loop through and list the comments. Tell wp_list_comments()
* to use shape_comment() to format the comments.
* If you want to overload this in a child theme then you can
* define shape_comment() and that will be used instead.
* See shape_comment() in inc/template-tags.php for more.
*/
wp_list_comments( array( 'callback' => 'shape_comment' ) );
?>
</div>
<!-- .commentlist -->
</div>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through? If so, show navigation ?>
<nav role="navigation" id="comment-nav-below" class="site-navigation comment-navigation text-center mb-2">
<?php previous_comments_link( __( '<i class="fa fa-caret-left left" aria-hidden="true"></i> Older Comments', 'shape' ) ); ?>
<?php next_comments_link( __( 'Newer Comments <i class="fa fa-caret-right right" aria-hidden="true"></i>', 'shape' ) ); ?>
</nav>
<!-- #comment-nav-below .site-navigation .comment-navigation -->
<?php endif; // check for comment navigation ?>
<?php endif; // have_comments() ?>
<?php
// If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
?>
<p class="nocomments">
<?php _e( 'Comments are closed.', 'shape' ); ?>
</p>
<?php endif; ?>
<?php
$aria_req = ( $req ? " aria-required='true'" : '' );
$args = array(
'fields' => apply_filters(
'comment_form_default_fields', array(
'author' =>'
<!-- Name -->
<label for="name">'. __( 'Your name' ) . ( $req ? '<span class="required">*</span>' : '' ) .' </label>
<input type="text" id="author" name="author" class="form-control" value="' .
esc_attr( $commenter['comment_author'] ) . '" '. $aria_req . '>
',
'email' => '
<!-- Email -->
<label for="email">'. __( 'Your email', 'domainreference' ) . ( $req ? '<span class="required">*</span>' : '' ). '</label>
<input type="text" id="email" name="email" class="form-control" ' . $aria_req .' value="' . esc_attr( $commenter['comment_author_email'] ) .
'">
'
)
),
'comment_field' => (is_user_logged_in() ? '
<!--Third row-->
<div class="row">
<!--Image column-->
<div class="col-sm-2 col-xs-12">' .
get_avatar( get_current_user_id(), 100 ) .
'</div>
<!--/.Image column-->
<!--Content column-->
<div class="col-sm-10 col-12">
<!-- Comment -->
<div class="form-group">
<label for="comment">Your comment</label>
<textarea id="comment" name="comment" type="text" class="form-control" rows="5"></textarea>
</div>
</div>
<!--/.Content column-->
</div>
<!--/.Third row-->': '
<!-- Comment -->
<div class="form-group">
<label for="comment">Your comment</label>
<textarea id="comment" name="comment" type="text" class="form-control" rows="5"></textarea>
</div>'),
'comment_notes_after' => '',
'comment_notes_before' => '',
'logged_in_as' => '<p class="text-center">('. sprintf(
__( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ),
admin_url( 'profile.php' ),
$user_identity,
wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) )
) . ')</p> ',
'title_reply' => '',
'class_submit' => 'btn btn-info btn-md ',
'label_submit' => 'post '
);
?>
<!--Leave a reply section-->
<div class="card mb-3 wow fadeIn">
<div class="card-header font-weight-bold">Leave a reply</div>
<div class="card-body">
<?php
comment_form($args ); ?>
</div>
</div>
<!--/.Leave a reply section-->
</div>
<!-- #comments .comments-area -->
<!--Comments-->
<div class="card card-comments mb-3 wow fadeIn">
<div class="card-header font-weight-bold">3 comments</div>
<div class="card-body">
<div class="media d-block d-md-flex mt-4">
<img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Miley Steward
<a href="" class="pull-right">
<i class="fa fa-reply"></i>
</a>
</h5>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="media d-block d-md-flex mt-3">
<img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg" alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Tommy Smith
<a href="" class="pull-right">
<i class="fa fa-reply"></i>
</a>
</h5>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</div>
</div>
<!-- Quick Reply -->
<div class="form-group mt-4">
<label for="quickReplyFormComment">Your comment</label>
<textarea class="form-control" id="quickReplyFormComment" rows="5"></textarea>
<div class="text-center">
<button class="btn btn-info btn-sm" type="submit">Post</button>
</div>
</div>
<div class="media d-block d-md-flex mt-3">
<img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg" alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Sylvester the Cat
<a href="" class="pull-right">
<i class="fa fa-reply"></i>
</a>
</h5>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</div>
</div>
</div>
</div>
<div class="media d-block d-md-flex mt-3">
<img class="d-flex mb-3 mx-auto " src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" alt="Generic placeholder image">
<div class="media-body text-center text-md-left ml-md-3 ml-0">
<h5 class="mt-0 font-weight-bold">Caroline Horwitz
<a href="" class="pull-right">
<i class="fa fa-reply"></i>
</a>
</h5>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
fuga.
</div>
</div>
</div>
</div>
<!--/.Comments-->
<!--Reply-->
<div class="card mb-3 wow fadeIn">
<div class="card-header font-weight-bold">Leave a reply</div>
<div class="card-body">
<!-- Default form reply -->
<form>
<!-- Comment -->
<div class="form-group">
<label for="replyFormComment">Your comment</label>
<textarea class="form-control" id="replyFormComment" rows="5"></textarea>
</div>
<!-- Name -->
<label for="replyFormName">Your name</label>
<input type="email" id="replyFormName" class="form-control">
<br>
<!-- Email -->
<label for="replyFormEmail">Your e-mail</label>
<input type="email" id="replyFormEmail" class="form-control">
<div class="text-center mt-4">
<button class="btn btn-info btn-md" type="submit">Post</button>
</div>
</form>
<!-- Default form reply -->
</div>
</div>
<!--/.Reply-->
<!--Comments and reply-->
<?php comments_template(); ?>
<!--/.Comments and reply-->
Preview
Now once you refresh our page you will notice that there is a new form:
which looks different for logged in and not logged in users:
Now you can add our first comment:
From now on, users can add new comments: (Note that comments from unregistered users may require approval)
Or reply to existing comments by hitting the reply arrow on the right side of the comment:
Our theme will nest the comment automatically.
Note
Files which we have created might look quite complex, we will cover them in future lessons. For now, it's important to remember that we have overwritten a default WordPress comment form (
comments.php), as well as created a custom functionshape_comment()(inc/templates-tag.inc.php)which is responsible for "printing" comments.If you want, you can play with the comments' appearance by updating the following function, perhpas trying to add some classes or custom constructions. Don't be scared to mess about with the code - you can always download a working version at the bottom of each lesson.
Previous lesson Download Live preview Next lesson
Spread the word:
