Clicky

Tutorials

How to add author’s photo in WordPress

Giving a personal touch to your blog is crucial. You reader should feel like you’re having a one on one conversation with them. One of the ways to give a personal touch to your WordPress blog is by adding an author’s photo to the blog.

WordPress, by default, shows an author’s gravatar image as their profile photo. You’ll have to replace the gravatar image with your own image. In this article, you’ll learn how to add authors photo in WordPress.

How to add author’s photo in WordPress?

We’ll be showing you two ways of adding author’s photo in WordPress. The first method is to simply display the author’s photo on the blog (replace gravatar image with your own image). In the second method, you’ll learn how to add an author’s image at various locations of the page, such as beside the headline, sidebar, etc. For the second method, you’ll have to add a few lines of code in your WordPress theme.

Let’s take a look at the first method.

How to replace gravatar image with your own image

Firstly, you’ll have to signup to a gravatar account. After signing up, upload your own avatar. Make sure that the email address you use on gravatar.com is the same email address you use as your registration address in your WordPress site. The avatar that you upload on gravatar.com shall follow you around the web as long as you’re using the same email address.

Now that you’ve uploaded your image on gravatar.com, you can see that the same image is displayed on all your blog posts.

How to add author’s image at other locations

In this method, you’ll have to add a few lines of code to your WordPress theme to add author’s image at various locations on the page.

Add author’s image beside the headline

author's image beside headline

Before we get into moving the author’s image throughout the page, let’s see how to display an author’s/profile image by adding code to out WordPress theme file.

<?php echo get_avatar( get_the_author_meta('ID'), 50); ?>

By adding the above code snippet, you successfully add an image (avatar) of size 50, you can change the number to change the size of the avatar.

The above code will simply put the avatar wherever you add the snippet in the code. You’ll have to style the avatar in order to get it line up in a way that looks better.

To do that, we’ll have to put in a unique “div” (division), and its own section. Add the following code to make a unique “div” which we’ll use to style our avatar,

<div>
<div id="author_pic">
<?php echo get_avatar( get_the_author_meta('ID'), 50); ?>
</div>

This will create a new division/section called “author_pic” that is unique.

Make sure that the new div that you create is unique and it should not have the same name as another div in your theme.

Now that we have set up our div, let’s style it.

Go to Appearance > Edit > style.css file of your theme.

Here, we can control the div with style. Check out the example below to get a better understanding.

#author_pic {
float: left;
margin-right: 10px;
}

Putting the above style will align your avatar next to headline and metadata.

Add authors image on top of sidebar

authors image on top of sidebar

Now that you know how to insert the sidebar beside the headline let’s take a look at how to insert your avatar at the top of the sidebar.

Go to Appearance > Editor > Sidebar file of your theme.

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author">
<?php echo get_avatar( get_the_author_meta('ID'), 190); ?></a>

The above code is similar to the one we’ve used to place the avatar beside headline. Two things are different though; first thing is that the divs are gone (because space in the sidebar is so confined, that there isn’t really anywhere for the photo to go). The second thing is that we’ve changed the pixels from “50” to ” 190″ because I wanted a large photo on the top of the sidebar. You can control the size as per your wish.

How to link the avatars to author’s posts

Your readers will try to click on the avatar to get more info about the author. Let’s see how to link the avatars that go to an archive of the author’s other posts.

In the above code where we have put the avatar beside the headline, insert the following code.

<div id="author_pic">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="author">
<?php echo get_avatar( get_the_author_meta('ID'), 50); ?></a>
</div>

Now, whenever your users click on the avatar, they’ll be taken to the author’s archive page.

We hope that you found this article helpful if you know any other method of how to add authors photo in WordPress, please share with us in the comment section.

Share this Story
Load More Related Articles
Load More By Editorial Team
Load More In Tutorials

One Comment


  1. Dev

    January 27, 2018 at 8:52 am

    Is there any wordpress plugin that can do the addition of Picture beside the name at the top of the post.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Join Over 50,000+ Subscribers

Interested In
  •   
  •           
  •                      

Search

WordPress Plugins and Themes