Navigation:
Description
In this tutorial we will customize our websites comment layout according to the comment authors rank. I will be using the WordPress TwentyTwelve Theme but most of these examples should work on most WordPress themes.
Requirements
- myCred 1.1 or higher.
- Basic understanding of WordPress Themes.
Add Custom Comment Class
First off we will add a comment authors rank (if they are members) to the comment class which will allow us to add custom CSS styling to “highlight” different ranks.
To do this, we will start by creating a custom filter for the comment_class filter hook and place this filter in our theme’s functions.php file.
add_filter( 'comment_class', 'insert_rank_into_comment_class', 10, 4 );
function insert_rank_into_comment_class( $classes, $class, $comment_id, $post_id )
{
return $classes;
}
The first thing we need to do is to make sure that the comment author is a registered member so we can get the users ID.
Next, we will add the rank name as a class rank-{rank_name}. To get a users rank, we will be using the mycred_get_users_rank function.
add_filter( 'comment_class', 'insert_rank_into_comment_class', 10, 4 );
function insert_rank_into_comment_class( $classes, $class, $comment_id, $post_id )
{
$comment = get_comment( $comment_id );
if ( $comment->user_id == 0 ) return $classes;
$classes[] = 'rank-' . mycred_get_users_rank( $comment->user_id, 'post_name' );
return $classes;
}
Now, each comment will have a custom class formated as rank-{rank_name} allowing us to add CSS Styling:
// Styling for comments made by members with "junior" rank
.commentlist .rank-junior { }
// Styling for comments made by members with "veteran" rank
.commentlist .rank-veteran { }
Example: Change the Comment Authors Name to red color if they have the “veteran” rank:
.commentlist .rank-veteran cite {
color: red;
}
With some clever CSS styling you could do almost any type of adjustments.
Adding Rank Details
Styling comments only gets us so far. What if we want to include the comment authors rank and rank logo?
To do this, we will need to adjust the comment template. In the TwentyTwelve theme, this is done though the twentytwelve_comment() function which is located in the functions.php file and looks like this:
function twentytwelve_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' :
// Display trackbacks differently than normal comments.
?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
<p><?php _e( 'Pingback:', 'twentytwelve' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edit)', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?></p>
<?php
break;
default :
// Proceed with normal comments.
global $post;
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<article id="comment-<?php comment_ID(); ?>" class="comment">
<header class="comment-meta comment-author vcard">
<?php
echo get_avatar( $comment, 44 );
printf( '<cite class="fn">%1$s %2$s</cite>',
get_comment_author_link(),
// If current post author is also comment author, make it known visually.
( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);
printf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
esc_url( get_comment_link( $comment->comment_ID ) ),
get_comment_time( 'c' ),
/* translators: 1: date, 2: time */
sprintf( __( '%1$s at %2$s', 'twentytwelve' ), get_comment_date(), get_comment_time() )
);
?>
</header><!-- .comment-meta -->
<?php if ( '0' == $comment->comment_approved ) : ?>
<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentytwelve' ); ?></p>
<?php endif; ?>
<section class="comment-content comment">
<?php comment_text(); ?>
<?php edit_comment_link( __( 'Edit', 'twentytwelve' ), '<p class="edit-link">', '</p>' ); ?>
</section><!-- .comment-content -->
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply', 'twentytwelve' ), 'after' => ' ↓', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div><!-- .reply -->
</article><!-- #comment-## -->
<?php
break;
endswitch; // end comment_type check
}
Using the mycred_get_users_rank function we first insert the rank logo directly after the avatar, then after the timestamp we add a new row where we show the users rank:
function twentytwelve_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' :
// Display trackbacks differently than normal comments.
?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
<p><?php _e( 'Pingback:', 'twentytwelve' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edit)', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?></p>
<?php
break;
default :
// Proceed with normal comments.
global $post;
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<article id="comment-<?php comment_ID(); ?>" class="comment">
<header class="comment-meta comment-author vcard">
<?php
echo get_avatar( $comment, 44 );
// Insert rank logo
if ( $comment->user_id != 0 )
echo mycred_get_users_rank( $comment->user_id, 'logo', 'post-thumbnail', array( 'class' => 'mycred-rank' ) );
printf( '<cite class="fn">%1$s %2$s</cite>',
get_comment_author_link(),
// If current post author is also comment author, make it known visually.
( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);
printf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
esc_url( get_comment_link( $comment->comment_ID ) ),
get_comment_time( 'c' ),
/* translators: 1: date, 2: time */
sprintf( __( '%1$s at %2$s', 'twentytwelve' ), get_comment_date(), get_comment_time() )
);
// Insert rank title
if ( $comment->user_id != 0 )
echo '<div class="fn authors-rank" style="margin-left:6.071428571rem;">Rank: ' . mycred_get_users_rank( $comment->user_id ) . '</div>';
?>
</header><!-- .comment-meta -->
<?php if ( '0' == $comment->comment_approved ) : ?>
<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentytwelve' ); ?></p>
<?php endif; ?>
<section class="comment-content comment">
<?php comment_text(); ?>
<?php edit_comment_link( __( 'Edit', 'twentytwelve' ), '<p class="edit-link">', '</p>' ); ?>
</section><!-- .comment-content -->
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply', 'twentytwelve' ), 'after' => ' ↓', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div><!-- .reply -->
</article><!-- #comment-## -->
<?php
break;
endswitch; // end comment_type check
}
You can of course add these details anywhere you want in your comment template, this is just one example.
Done
If you have any questions on how to further customize comments based on users rank, feel free to post them below.
