WordPress: How to Add Author's Photo without Plugin

Easy steps on how to add author's photo without plugin in WordPress blog can be found in this post. A blog with more than one active author may need to display author's photo and bio to build emotional connection between readers and the author. It is probably even more relevant for a productive author and his or her readers when they engage actively in discussion's thread.

In a certain period of time in the past, thearoengbinangproject.com (may also be accessed by typing domain of aroengbinang.com or aroengbinang.org) also displayed authors' bios and photos in all individual posts. They were then removed to streamline pages as there were no more active authors available.

By showing authors' bios and photos, a blog adds at least two items to be called to load and open a web page, and also adds a line of css (Cascading Style Sheets). Hence, when the benefit is small, removing the two items will certainly speed up loading time of the web page. Speed is one the things that a blogger should consider seriously.

The post on How to Add Author's Photo without Plugin is intended to be an archive that can be easily found when it is needed sometime in the future, and also to share tips for those who need it.

Follow below steps to Add Author's photo without Plugin in WordPress's blog (self-hosted WordPress):
  1. Login to cPanel, open File Manager, double click directory of wp-content
  2. Create new folder by clicking +Folder on upper left menu, name it "authors" (without quotes) or other name as you pleased.
  3. Double click newly created "authors" folder, upload all authors' photo. Pixel sizes of the photos should be exactly the same with the ones that will be displayed on the web page.
  4. Login to your blog. In Dashboard, hover at "Users" menu on lower left, click "All Users"
  5. Hover on a number below "Posts" on the far right column belonging to one of the authors, and write down author's ID (look at lower left while hovering the number: "author=1" means the author ID is 1, and so forth).
    Repeat above steps to get all authors' IDs.
  6. Rename file names of all uploaded photos to match with authors ID. For example for author ID 1 name the file 1.jpg etc.
  7. Next, copy paste the following code in a php file where you want to display the author's photo. It can be in single.php or author-bio.php, depends on theme that you use:
    <img src="/wp-content/authors/<?php the_author_ID()?>.jpg" />
  8. For subfloder, add the name of the subfolder, e.g.:
    <img src="/blog/wp-content/authors/<?php the_author_ID()?>.jpg" />

Make sure all authors fill "Biographical Info" data in their respective user profiles in Dashboard.

Next is to adjust photo's position to bio-description. You may want to wrap text around photo by adding float:left in the css.
Like | Tweet |