How to display avatars in Leader board

front page Forums How-to Questions How to display avatars in Leader board

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #8245
    AvatarUlrik Gorm

    How do I display the users avatar in the leader board?

    I have tried %avatar% but no luck.



    There is no built-in avatar template tag. It would be something you would need to add in and decide how big the avatar you want to use and any other customization you might want to add.

    So you can add as many custom template tags as you want and make them show anything you like.

    Here is a quick example of showing a 32×32 avatar image for each row in the leaderboard:

    add_filter( 'mycred_ranking_row', 'my_custom_ranking_rows', 10, 4 );
    function my_custom_ranking_rows( $layout, $template, $row, $position )
    	$avatar = get_avatar( $row['ID'], 32 );
    	return str_replace( '%avatar%', $avatar, $layout );

    Place the code snippet into your theme’s functions.php file and you can now use the %avatar% template tag. You can find more information on the get_avatar function in the WordPress Codex.

    AvatarUlrik Gorm


    The avatar is now visible.

    AvatarUlrik Gorm

    Getting an odd error.

    I’ve just awarded points to all old users.

    And afterwards got a message: Trouble connecting til wordpress…

    Now the top admin has gone. But I can get it back by removing the avatar code from functions.php. Any idea what I’ve done wrong?


    Enable WP_DEBUG in your wp-config.php file and re-insert the code to see what errors you get (because you are getting them with those issues).

    Make sure you paste the code in correctly as is shown above and that you do not use some rich text editor to paste the code into before pasting it into your themes functions.php file. Some rich text editors will for example replace certain characters which will render an error in PHP.


    Is there a way to make the avatars round instead of square?


    Thanks for the quick responce. Im sorry but I’m not a coder so I’m still having trouble implementing that to the get avatar code you provided in this post?


    The link I sent you is a basic tutorial on how to make any image / item on your website to be round. You do it via CSS which you add to your theme’s style.css file.

    If you add in an avatar you will need to target those avatars with your css code. Example:

    li .avatar { border-radius: 50%; }

    Otherwise you can always use google and search: “CSS make image round”

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.