One of the neat things about WordPress is that a non-programmer can add personalized tweaks fairly easily, with a basic understanding of nesting. The trick is to find what something is called and simplify goals. Simplification is often a matter of not requiring special treatment for specific situations, unless that is something you already know how to do. Of course, once you know a thing it becomes infinitely simpler to accomplish.
In this case, I wanted avatar images to appear automatically at the top left of a multi-authored Kubrick-based theme. I wanted the “Pages” content to be associated with the site as a whole, not with any individual writer. Guest blog authors have their own WordPress user accounts. Some posts are attributed to site staff and can be represented by a logo. Already, that gives me a few places to start.
WHAT: an image
<img src="filename.jpg" />
When doodling about how to accomplish something, I like to start on familiar territory, as simply as possible.
To make it easier to keep track of my images, I created a folder called avatars, and placed it in the wp-content folder. Using <?php echo get_option('home');?> to define the root domain of the blog makes this bit of code reusable, should I want to use it for another site. The result is an as-yet undefined file name with a URL that looks like this:
<?php echo get_option('home');?> /wp-content/avatars/filename.jpg
WHO: post authors
Next I decided how to tell WordPress to display a specific image for each author. Because all authors have a user ID, which image to display can be taken care of by associating the image with the user ID of the current post’s author. I looked in the file “/wp-includes/author-template.php” to see how WordPress defines things author. This is also how I found the code I used to define my alt descriptions.
The result is a file name that looks like this:
<?php the_author_ID(); ?>.jpg
For this to work, the avatars folder I made in the last step needs to contain an image for each author ID that is named to correspond to that ID. The file name “1.jpg” would be inserted by WordPress when the person with ID number “1” is the author. You can find author ID numbers listed by user names, under the Users tab.
ALT: describe the image
Following the same logic, I chose to use the following to automatically create my alt descriptions:
<?php the_author(display_name); ?>
Easy peasy.
HOW: control image styling
Add a class to your stylesheet that will control and enhance image styling.
I like to float author avatars to the left and give them a little padding and a border. Below is the css I used for the image at left.
.avatar {display: inline; float: left; padding: 4px; border: 4px solid #efefe7; margin: 5px 10px 7px 0px;}
WHERE: choose placement in template files
The following will work in Kubrick-based themes, as well as many others. Your own theme may have design elements that require a little tinkering, or even have different template files.
To place an author avatar only in blog posts, add the code below into index.php. Do the same in page.php if you also want avatars on static Pages.
Add these lines just before <?php the_content.
<img src="<?php echo get_option('home'); ?> /wp-content/avatars/<?php the_author_ID(); ?>.jpg" class="avatar" alt="<?php the_author(display_name); ?>" />
And that’s it.
Hat tip to CodeHighlighter plugin by Wongoo Lee.