Dec
7
Adding Post Author Avatars
Filed Under Tools and Tutorials, Wordpress | 9 Comments
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.
Comments
9 Comments so far
Thanks for this, Elizabeth. That’s most useful and very clear. I’m sure lots will find it helpful.
Thank you, Barry, and thanks for checking in. Though I have three (count ‘em, three!) trackbacks, you are my very first commenter.
Small customizations can be easy, fun and add personalization. While I’m feeling out what direction I want to take with this site I’ll be posting a few of these sorts of tips potluck style, like reverse housewarming gifts.
[...] Adding Post Author Avatars [...]
How can I use this code with categories? I tried and only displays the links to the categories and I tried also but doesnt show anything.
Thank you
Bernal, This particular code has to do with the_author_ID tag. You’d need to look at category tags to figure out what will work with them. Sorry!
Thank you so much for pointing me in the right direction. I wanted to have an avatar appear for a particular category (where my YouTube videos would post automatically and I didn’t want to have to manually set the avatar), and you put me in the right direction.
Bernal, the code above is the same, but instead of using “the_author_ID”, simply use “the_category_ID” (as of Wordpress 2.8.4) and name your category image as [category_number].jpg within the specified directory.
E.
I just wanted to say a big thank you for this useful piece of code. I’d previously been considering writing a plugin for this that would allow our company to load in custom avatars, but when you can simply upload a directory of them based on user_ids, it’s so much simplier to get done.
Thanks!
I don’t think I’ve ever seen a “how to” so nicely done and easy to understand as this. VERY MUCH appreciated! Thank you!
it’s a simple advice like yours, NOT a premade plugin that help people understand WP. Even for a php dummy like me.
Thank you very much