Display The WordPress User Avatar Image On Any Page Using This Shortcode

When building a custom learning management system solution for our clients, one of the key UI areas that we often spend a lot of time designing is the Learner Profile page.

This is because typically the learner’s profile is the heart of the online learning experience for any user, and we would always redirect straight to this page for any customer or subscriber role. It provides a gateway to the various products and services that the user has access to, such as their online courses enrolled into within LearnDash, their downloadable certificates, their digital product access or downloadable resources, and many other possible things.

The learner profile also acts as an information hub for everything that a user needs to know about themselves and their performance, including progress information for where they are in their learning journey and how much further they have to go to achieve their goal.

It is for this reason that personalising the learner profile is an important design decision, and nothing makes a page more personal than being able to see their own photo on the page.

Now LearnDash LMS itself does come with its own profile widget, which can grab the user’s avatar (or Gravatar) image directly from their WordPress profile to display atop the widget.

If however you have decided to forgo using this pre-built widget in favour of creating your own, more heavily customised user profile page experience. Something like this!:

A custom LearnDash learner profile page design.

Then here are the steps to take in order to easily grab the user profile image to display anywhere on your page:

Step 1 – Add the following code snippet to your theme’s functions.php file

function shortcode_user_avatar() {
if(is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
return get_avatar( $current_user -> ID, 120 );
}
else {
// If not logged in then show default avatar. Change the URL to show your own default avatar
return get_avatar( 'http://1.gravatar.com/avatar/ad524503a11cd5ca435acc9bb6523536?s=64', 120 );
}
}

add_shortcode('display-user-avatar','shortcode_user_avatar');

Step 2 – Use the following shortcode anywhere on a WordPress Page or Post to display the user’s avatar image

[display-user-avatar]

Credit – We would like to thank Riyadh Al Nur for both writing and sharing this user avatar shortcode, which is shared publicly via his GitHub page and has proven to work perfectly for LearnDash LMS platforms.