[easy-social-share counters=0 style="button"]

Thankfully for everyone, I’ve taken care of it out. Confusing still, yes. But yet sorted out. For this purpose article on the Comments Template, I’m generally going to take a walk you by means of what’s going to happen to you, show you a few custom code snippets you’ll require to add to your inc/template-tags.php file folder, then drop the entire thing on you. I hope that, it’ll learn to important. But yet at the least you’ll have a faulty comments template.

Let’s take notice of a fast listing of what’s going on in this specific Template.

  1. Prevent loading for bots or on password protected posts
  2. Check out if there are comments
  3. Make a distinction between comments and trackbacks / ping backs) so that we can easily show trackbacks with much simpler mock-up. From this point on, I’ll refer to both of them trackbacks and also ping backs just as“Ping backs”.
  4. In case there are actually comments, display the comments—with website navigation for paginated comments
  5. In case comments are open up, display the comments“respond” form
    That’s a number of things going on for just one template. But then written out like this, it’s pretty straight-forward.

Custom Callbacks for Comments and PING BACKS

We’re going to using the function wp_list_comments( ) that conveniently spits out an placed an order for listed comments and then ping backs markup for your post ( threaded as well ).

To make up our comments template code work, you’ll using a custom callback function that controls the lay-out of the proper comments or ping backs. Open up inc/template-tags.php and then paste the following function at the very bottom part of the file folder.

if ( ! function_exists( 'shape_comment' ) ) :


 * Template for comments and ping backs.


 * 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 'ping back' :

        case 'trackback' :


    <li class="post ping back">

        <p><?php _e( 'Ping back:', 'shape' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( '(Edit)', 'shape' ), ' ' ); ?></p>



        default :


    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">

        <article id="comment-<?php comment_ID(); ?>" class="comment">


                <div class="comment-author vcard">

                    <?php echo get_avatar( $comment, 40 ); ?>

                    <?php printf( __( '%s <span class="says">says:</span>', 'shape' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>

                </div><!-- .comment-author .vcard -->

                <?php if ( $comment->comment_approved == '0' ) : ?>

                    <em><?php _e( 'Your comment is awaiting moderation.', 'shape' ); ?></em>

                    <br />

                <?php endif; ?>

                <div class="comment-meta comment metadata">

                    <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"><time pubdate datetime="<?php comment_time( 'c' ); ?>">


                        /* translators: 1: date, 2: time */

                        printf( __( '%1$s at %2$s', 'shape' ), get_comment_date(), get_comment_time() ); ?>


                    <?php edit_comment_link( __( '(Edit)', 'shape' ), ' ' );


                </div><!-- .comment-meta .comment metadata -->


            <div class="comment-content"><?php comment_text(); ?></div>

            <div class="reply">

                <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>

            </div><!-- .reply -->

        </article><!-- #comment-## -->





endif; // ends check for shape_comment()

Let’s clearly explain what’s happening right here in more detail. 1st, this code repeats for each and every comment or simply trackback now we have. On that line 11-14, we using a PHP “switch statement“, and it is a type of conditional same as IF. ELSE statement. In easiest conditions, switch statement let you 1st determine the value of a variable, and then show various code dependent on the importance of that variable.

In English, our comments switch statement tells: “in the case that the specific comment is a ping back and a trackback, structure it with the markup on on that line 15-16.” Here’s just how our ping backs start looking:


For example Ping back
It’s very nice. It’s actually pretty bare, but the truth is can certainly very it ahead of simply CSS itself. We’ll discuss about CSS in a later lessons.

Notice that exactly how we don’t have any kind of closing tag on-line 17. wp_list_comments( ) adds on this section in immediately.

Right now, online 18, the “break” statement means that we’re finished with ping backs and also trackbacks. The “default” statement on-line 19 says, in English, “in the case that the current comment is not any other conditions above, format it with the default markup on lines 21-41.” Simply because the only various other cases above are ping back sand then trackbacks, this markup will be applied to almost all regular comments.

Once again, blow, but yet we’ll color it in later.


It’s very important that every individual comment li has comment_class( ) inserted ( notice collection 21 ), simply because, just like body_class( ) and then post_class( ), comment_class( ) adds useful classes to comments that you can begin to target with CSS. As an example, comments made by the post’s author get a class of “by post author”, so that you can make a distinction the author’s comments from the relax .

To modify the default size of your avatar, simply just modify the 40 in echo get_avatar( $comment, 40 ); online 25 above. The 40 is the size in pixels of your avatar. In truth, if you would like to alter the layout of the individual comment, you’d adjust the code on lines 21-41 (and 15-16 for ping backs).

In the same way with ping backs, we don’t require a tag to correspond with the opening up li> on-line 21, simply because WordPress will certainly insert it later on.

Almost all right, we end our “default” case with the “break” on-line 52, and also we finish the switch statement online 53 with “end switch”.

The Comments Template (comments.php)

I haven’t worried you away now have I ? I’ll be truthful, it’s certainly not that scary. We will have to put our shape_comment( ) function that we walked through above to using inside the comments template.

There are also useful PHP comments that will actually give you guidance along in understanding what’s happening anyway. Paste this code in the comments.php file folder.



 * 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





     * 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() )



    <div id="comments" class="comments-area">

    <?php // You can start editing here -- including this comment! ?>

    <?php if ( have_comments() ) : ?>

        <h2 class="comments-title">


                printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'shape' ),

                    number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );



        <?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">

            <h1 class="assistive-text"><?php _e( 'Comment navigation', 'shape' ); ?></h1>

            <div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'shape' ) ); ?></div>

            <div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'shape' ) ); ?></div>

        </nav><!-- #comment-nav-before .site-navigation .comment-navigation -->

        <?php endif; // check for comment navigation ?>

        <ol class="commentlist">


                /* 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' ) );


        </ol><!-- .commentlist -->

        <?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">

            <h1 class="assistive-text"><?php _e( 'Comment navigation', 'shape' ); ?></h1>

            <div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'shape' ) ); ?></div>

            <div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'shape' ) ); ?></div>

        </nav><!-- #comment-nav-below .site-navigation .comment-navigation -->

        <?php endif; // check for comment navigation ?>

    <?php endif; // have_comments() ?>


        // 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 comment_form(); ?>

</div><!-- #comments .comments-area -->

The comment_form( ) function ( collection 74 ), is mainly responsible for producing the totally complete comment form. Here’s exactly what it produces, in its default form (which is certainly just how we’re making use of it ). No style, yet, of course:

Comment Form, Logged Out View

Comment Form, Logged In View
When you need to adjust elements in the comment form, that you can do so by passing of the various parameters to the comment_form( ) function. Look at the Codex for the full listing of guidelines.

And also that’s it. You’ve got a very nice Comments Template to call your personal.

Submit a comment

Pin It on Pinterest