Author


March 5th, 2008 @ 12:23 pm in Wordpress 2.7 by Beast

When I was laying out the groundwork for this site, one thing I wanted to have was an avatar per author. Not only are these mini-pictures cool to look at, but they provide instant identification as to the author of a post. I figured it’d be really easy to implement when the time came so I didn’t worry about it. Unfortunately that wasn’t the case. After many hours of trying to figure out how to tweak the wordpress code, I stumbled on a site that had a dirty - yet effective - solution to this problem.


  • Step 1. rename the avatar to coincide with the author’s name. For example, author “CheeseBall” would name his image CheeseBall.* where * is the designated picture extension (jpg, gif, png, etc.)

  • Step 2. upload the avatar to the web site’s image directory. Unless you’ve restructured the directories, it should be located here: wp-content\themes\yourtheme\images

  • Step 3. locate the main loop - which should look something like this (the while part is what we’re interested in finding):
    • <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  • Step 4. place the following code somewhere AFTER the loop:
    • <img class="author-avatar"
      src="<?php bloginfo('stylesheet_directory'); ?>/images/<?php the_author() ?>.*"
      alt="Author"/>
  • I’m not 100% as to what the above code does, but here’s my take on what’s happening. First the php bloginfo() function is called and somehow locates the stylesheet directory
    (ex: wp-content\themes\yourtheme\) and proceeds to the images\ directory. Then the picture is grabbed based on the author’s name (ex: CheeseBall) and the file extension (change the * to jpg, gif, etc.).

  • Step 5. customize via CSS.



Simple as that. Not the most elegant way of doing things, but I thought it was pretty clever.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>