Creating an Author Page with an Author Image

May 11th, 2008 · No Comments · Category: WordPress

So you want to create a an author page for your WordPress blog? Good, I don’t know why most blog themes don’t already come with one. Fortunately, it’s not too difficult. I won’t bother explaining the code to those of you who don’t know or care about programming ’cause frankly I couldn’t anyway. I’m a designer and front end developer and certainly not well versed in PHP language. But, fortunately for your I am excellent at problem solving, analyzing and just following bloody directions :0)

Step 1

Create a file title “author.php”. I suggest using the content of the page.php file as a basis. Or any file with the loop already in it such as the index.php file. Upload author.php into your current theme’s folder where all the other files are such as index.php and page.php. When a template tag such as wp_list_authors is used, and a user clicks on an author at your site, this author.php page is the one that is automatically called.

FYI: The loop begins:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Step 2

Insert the following at the beginning of the page:

<?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;
?>

Add this in the main body of the page:

<h2><?php echo $curauth->display_name; ?>'s Blog(s) at OBN:</h2>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<ul>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a></li>
</ul>
<?php endwhile; else: ?>
<?php endif; ?>

Step 3

Now it’s time to add the image, which I placed next to the author’s description. First, install and activated Coffe2Code’s Author Images WordPress plugin. Then add the following in a division tag that floats left, if you like. If you’d like the image to float left and the description to float right, take note of the div classes and add to your stylesheet accordingly taking the suggestions I made in the desctipion of the classes, i.e., div class=”wrapfloatleft” means create a division class that floats the entire image and description section left, and so on. You don’t have to add the comment codes and the text in the comment codes (<!– text –>).

Alright. So that middle bit just under the <!–Author Image–> text prevents more than one image showing up. If you place the <?php c2c_the_author_image(); ?> without all the php code before and after it, one image will show for each post the author has ever published on your blog.

Step 4

Save author.php page. And you’re done.

Alright, so that’s it. This is how the author page will look:

<!-- AUTHOR IMAGE AND DESCRIPTION -->
<div class="wrapfloatleft">
<!-- AUTHOR IMAGE -->
<?php
global $post;
$myposts = get_posts('numberposts=1');
foreach($myposts as $post) :
?>
<div class="authorimagefloatleft"><?php c2c_the_author_image(); ?></div>
<?php endforeach; ?>
<!-- AUTHOR BIO -->
<div class="authorbiofloatright">About <?php echo $curauth->display_name; ?>: <?php echo $curauth->user_description; ?></div>
</div>

Author image page