WordPress from A to Z: personalize the comments template (Part 2)

Last week we left each other after we’ve created the required page to visualize the list of comments present on every article and the related form. To visualize the list of comments we used the predefined template put at disposal by the core of WordPress.

In this last lesson we’re going to see how to personalize the visualization of the list of comments in accordance with our personalized template.

1. How to personalize the visualization of the list of comments of the blog?

In the previous lesson we saw that  recalling the list of comments to show on video with the function wp_list_comments() it’s possible - passing the parameter callback to the function in question – to define the name of a possible function to use for the visualization of the list of comments, bypassing this way  the predefined function of WordPress that’s doing this task.

When we recall the list of comments in the file comments.php, we pass the parameter callback indicating as a value of this parameter the name of the function that we want to use to show the list of the comments:

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

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

2. Create the function necessary to personalize the list of comments

We open the file functions.php of our theme and we create a new function named  yiw_comment(), like the value that we assigned to the parameter callback. After you can see the function created for the visualization of the comments of our blog:

<?php
function yiw_comment( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
    ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
        <div class="author-avatar">
            <?php $url = get_bloginfo("template_url").'/images/bg/gravatar.gif'; ?>
            <?php echo get_avatar( $comment, 75,$default=$url ); ?>
            <?php printf( __( '%s ', 'yiw' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
        </div><!-- .author-avatar -->

        <div class="comment-meta commentmetadata">
            <?php if ( $comment->comment_approved == '0' ) : ?>
            	<em class="moderation">Your comment is awaiting moderation.</em>
            	<br />
            <?php endif; ?>

        	<div class="commentDate">
        	  <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
        		<?php
        			/* translators: 1: date, 2: time */
        			printf( __( '%1$s at %2$s', 'yiw' ), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Modifica)', 'yiw' ), ' ' );
        		?>
        	</div>

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

            <div class="reply">
                <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
            </div><!-- .reply -->
        </div><!-- .comment-meta .commentmetadata -->
    </li>
<?php
}
?>

Let’s analyse more in detail the function that we created.

Previously we saw that the list of comments is recalled inside an ordinate list:

<ol>
    <!-- function that draws the list of comments -->
</ol>

2.1 Create the container of every single comment

The first thing to do for the visualization of the list of comments is to show them inside the element  <li>…</li>.

<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
    <!-- content of comment -->
</li>

The use of the function comment_class() serves to insert in an automatic way a class that identifies the type of comment (even comment, odd comment, reply of first level, etc.) so that the user afterwards can manage the video presentation in the best way with the use of the stylesheets.

The function comment_ID() instead serves to print the univocal ID of the interested comment.

2.2 Show the avatar of the user that left a comment

From the version 2.5 of WordPress, the function get_avatar() has been introduced which allows to recover and show the avatar of the user that left the comment just simply passing as a parameter the user ID of the author of the comment or the e-mail address.

The function also accepts other parameters, like for example the dimension of the avatar to show (in our case 75px of height and width) and a possible url in which there’s a default avatar in case of whatever reason the avatar of the author of the comment  isn’t available

Finally the function get_comment_author_link() visualizes on the monitor the name of the author of the comment making him link to the url of his web site ( in the case this value has been  provided at the insertion of the comment).

<div class="author-avatar">
    <?php $url = get_bloginfo("template_url").'/images/bg/gravatar.gif'; ?>
    <?php echo get_avatar( $comment, 75,$default=$url ); ?>
    <?php printf( __( '%s ', 'yiw' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
</div><!-- .author-avatar -->

2.3 Show a message in case of comment in moderation

Before showing the contents of  the comment it‘s necessary to verify if the comment is in queue of moderation or not and in case of moderation show a message that informs the user.

<?php if ( $comment->comment_approved == '0' ) : ?>
    <em class="moderation">Your comment is awaiting moderation.</em>
    <br />
<?php endif; ?>

The code above should already be quite self-explanatory.

2.4 Show date and time of the insertion of the comment

Now we show the date and the time of the insertion of the comment making them  link to the content of the comment itself:

<div class="commentDate">
    <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
        <?php
        /* translators: 1: date, 2: time */
        printf( __( '%1$s at %2$s', 'yiw' ), get_comment_date(),  get_comment_time() );
        ?>
    </a>

    <?php edit_comment_link( __( '(Edit)', 'yiw' ), ' ' ); ?>
</div>

The function get_comment_link() returns the url of the comment in question, while the functions get_comment_date() and get_comment_time() give back in the order the date and the time of the insertion of the comment.

At last, with the function edit_comment_link() we visualize a link that allows the modification of the current  comment if the user is logged and if he has the permissions to modify the comment.

2.5 Show the content of the comment

Now we show the real content of the comment using the function comment_text() put at our disposal by WordPress:

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

2.6 Show a link that allows the direct reply to the comment

Before we conclude, we show a link that allows the user, in the case this functionality is enabled, to reply directly to the current comment:

<div class="reply">
    <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div><!-- .reply -->

With the function comment_reply_link() we obtain the desired result.

3. Conclusion

At this point, all we need to do is define in the stylesheet of our theme the rules that we want to assign for the visualization of our new template of comments. From now on the list of  comments will be shown according to the defined template in the function that we just personalized. Seemed harder, right?

In these lessons that have guided you through the creation of a theme for WordPress, you have had the possibility to try out the huge and excellent official documentation  put at your disposal by the Team of develop, you have also noticed that the creation of  a personalized theme for WordPress can be quite an  easy operation if you have a minimum of basic knowledge and are willing to learn. Now in fact you should have the basic knowledge required to create your first template.

With this lesson the course is officially concluded, I hope it met your approval and that you succeeded in achieving most of the objectives fixed at the beginning of the course.

There are still a lot of arguments to deepen as regards to the creation and personalization of a theme for WordPress, but I think that the articles of a blog don’t fit for this kind of activity.

I received a lot of requests privately from users that asked me to treat this or that argument, obviously it’s impossible to treat them all. I tried to satisfy the more common requests (like for example the passage from psd to WordPress) to which I will answer with further widening in the ebook that I’m preparing and that will be released very soon together with a studio case created entirely from the beginning for the occasion.

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:

9 comments

Trackback e pingback

  1. Tweets that mention WordPress from A to Z: personalize the comments template (Part 2) | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Abdelhadi Touil, Your Inspiration Web. Your Inspiration Web said: RT @yiw WordPress …
  2. Abriendo boca para el curso de WordPress | ceslava - Diseño y Formación
    [...] preset the sidebar for widgetPersonalizing the Template of WordPress Comments (part 1) (part 2)Seminario online “Cómo crear un theme …
  3. wp-popular.com » Blog Archive » WordPress from A to Z: personalize the comments template (Part 2) | Your Inspiration Web
    [...] Read more: WordPress from A to Z: personalize the comments template (Part 2) | Your Inspiration Web [...]

Leave a Reply

Current month ye@r day *