There’s always something to howl about

Prequel to Speaking in Tongues: Displaying Author Images in WordPress

Several months ago, Greg described this process in Project Bloodhound speaking in tongues: To whom am I speaking?

At the time, I had no need to implement author images in a WordPress multi-author blog, (and I already knew the technique for TypePad), so I didn’t work with the process until just today.

As I set up what will become a company blog for our incoming agents, I realized that the average WordPress user might need a little more background information to put Greg’s code to use.

First of all, you need to find all your authors’ ID numbers.  Unfortunately current versions of WordPress do not show author ID numbers.  The easy solution for me was to download the Reveal IDs for WP Admin plugin.

Once the Reveal IDs plugin is activated, when you go to the Users page, you’ll see each author’s ID number displayed beside their username.  All ID numbers, that is, except your own.  The only way to see your own ID number is to create a new separate admin username and login, then login as that new identity, and find your old self on the list.

Next step:  Obtain images of each author.  Resize each image (I decided on 52 pixels in height, and 50 pixels in width as appropriate for the design I am using.)  Each image must be named simply by the author ID number.  For instance, my lovely image here on Bloodhound Blog is titled 34.jpg.

Upload all the newly resized and newly renamed images to your blog’s root directory.

Now you are ready to rock and roll.

Open your Main Index Template file (index.php)

I simplified Greg’s code for now to only display the author’s image and name

<img src=”<?php the_author_ID(); ?>.jpg” height=”52″ width=”50″ align=”left” hspace=”10″>
Posted by <?php the_author() ?> <br>

And I placed it under the PHP code that inserts the post title.  Here’s the complete snippet:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=”entry”>

<h1><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h1>

<img src=”<?php the_author_ID(); ?>.jpg” height=”52″ width=”50″ align=”left” hspace=”10″>
Posted by <?php the_author() ?> <br>

<span class=”meta”><?php the_time(‘F jS, Y’) ?> <br>
Posted in <?php the_category(‘, ‘) ?> <?php edit_post_link(‘| Edit’, ”, ”); ?></span>

<br class=”clear” /><br />

I’ll add the email link code when l actually have live people posting. :-)

UPDATE: Reading the comment stream suggests that a footnote might be indicated:  If you copy and paste the above code, you might want to first paste it into a plain text editor (Windows Notepad, for example), save it, select and copy it again from the text editor, then paste it into your index.php file.

Why?  Because your browser might copy in rich-text format, changing straight quote marks to curly quote marks  …  And code won’t run with curlies.

( Screen shots available at Queen of Kludge )

Related posts:
  • Speaking in tongues: Presentable PHP in WordPress
  • Appendix A: Linking to Author’s Profile in Multi-Author WordPress Blog
  • Project Bloodhound speaking in tongues: To whom am I speaking?


    8 Comments so far

    1. Mary Pope-Handy November 3rd, 2008 8:01 am

      Cheryl, if you ever teach a class in WordPress, I’d sure want to sit in on it. I only have my haunted r.e. blog on WP and I struggled with fonts and font sizes and it took eons for me to get how to do photos. (Typepad is much, much easier in my experience.) Anyway, let me know if you ever do a webinar :)

    2. Eric Blackwell November 3rd, 2008 2:23 pm

      Nicely done, Cheryl, as usual. Good stuff!


    3. Rafael Marrero November 5th, 2008 5:49 am

      Thank you so much for this. I have been searching for weeks for an easy, elegant solution like this! The code works fantastic on our site, it just doesn’t display the image of the author. I’m user ID 3, so in my blog root directory i have my pic 3.jpg saved. What am I doing wrong???? Please Help :) thank you so much in advanced

    4. Cheryl Johnson November 5th, 2008 12:55 pm


      Just looking at the site, I think you might need to place the images in the /blog folder instead of the domain’s root. See if that works.

    5. Rafael Marrero November 5th, 2008 1:23 pm

      I tried that also, in the blog root directory /blog/ and still no luck. could it be where I inserted the code was wrong? and maybe thats why it won’t show the image?? I love having an actual response finally to one of my questions lol.

    6. Cheryl Johnson November 5th, 2008 2:09 pm


      View your scource code. Looks like the quotes are rendering as “curly quotes” instead of plain text. Maybe deleting the quote marks in the code and hand typing them back in would fix that?

    7. [...] Originally posted on Bloodhound Blog [...]

    8. [...] setting up the author image code, I decided my next step would be linking the author name to the author’s profile page.  I [...]