Prequel to Speaking in Tongues: Displaying Author Images in WordPress

by Cheryl Johnson

Real Estate Broker, Investor

Author website

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=”http://www.bobtaylorproperties.com/blog/<?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=”http://www.bobtaylorproperties.com/blog/<?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 )