Styling Comments based on Custom User Roles

For a recent project I had to give users a different comment style based on their WordPress role. Unfortunately there isn’t really an easy way to get the name of a role for a given user out of WordPress.

Today we are going to build a simple bit of code that does just that, adds the role of a commenter to their comment as a class so we can style the comment.

One thing to note is that for the stock WordPress roles you already get special comment classes to target. This is really only useful when you need to style custom roles in WordPress.

Screen Shot 2013-06-07 at 9.37.54 AM

comment_class

The first thing we need to do is access the comment_class filter. comment_class is found in the wp-includes/comment-template.php file at line 358 (as of June 5, 2013). It passes 4 parameters to our function.

  1. $classes: – (array) The array of classes already applied to the comment
  2. $class: – (string|array) One or more classes to apply to the comment. the comment_class() function takes this argument.
  3. $comment_id: – (int) The ID of the comment we are currently looping through
  4. $post_id: – (int) The ID of the post that the comment is attached to.

Now lets take a look at our starting function.

/**
 * Adds the role name as a class to comment classes.
 *
 * @since 1.0
 * @author WP Theme Tutorial, Curtis McHale
 *
 * @param array           $classes    required    The starting classes
 * @param string|array    $class      optional    One or more classe to apply to the list
 * @param int             $comment_id required    The id of the comment
 * @param int             $post_id    required    The post_id that the comment is attached to
 *
 * @return array    $classes    Our modifed classes
 *
 * @uses get_comment()          Gets comment object given comment_id
 * @uses wptt_get_user_role()  Returns role name
 */
function wptt_roles_to_classes( $classes, $class, $comment_id, $post_id ){

	$comment = get_comment( $comment_id );
	$user_id = $comment->user_id;

	if ( $user_id !== 0 ){
		$role = wptt_get_user_role( $user_id );

		if ( ! isset( $role ) || empty( $role ) ) return $classes;
		$classes[] = $role;
	}
	return $classes;

} // wptt_roles_to_classes
add_filter( 'comment_class', 'wptt_roles_to_classes', 10, 4 );

The first thing we need to do is use get_comment() to get the comment object. All we need to provide it is the $comment_id and it will return the object.

Once we have the comment object we need to get the $user_id of the comment author out of it. Lucky for us the object contains that information for us by simply using $comment->user_id.

Now if the user that made the comment wasn’t logged in, we are going to get back a big fat 0. Since they weren’t logged in, they aren’t going to have a role either. That’s why we wrap the rest of our function in a check for 0.

Next we hit a custom function (which I’ll cover in a second) that gets the role and we apply the role name to the $classes array.

Now we need to catch an error, what if our custom function returns empty? We don’t really want to add anything to our classes, so we’ll just return the base $classes unaltered.

Then it’s just a simple matter of returning $classes so that it can be applied to the comment wrapper.

Getting the role

Now that we can see the flow of adding the custom CSS class to our $classes array, let’s see how we get the role name with our wptt_get_user_role() function.

/**
 * Returns string for the users role
 *
 * @since 1.0
 * @author WP Theme Tutorial, Curtis McHale
 *
 * @param int   $user_id    required    The Id of the WP user we want to get a role for
 *
 * @return string   $out    The array key for the user role
 */
function wptt_get_user_role( $user_id ){

	if ( ! isset( $user_id ) ) return null;

	$user = new WP_User( $user_id );

	$wp_roles = new WP_Roles;
	$names    = $wp_roles->get_names();
	$out      = array ();

	foreach ( $user->roles as $role )
	{
		if ( isset ( $names[ $role ] ) )
		{
			$out[ $role ] = $names[ $role ];
		}
	}

	return key( $out );

} // wptt_get_user_role

The first thing we are going to do is make sure that we have a $user_id. There rest of the function doesn’t even matter if we don’t have a $user_id so we’ll just return nothing.

Once we’ve made sure we have a $user_id we need to create a new user object with WP_User and assign it to our $user variable.

Next we need to create a new WP_Roles and out of that we need to get the role names with get_names().

Finally we loop through our the roles on our user and match it against the roles in our $names variable. When we get a match we send it to our $out variable.

To close off the function we use key to get the first key in our array and we return that key. The key we returned becomes our class.

The Code

/**
 * Adds the role name as a class to comment classes.
 *
 * @since 1.0
 * @author WP Theme Tutorial, Curtis McHale
 *
 * @param array           $classes    required    The starting classes
 * @param string|array    $class      optional    One or more classe to apply to the list
 * @param int             $comment_id required    The id of the comment
 * @param int             $post_id    required    The post_id that the comment is attached to
 *
 * @return array    $classes    Our modifed classes
 *
 * @uses get_comment()          Gets comment object given comment_id
 * @uses wptt_get_user_role()  Returns role name
 */
function wptt_roles_to_classes( $classes, $class, $comment_id, $post_id ){

	$comment = get_comment( $comment_id );
	$user_id = $comment->user_id;

	if ( $user_id !== 0 ){
		$role = wptt_get_user_role( $user_id );

		if ( ! isset( $role ) || empty( $role ) ) return $classes;
		$classes[] = $role;
	}
	return $classes;

} // wptt_roles_to_classes
add_filter( 'comment_class', 'wptt_roles_to_classes', 10, 4 );

/**
 * Returns string for the users role
 *
 * @since 1.0
 * @author WP Theme Tutorial, Curtis McHale
 *
 * @param int   $user_id    required    The Id of the WP user we want to get a role for
 *
 * @return string   $out    The array key for the user role
 */
function wptt_get_user_role( $user_id ){

	if ( ! isset( $user_id ) ) return null;

	$user = new WP_User( $user_id );

	$wp_roles = new WP_Roles;
	$names    = $wp_roles->get_names();
	$out      = array ();

	foreach ( $user->roles as $role ){
		if ( isset ( $names[ $role ] ) ){
			$out[ $role ] = $names[ $role ];
		}
	}

	return key( $out );

} // wptt_get_user_role

Screencast

Curtis McHale

Posts Twitter Google+

Curtis is a web designer/developer specialized in WordPress eCommerce development on WooCommerce. You can get in touch with him about projects on SFNdesign.
My Blog is 4 Times Faster Than Your Blog

Trackbacks and Pingbacks:

  1. Styling comments based on custom user role : Post Status - June 12, 2013

    […] Styling comments based on custom user role » […]

  2. WordPress news: June 9 to June 15, 2013 | Artman's - June 14, 2013

    […] For better readability of comments, check out this tutorial. […]

  3. WordPress news: June 9 to June 15, 2013 | WordPress Jackpot! - June 15, 2013

    […] For better readability of comments, check out this tutorial. […]