WordPress from A to Z: personalize the comments template

With this lesson we arrived at the end of the course dedicated to the creation of a theme for WordPress that accompanied us in these months. To complete the work that we intended to do at the beginning of  the course, today we’re going to see  how to personalize the template of  comments of our theme. Today’s argument is really tough, but if you have a minimum of knowledge of php programming  and are willing to learn, it can turn out to be really simple and fun to face together.

Every blog worth respecting allows to comment the articles published so that to create an interaction and dialogue with it’s readers. What about creating a template for the visualization of the comments on our blog?

1. Create the template for the visualization of  comments

The first step for the visualization of  comments at the end of every article consists in creating a file that will be used as a template to show the comments. The file used by WordPress to do this function is called comments.php , so we create a new empty file and we rename it this way.

1.1 Check if the article is protected by a password

Inside this new file, the first thing to do is check if the article is protected by a password, if it is we visualize a message that invites the reader to insert the password in order to read and make a comment on the article.

To execute this control we use the function of WordPress called  post_password_required() which tells us if the article in question is protected or not by a password.

<div id="comments">
    <?php if ( post_password_required() ) : ?>
    <p class="nopassword"><?php _e( 'This article is protect by password. Insert password to view comments.', 'yiw' ); ?></p>
</div><!-- #comments -->
    <?php
            return;
        endif;
?>

In case the article is protected by a password the user will be invited to insert  the password  in order to read the comments.

1.2 Check if the article has comments

Immediately after this control we do another control to verify if the requested article has comments, to do this we use the function of WordPress called have_comments():

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

    <!-- instruction to follow if there are comments at the article -->

<?php else : // or, if there aren't comments ?>

    <!-- instruction to follow if there aren't comment at the article -->

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

Now we go and add the instructions we want to execute in case the article has comments.

1.3 Show a title and the total number of comments present in the article

We begin by showing a title that indicates the number of comments present before the real list and we do it with the use of the function comments_number() which accepts three parameters: the first one indicates the text to visualize in case the article doesn’t have comments, the second the text to visualize in case there’s only one comment and the third one the text to visualize in case there are more than one comments.

Therefore we add what we just said inside our file comments.php:

<?php if ( have_comments() ) : ?>
    <h3 id="comments-title">
        <?php comments_number(__('no comments', 'yiw'), __('1 comment', 'yiw'), __('% comments', 'yiw')); ?>
    </h3>

1.4 Show the list of the present comments using a personalized function

Done this, we process the list of the comments using the function   wp_list_comments():

<ol class="commentlist">
    <?php
        wp_list_comments( array( 'type' => 'comment', 'callback' => 'yiw_comment' ) );
    ?>
</ol>

As you can see from the official documentation the function wp_list_comments() accepts different parameters.We just past two of the many parameters supported by the function.

What’s the use of the two parameters?

Very  simple, the two parameters indicate in the order:

  • ‘type’ => ‘comment’: the type of comment we want to show, we choose only the typology “comments” , but  one can also choose  “pingback” or “trackback” or all of the three typologies together;
  • ‘callback’ => ‘yiw_comment’ : the name of the personalized function (that we still have to create and it will be the argument of the next lesson) that we want to use to show the list of  the comments, in fact  the parameter callback serves to define the name of the function to recall for the visualization of the list of the comments, bypassing this way the predefined function of WordPress ready to do this task.

Now inside the file function.php all you need to do is create a new function called yiw_comment() which will contain the template (the xHTML code to be clear) to use for the visualization of every single comment.

1.5 Show,if present, the paging of  comments and the possibility to navigate it

Now we check if there’s a paging in the comments that we’ve shown and in case there is we immediately visualize it under the list of  comments:

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
        <div class="navigation">
            <div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Prev Comments', 'yiw' ) ); ?></div>
            <div class="nav-next"><?php next_comments_link( __( 'Next Comments <span class="meta-nav">&rarr;</span>', 'yiw' ) ); ?></div>
        </div><!-- .navigation -->
<?php endif; ?>

To navigate through the previous and next comments we use the two functions put at our disposal by WordPress previous_comments_link() and next_comments_link().

1.6 Show a message in case comments to an article are not permitted

If our article doesn’t have comments, it may probably be a case in which comments have been closed down by the author.

If we want to show a message that  informs the user that comments for this article have been closed down, we must execute a control to verify if effectively this is the case and eventually show the message.

You have to insert this part of code immediately after else, that is in the part of the code to execute in case there are no comments:

<?php else :

    /* If there aren't comments and comments are closed */
    if ( ! comments_open() ) :
?>
        <p class="nocomments"><?php _e( 'Comments are closed.', 'yiw' ); ?></p>
<?php
    endif; // end ! comments_open() ?>

To verify if the comments to the article are permitted or not, we use the function comments_open() which returns a true or false value according to the case we have.

1.7 Show the module for the insertion of comments

After we have visualized the entire list of comments, it’s the moment to add ( in the case in which the comments are permitted) the module that allows the readers to leave one’s comment.

So the first thing to do is check that  comments are permitted with the use of  the function comments_open() seen in the previous paragraph:

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

    <div id="respond">

        <!-- instruction to follow if the comments are allowed -->

    </div><!-- #respond -->

<?php endif; ?>

In an affirmative case we show the module that allows the readers to insert their own comment to the article, obviously if  comments are closed there is no way to insert a comment and the module isn’t necessary.

1.7.1 Check if one needs to be registered to send a comment

If the comments are permitted, the next control that we have to do is to verify if one needs to be registered in order to send a comment:

<div id="respond">

    <!-- START TITLE LEAVE A REPLY -->
    <h2 id="leave-reply">Leave a reply</h2>
    <!-- END TITLE LEAVE A REPLY -->

    <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
    <!-- START MESSAGE REQUEST REGISTRATION COMMENTS -->
        <p><?php printf(__('You need to <a href="%s">login</a> to leave a reply.', 'yiw'), get_option('siteurl') . '/wp-login.php?redirect_to=' . urlencode(get_permalink())); ?></p>
    <!-- END MESSAGE REQUEST REGISTRATION COMMENTS -->
    <?php else : ?>

After we added  a title, the first conditional instruction controls if it is necessary to be registered to send a comment and if the user that is visualizing the page isn’t logged. If the conditional instruction is satisfied, we show a message that invites the user to execute the login.

1.7.2 Visualize the module

In case the registration is not required  or the user already did the login, the script will go on skipping this message and visualizing the module necessary for the insertion of a comment.

So we begin by inserting the form for the comment which should point to the page wp-comments-post.php as shown below:

<?php else : ?>
        <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

Immediately after a new conditional control: if the user is logged we show a message that indicates his username  (with a link that goes to his profile) and that allows him to do the logout:

<?php if ( $user_ID ) : ?>
    <p><?php printf(__('Sei loggato come <a href="%1$s">%2$s</a>.', 'yiw'), get_option('siteurl') . '/wp-admin/profile.php', $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out da questo account', 'yiw'); ?>"><?php _e('Log out &raquo;', 'yiw'); ?></a></p>
<?php endif; ?>

Now we add the textarea, where the user will write his own comment:

<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="1"></textarea>

If the user is not logged we show the other fields of the form: name, e-mail and web site so that he can fill them along with the comment he wants to add, otherwise if the user is already logged it would be useless make him insert again name, e-mail and web site.

<?php if ( !$user_ID ) : ?>
    <p>
        <label for="author">Name <?php if ($req) _e(" (required)", 'yiw'); ?></label>
    </p>

    <p>
        <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="2" />
    </p>

    <p>
        <label for="email">Mail <?php if ($req) _e(" (required)", 'yiw'); ?></label>
    </p>

    <p>
        <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="3" />
    </p>

    <p>
        <label for="url">Website</label>
    </p>

    <p>
        <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="4" />
    </p>
<?php endif; ?>

This code should be quite self- explanatory. Now we add the start button and so we finish our form for comments:

        <p>
            <input name="submit" type="submit" id="submit" tabindex="5" value="Send comment" />
            <?php comment_id_fields(); ?>
        </p>
        <?php do_action('comment_form', $post->ID); ?>
    </form>
    <?php endif; ?>

</div><!-- #respond -->

In this last phase we inserted the start button, a hidden field containing the future ID to assign to the comment and a line of code (<?php do_action(‘comment_form’, $post->ID); ?>) necessary to make the comment  form work.

2. Add comments inside the template of the articles

Now that our comment file is ready to use all we need to do recall it inside the template we’ve  created for the visualization of the contents of the articles: single.php and the game is over.

In this way every article will show at the end of the page the comment list – when it’s present -  and the module to insert a new comment.

To do this we open the file single.php and recall the function comments_template() in the point where we want to show the list of comments:

<?php comments_template(); ?>

This function put at our disposal by WordPress serves to recall in a dynamic way the contents of the file comments.php that we created in this lesson.

If we now go and visualize on our blog an article that has comments, we can see our file in action (Figure 1 and figure 2).

Note: If you want, for a  didactic pur pose, correctly visualize the list of comments at the end of this lesson we need to eliminate the second parameter (callback) from the function used to call back the comment list, this is necessary because at the moment we haven’t created yet the personalized function  yiw_comment necessary for the visualization of the comment list. The second part of this lesson will be next week’s argument.

<?php
        wp_list_comments( array( 'type' => 'comment', 'callback' => 'yiw_comment' ) );
    ?>

Figura 1 - Elenco dei commenti alla fine di un articolo.

Figure 1 - Comments at the end of the article

Figura 2 - Modulo per l'inserimento di un nuovo commento.

Figure 2 -Form to add a new comment

3. Conclusion

We started completely from scratch and during these lessons  we managed to fully personalize a template for our site/blog developed on a WordPress platform. In today’s lesson we saw how to create the comment file  and how to implement it inside the template of the articles. In the next lesson we’ll see how to personalize the list of the visualization of the comments with the creation of a personalized function. Don’t miss it!

4. Index of the articles dealt in this guide

In order to make the consulting of this guide easier at the end of each article I will bring the index of all the issues treated.

  1. How to Install WordPress locally?
  2. WordPress: Let’s have a look at the Administration Panel
  3. How to Create a WordPress Template Starting from Scratch?
  4. WordPress: How to Create the Theme header? (part 1) (part 2)
  5. Let’s take a look at WordPress Loop
  6. Adding the Sidebar to our theme
  7. WordPress: how to make dynamic the Header and the Sidebar of the template?
  8. Hierarchy of the templates and their use: how to create a template for the articles?
  9. How to Create Personalized Templates for WordPress Pages?
  10. WordPress: preset the sidebar for widget
  11. Personalizing the Template of WordPress Comments (part 1) (part 2)

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

10 comments

Trackback e pingback

  1. Tweets that mention WordPress from A to Z: personalize the comments template | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Pablo Lara H. Pablo Lara H said: WordPress from A to Z: …
  2. Listed on FAQPAL.com
    WordPress from A to Z: personalize the comments template... With this lesson we arrived at the end of the course dedicated …
  3. Quốc Khánh Việt Nam 2-9-2010
    [...] gratuit</a> cette voyante amoureuse on line et libre notre Tarologue du cœur du web et gratuite top voyance …

Leave a Reply

Current day month ye@r *