Comments

Author: Dawid Adach

-

Comments

Another significant part of each blog is comments. They let our readers express their thoughts on our content and share it with others. In the previous lesson, we have placed a comment

  1. Create a new file inside inc folder called template-tags.inc.php and paste following code:
  2. <?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()
    ?>
    
  3. Update functions.php in order to include file we have just created:
  4. /**
     * Include external files
     */
    require_once('inc/pagination.inc.php');
    require_once('inc/template-tags.inc.php');
    
  5. Create another file called comments.php in our main folder of theme:
  6. <?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 -->
    
  7. Update single.php file and replace current comment and reply markup: (lines 142-251)
  8. <!--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-->
    
  9. with following function:
  10. <!--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:

Logged in user form

which looks differently for logged in and not logged in users:

Not logged in user form

Now you can add our fist comment:

First comment

From now on users can add new comments: (Note that comments from unregistered users may require approval)

Second comment

Or reply to existing comment hitting reply arrow on the right side of the comment:

Nested 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 custom function shape_comment() (inc/templates-tag.inc.php) which is responsible for "printing" comments.

If you want you can play with the comments appearance updating following function trying to add some classes or custom constructions. Don't be scared to mess up 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:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...