You can display the author’s images in the writer biography box which exposes the author’s social media profiles.
In WordPress, there is a number of WordPress plugins that can show the gallery of the author.
Some of the plugins that solve this problem include Social Author Bio and Xpandable author tab.
But it is not necessary to install a plugin since the get_avat function can be used to display the author’s image.
The good thing about this, very few codes are required to have the writer’s photo on the page.
Here is a step-by-step guide to getting the author’s photo.
Get the current post author id
The get_avatar always takes in the author id to return the image HTML string.
The id helps the system to know which image to be retrieved.
Since the IDs are unique the image of the author can easily be fetched.
The WordPress function get_the_author_meta can retrieve the ID of the current post author.
Its code is written like this.
$authorID=get_the_author_meta('ID');
Previously the author was being retrieved by get_the_author_ID but the function is deprecated.
Avoid get_the_author_ID because there is no maintenance on it.
Specify the place to display the author image
You should create a container in which the image displays.
The div tag can be created in single.php, page.php, or even the index.php
Here, the image width is set to 120 and the height is 120.
You will use get_avat inside the container like this.
1.<div class = "authorImage">
2.<?php echo get_avatal($authorID, 120);?>
3.</div>
When you display the author photo by get_avatal, the id of the author and photo dimension must be provided.
Line-2 for instance a function passes two arguments, these arguments are
- The ID of a user.
- The image size
Without user-id, get_avatal won’t fetch the image.
The WordPress user id can even fetch the author posts.
The only task you have right now is to style the image by CSS codes.
This post doesn’t cover that but you can find it here.
Formulate author image URL in Custom directory
I have learned that WordPress displays the author photo hosted by gravatar.
The author is supposed to upload the image to a gravatar site.
But the photos can be uploaded to a local directory.
To do that the following steps to be considered.
Create the directory for saving the images specially for the author.
In this example, the directory is “author_galleries”
Create a function in the functions.php
The function will form the image path.
The image src attribute is going to display the image basing on the provided image pathname.
The apply_filter executes the new function by the get_avatar action hook.
This below is a complete function to be written in functions.php
functions getAuthorImage($avatar){
$authorID=get_the_author_meta('ID')
$authorImagesPath = bloginfo ('template_directory'). '/author_galleries'.$authorID.'.jpg';
$authorPhotoDisplay = '<img src = "'.$authorImagesPath.'">';
return $authorPhotoDisplay;
}
apply_filter ('get_avatar','getAuthorImage');
To display the image in single.php just call get_avatal($authorID, 120);
There is something you may ask yourself.
What if the author has never uploaded?
You must control this.
Check if the author has an image
The post will show the author picture if and only his image exists.
Note that when you apply get_avatar it returns the <img> tag.
Hence the output for the absence author profile picture is a broken image.
To fix this you will check if get_avatar returns the value greater than zero when a user is passed.
If the value is equal to zero, it means the author’s picture doesn’t exist so you can set a rule via a code.
Again, this code can be written in single.php
1.$authorID=get_the_author_meta('ID');
2.<?php if(get_avatar($authorID)!=0):?>
3.<div class = "authorImage">
4.<?php echo get_avatal($authorID, 120);?>
5.</div>
6.<?php else:?>
7.<?php the_author();?>
8.<?php endif;?>
The snippet shows the author’s name if the author’s image is unavailable.
It is implemented by line-7
It is a good idea to enable authors to upload their photos.
But WordPress may not allow that if you don’t define the author role properly.
The next section explains the required steps.
Enable author to upload profiles photo
To allow users to upload the images use get_role and add_cap functions.
A function register_activation_hook will run the function.
This is how to give the user an uploading capability by writing a function in functions.php
function uploadUserImageRole(){
$authorRole = get_role ('contributor');
$authorRole ->add_cap('upload_file');
}
register_activation_hook(_FILE_,'uploadUserImageRole');
Giving the author a contributing role makes the ability to upload the photo in WordPress.
The get_role object uses a method add_cap to enable the author to upload the image.
Get the avatar link only
You can the author avatar URL using the get_avatar_url functions.
The get_avatar_url requires the user id or an email to retrieve the required link.
Therefore you should know the id or the email of the author or a user.
This is how to retrieve the author URL only without image tags.
$theAuthorID = get_the_author_meta ('ID');
get_avatar_url($theAuthorID);
Also, you can get an avatar URL by email.
get_avatar_url (get_the_author_meta ('ID'));
These below are other WordPress tips you may like.
Add submenu item programmatically.
How to add slider in WordPress without plugins
