Personalizing WordPress: Show Avatars, Profiles, or Facebook Info to Visitors

If you have a site where your visitors need to register for one reason or another, then it’s good to remind them that they are part of your community.

You can do that in very large ways, like installing a complete social system such as BuddyPress, or you can do it in more subtle ways, like greeting them by name on the sidebar when they’re logged in and showing their avatar.

In this post, we’re going to go into the subtler ways.

We’ll also talk about pulling in info by letting visitors sign up with Facebook and merging aspects of their account there with your site.

As we’ll be adding code to template files, it’s always a good idea to use a child theme.

featured

Checking If Logged In

Before going over code that will actually return information, we’ll go over the code that will go at the beginning and the end of these code blocks.

The first line of this code checks if the user is logged in. If they are, it will show the info we want to show. If not, then the last part of the code will either show nothing, or it will show a message you’d like to display.

Let’s first go over how to show nothing if the user is not logged in:

{code type=php}
<?php if ( is_user_logged_in() ) { ?>

… some more code here …

<?php } else {   ?>
<?php } ?>
{/code}

If you’d like to show them a message, then you’d put some more info between those last two lines, like this:

{code type=php}
<?php if ( is_user_logged_in() ) { ?>

… some more code here …

<?php } else {   ?>
Hey, shouldn’t you be logged in?
<?php } ?>
{/code}

But, of course, you can do better than that. Instead of just berating them, give them a link to the login page and maybe one to the registration page too.

{code type=php}
<?php if ( is_user_logged_in() ) { ?>

… some more code here …

<?php } else {   ?>
Hey, shouldn’t you be <a href=”<?php echo wp_login_url(); ?>”>logged in</a>?
(Need to <a href=”<?php echo wp_registration_url(); ?>” title=”Register”>register</a> first?)
<?php } ?>
{/code}

A Face, A Name

OK, now for some practical code.

There’s little more personal than someone’s face and their name. And so let’s start there.

Let’s say when someone is logged into your site, you want their avatar/gravatar to appear at the top of the sidebar with a personalized greeting like, “Welcome, Ed!”

Place the following code in your sidebar template. (Appearance > Editor > Sidebar – sidebar.php)

We’ll structure this just as above, but now with code to call in the user’s gravatar and their username with a welcome message.

{code type=php}
<?php if ( is_user_logged_in() ) { ?>
<?php $user_info = get_userdata(get_current_user_id());
global $current_user;
get_currentuserinfo();
echo get_avatar( $current_user->ID, 64 );
echo ‘Welcome, ‘ . $user_info->user_login . ‘!’ . “\n”;
?>
<?php } else { ?>
<?php } ?>
{/code}

And let’s take a look at how that comes out.

1st-avatar

A Little Styling

So that worked, but you can see that the welcome message is pushed up against the gravatar, making things look sloppy and cheap.

We can fix that by adding a little more code. We’ll put in two spaces between with this line of code:

{code type=php}echo ”  “;{/code}

So now the entire code looks like this:

{code type=php}
<?php if ( is_user_logged_in() ) { ?>
<?php $user_info = get_userdata(get_current_user_id());
global $current_user;
get_currentuserinfo();
echo get_avatar( $current_user->ID, 64 );
echo ”  “;
echo ‘Welcome, ‘ . $user_info->user_login . ‘!’ . “\n”;
?>
<?php } else { ?>
<?php } ?>
{/code}

And now we get this, with the space we wanted.

2nd-avatar

So that worked, but what if you wanted the welcome message underneath the gravatar?

Instead of putting in the line for the extra spaces, you could put in a line for line break. And, in fact, I can already tell that when I put in the line break, the text is going to push up against the image. So I’ll put in two line breaks.

As well, I can tell that the text is going to sit on the top of the Categories box as it’s doing now, which I don’t like much, so I’m going to put in two more line breaks to give some space at the bottom of the whole thing.

I’ll put my line breaks in with this code:

{code type=php}echo ‘
‘;{/code}

And so the whole code will look like this:

{code type=php}
<?php if ( is_user_logged_in() ) { ?>
<?php $user_info = get_userdata(get_current_user_id());
global $current_user;
get_currentuserinfo();
echo get_avatar( $current_user->ID, 64 );
echo ‘
‘;
echo ‘
‘;
echo ‘Welcome, ‘ . $user_info->user_login . ‘!’ . “\n”;
echo ‘
‘;
echo ‘
‘;
?>
<?php } else { ?>
<?php } ?>
{/code}

And here’s the result:

3rd-avatar

That’s looking better to my eye. But there’s one more thing. The image is looking a little small. I want this visitor to feel like this place is his.

I’m going to blow that image up to the whole width of the sidebar. I can do that by simple changing the 64 number (that’s for pixels) to the width of my sidebar (300 in this case).

{code type=php}echo get_avatar( $current_user->ID, 64 );{/code}

I’ll change that 64 to 300:

{code type=php}echo get_avatar( $current_user->ID, 300 );{/code}

Whoa! There you go! Welcome, Ed!

4th-avatar

Getting More Info

Of course there’s more info you could pull in besides the user’s name and avatar.

Here’s some more code. You should be able to figure out what it is from the beginning label (which you can change, of course). You would just need to add this into the code above.

If you need to add in line breaks, of course you can do that too.

{code type=php}
echo ‘Bio: ‘ . $current_user->description . “\n”;
echo ‘User email: ‘ . $current_user->user_email . “\n”;
echo ‘User first name: ‘ . $current_user->user_firstname . “\n”;
echo ‘User last name: ‘ . $current_user->user_lastname . “\n”;
echo ‘User display name: ‘ . $current_user->display_name . “\n”;
echo ‘User ID: ‘ . $current_user->ID . “\n”;
echo ‘Website: ‘ . $current_user->user_url . “\n”;
echo ‘First Name: ‘ . $current_user->first_name . “\n”;
echo ‘Last Name: ‘ . $current_user->last_name . “\n”;
echo ‘Nickname: ‘ . $current_user->nickname . “\n”;
echo ‘Login Name: ‘ . $current_user->user_login . “\n”;
echo ‘Registration Date: ‘ . $current_user->user_registered . “\n”;
echo ‘Jabber/Google Talk: ‘ . $current_user->jabber . “\n”;
echo ‘Yahoo IM: ‘ . $current_user->yim . “\n”;
echo ‘AIM: ‘ . $current_user->aim . “\n”;
{/code}

Personalizing with Facebook

Another way to go about personalizing a visitor’s experience is to integrate with their Facebook account.

WPMU DEV’s Ultimate Facebook is the perfect way to do that.

You can read all about the plugin on the product page, but in short, it lets you integrate just about anything and everything that Facebook lets you integrate, including:

  • Registering with Facebook account
  • Automatically filling in user profiles with FB info
  • Using Facebook avatars
  • Importing Facebook comments
  • And much more!

Check it out in the plugins section.

Photo credit: Muchilottu Bhagavathy Theyyam