Before we get into the code to do this, you should make sure that you have uploaded an avatar. WordPress default doesn\u2019t have a place to upload avatars, but you can get a plugin that will do that, or probably the easiest solution is to go to gravatar.com<\/a> and upload an avatar there.<\/p>\n The email address you use at\u00a0gravatar.com should be the same email address you use as your registration address in your WordPress site. (By the way, the avatar you upload at gravatar.com will follow you around the web as long as you are using that same email address. There are many sites that will recognize your Gravatar avatar.)<\/p>\n There are a number of different pieces of code you could use to display your avatar in WordPress. Here is the one we will use for this example:<\/p>\n In this case, the number you see there (60) is the size of the avatar. You can simply make that bigger or smaller to suit your needs.<\/p>\n If you insert the code above into your theme (for example in your single.php file), you should see the photo of that post\u2019s author. The only problem with this is that it simply puts the photo wherever you\u2019ve put the line of code without controlling it in any way.<\/p>\n In order to get the photo to line up in a way that looks better, we are going to need to style it with some CSS styling.<\/p>\n In order to do that, first we are going to need to put it in a unique \u201cdiv\u201d \u2013 i.e. its own division, its own section. Here\u2019s a way we can do that.<\/p>\n This creates a new division\/section called \u201cauthor_pic\u201d that is unique.<\/p>\n Important:<\/strong> Make sure your new div is unique. It should NOT<\/strong> have the same name as another div in your theme.<\/p>\n So we now have our div set up, but we still need to style it. We do that by referencing the div we\u2019ve just created (\u201cauthor_pic\u201d) in the Stylesheet (style.css).<\/p>\n CSS Stylesheet<\/strong><\/p>\n In the style sheet (Appearance > Edit > Stylesheet (style.css)), we\u2019ll control the div with the style we want. Here\u2019s an example.<\/p>\n First we name it the same as we named the div, but we put a hash tag in front of it first. And we also put the opening bracket.<\/p>\n Then we tell it we want it aligned to the left.<\/p>\n And then, because it\u2019s going to be aligned to the left and therefore is going to have the content (in this case the title and the date) to the right of it, we need to make sure it doesn\u2019t run together as it did originally. And so we are going to say, \u201cGive me a 10 pixel margin on the right-hand side.\u201d \u2026 And we\u2019ll go ahead and put in the closing bracket.<\/p>\n Now that we\u2019ve controlled the div with CSS, here\u2019s what we get.<\/p>\n So all of that is looking pretty good. But the avatar that gets inserted is just photo, and that\u2019s it. Many people will probably try to click on the photo thinking they will get more posts from the author or more info about the author.<\/p>\n So let\u2019s go ahead and add a link to the photo that goes to an archive of the author\u2019s other posts.<\/p>\n Our styling is fine, so we don\u2019t need to touch that. But we\u2019re going to need to add more to the code we first inserted.<\/p>\n To make a long story short, let\u2019s just jump to the whole snippet of code. Where you insert the author\u2019s avatar is up to you, but we\u2019ll run through one more example that some may like to use.<\/p>\n This time we\u2019ll put the avatar at the top of the sidebar. (Appearance > Editor > Sidebar) We\u2019ll also go ahead and keep it linked to the author\u2019s archive page.<\/p>\n The second thing is I\u2019ve change the pixels from \u201c60\u201d to \u201c198.\u201d I decided that I wanted a large photo to go right at the top of the sidebar, and I wanted it to basically take up the whole space. (Your size may be different, of course, according to your theme.)<\/p>\n And here\u2019s the result.<\/p>\nThe Code to Display Avatars \/ Profile Pictures<\/strong><\/h2>\n
<?php echo get_avatar( get_the_author_meta('ID'), 60); ?><\/code><\/p>\nAvatar Appears, but without Style<\/strong><\/h2>\n
![\"Post](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/12\/avatar-not-styled.jpg\"){kind=avatar}
<\/a> <\/p>\nControlling the Avatar with Styling<\/strong><\/h2>\n
<div id=\"author_pic\">
\n<?php echo get_avatar( get_the_author_meta('ID'), 60); ?>
\n<\/div><\/code><\/p>\n#author_pic {
\nfloat: left;
\nmargin-right: 10px;
\n}<\/code><\/p>\n#author_pic {<\/code><\/p>\nfloat: left;<\/code><\/p>\nmargin-right: 10px;
\n}<\/code><\/p>\n![\"Post](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/12\/automatically-inserted-beside-headline.jpg\")
<\/a><\/p>\n\nLinking to Author\u2019s Posts<\/strong><\/h2>\n
\n
\n<div id=\"author_pic\">
\n<a href=\"<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>\" rel=\"author\">
\n<?php echo get_avatar( get_the_author_meta('ID'), 60); ?><\/a>
\n<\/div>
\n<\/code>
\nWhen we do that, clicking on the photo takes the viewer to the author\u2019s archive page, as we hoped.<\/p>\n![\"Post](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/12\/links-to-authors-posts.jpg\")
<\/a>
\n<\/p>\nInserting the Photo in Other Places<\/strong><\/h2>\n
<a href=\"<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>\" rel=\"author\">
\n<?php echo get_avatar( get_the_author_meta('ID'), 198); ?><\/a><\/code><\/p>\n![\"Post](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/12\/code-in-sidebar.jpg\")
<\/a>
\nYou\u2019ll notice that this is basically the same code as before, but two things are different. The first is that the divs are gone. The reason for this is that the space in the sidebar is so confined, that there isn\u2019t really anywhere for the photo to go (at least not the way I\u2019m using it).<\/p>\n
![\"Post](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/12\/sidebar.jpg\")
<\/a><\/p>\n