Adding an Author Box with Author Image for WordPress Posts Without Using a Plugin

In this article, let's see how you can add an author box that would appear underneath your wordpress posts without using a plugin. This author box will also feature the author image. For uploading the author image, we will be using the built-in wordpress media uploader and not a plugin.

The final result would look like this:

As you can see, the author image, name and description is being displayed in the author box. The name of the author links to the author archive page which will list all of his/her articles.

If the author does not have a image set, the gravatar image will be used. If the gravatar image is also not set, the default gravatar image will be used.

Here are the steps to achieve this:

Step 1: Making the Upload Directory URL Structure Consistent

As we will be using the WordPress media uploader to upload our author images, we need to make sure that the URL structure of the upload folder remains consistent. Usually wordpress saves images into month and date folders, so the URL structure of the author image would look something like this:

http://sitename.com/wp-content/uploads/2015/03/image.jpg

This URL structure is inconsistent as the URL keeps changing with the month and year. To achieve consistency we need to tell WordPress to not save media files in month and year based folders so the URL looks as follows:

http://sitename.com/wp-content/uploads/image.jpg

To do this, login to your WordPress dashboard, go to Settings > Media and uncheck Organize my uploads into month and year-based folders and click Save Changes.

Step 2: Uploading the Author Image

As discussed above, we will be using the wordpress media uploader to upload our author images. So here's what you need to do in order for this to work:

1.) Scale your author images so they are around 120 x 120 pixels.

2.) Get the ID of the author you want to add an image for. If you don't know how to get the author ID, do this:

• Login to your wordpress dashboard and Go to Users > All Users.
• Click the name of the author you want to add an image for.
• Check the URL of the resulting page and look for the text user_id=. The number you see is the user ID of the author.

  eg: http://sitename.com/wp-admin/user-edit.php?user_id=24&wp_http_referer=%2Fwp-admin%2Fusers.php

  In the above example, the user ID of the author is 24.

3.) Once you get the user ID, the next step is to save the author image with the name 'author' followed by the 'user ID'.

For example, if he author has an ID of 24, the image for that author should be named author24. If the ID is 46, then the author image should be named author46.

3.) Once named in this manner, save the image as a jpg file (or png, but make sure to use the same extension for all author images) and upload to wordpress. To upload the image, login to your wordpress dashboard and go to, Media > Add New, select your image files and click upload.

Note: If you want to replace the author image for any given author, make sure to permanently delete the existing image first by going to, Media > Library and select the image and delete it. Once deleted, you can re-upload the image with the same name. If you upload a new image without deleting the old one, WordPress will rename the image and the new image will not load.

Step 3: Activating Gravatar

If the author does not have a custom image uploaded (as described in step 2) the Gravatar image will be used. If the author does not have a Gravatar image associated with his email address, then the default gavatar image will be used.

For this to work, you must ensure that gavatar is activated. To activate Gravatar, go to Settings > Discussion and under Avatars make sure that the Show Avatars box is checked.

Step 4: Adding Author Description and Display Name

To add author descriptions go to Users > All Users and click the author you want to add a description for and add the description in the Biographical Info field. This is the description that will be displayed in the author box.

Once done, in the Display name publicly as field, select the name format you want the author name to be displayed in. This is name that will be used in the author box.

Step 5: Adding the Code to Functions.php

Open your theme's functions.php file (Appearance > Editor > Functions.php) and add the following code to it:

/*Function to Add Author Box*/
function add_author_box($content){

if( is_single() ) {

/*Editable*/
$img_ext = 'jpg'; //Replace this with png if you are using PNG images.
$img_size = 82; //Edit this value to change the author image size.

/*Getting author info*/
$auth_id = get_the_author_meta('ID'); //Get author ID.
$auth_name = get_the_author_meta('display_name'); // Get author name.
$auth_des = get_the_author_meta('description'); // Get author description.
$auth_page_url = get_author_posts_url($auth_id); //Get author Page URL.
$upload_dir = wp_upload_dir();
$uploads_folder_url = $upload_dir['url']; //uploads folder URL.
$uploads_folder_path = $upload_dir['path']; //uploads folder path.
$auth_avt = $uploads_folder_url.'/author'.$auth_id.'.'.$img_ext; //author image URL.
$auth_avt_path = $uploads_folder_path.'/author'.$auth_id.'.'.$img_ext; //author image path.

/*Check if user uploaded avatar exists*/
if(file_exists($auth_avt_path)){
 $auth_img = '<img src="'. $auth_avt .'" width="'. $img_size .'" height="'. $img_size .'" >'; //If user uploaded avatar exists, use it in the display.
 }else{$auth_img = get_avatar( $auth_id, $img_size ); //If user uploaded avatar does not exist use gavatar.
 }
 
/*Output*/
$content .= "<div id='authorbox'><h3>Article by <a href='$auth_page_url'>$auth_name</a></h3> $auth_img $auth_des </div>";
}
return $content;
}
add_filter ( 'the_content', 'add_author_box', 0 );

Code Explanation:

We first check if the current page is a single page. If yes, we use the get_the_author_meta('ID') function to get the ID of the current author. This ID is coupled with the location of the uploads folder to generate the location of the author image as follows:

http://sitename.com/wp-content/uploads/author(author-id).jpg

We then use the PHP 'file_exists' function to see if the above file exists. If this file exists, then this image will be used for display in the author box. If this file does not exist, attempt is made to see if a gravatar is associated with the author's email ID. If yes, this gravatar will be used. If not, the default gravatar will be used.

Using the get_the_author_meta() function, we get the author's display name and description and use it to display in the author box along with the author image.

Finally, the author box is added to all single post pages by adding a filter to 'the_content' hook.

If you want to make changes to the author image size and extension, edit the following values:

/*Editable*/
$img_ext = 'jpg'; //Replace this with png if you are using PNG images.
$img_size = 82; //Edit this value to change the author image size.

Step 6: Styling the Author Box

Now we need to style the author box. To do this, open your theme's style.css file (Appearance > Editor > Style.css) and add the following CSS to it. You can always make changes to these values in order to get an author box of your preference like a bigger font size or a different background color.

/*author box style*/
#authorbox{
background: #fff; /*background color of the author box*/
border: 1px solid #ccc; /* border around the box */
width:100%;
overflow:hidden;
color: #333;
margin:15px 0 15px 0; /*space top and bottom of the box*/
padding-bottom:5px;
}
#authorbox h3{
font-size: 18px; /*font size of heading containing the author name*/
color:#333; /* color of the heading text */
margin:0 0 5px 0;
padding:5px 2px 5px 5px;
border-bottom: 1px solid #ccc;
}
#authorbox a{
color: #c87137; /* Link color */
text-decoration:none;
}
#authorbox img{
margin:0;
padding: 0 5px 0px 0px;
float:left;
}
#authorbox p{
color:#333; /* Author description text color */
margin:0;
padding:0px 5px 5px 5px;
font-size:14px;
line-height:150%;
}

Now you are all set. Check your wordpress posts to see if the author box is being displayed and edit the CSS file to make changes to its appearance.