Custom WordPress author page

This how-to is important for blogs that have multiple authors, but works for single-author blogs as well. If your WordPress blog doesn’t have the author.php template, then this might just be for you. It’s a good way to promote your blog by providing your readers with juicier information about yourself (and your co-authors). This works for WordPress versions 2.5 and above.

Step #1

Upload a blank file named author.php to your theme directory [wp-content/themes/template-name/]. You must use that exact filename, otherwise, WordPress won’t recognize it. Once that’s done, you’ll see this template file appear in your Theme Editor screen inside your WordPress admin backend. Best way to make sure that the Author page comes out looking like the rest of your blog is by copying the contents of Page Template (page.php) into author.php.

Step #2

Locate The Loop, or the section of the template that controls the display of your content. The beginning of The Loop looks like this:

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

Sometimes it can look like this:

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

You can go ahead and delete this entire section, which ends in <?php endif; ?>. Be careful to check that you’re not deleting closing tags that do not exist inside The Loop, for example, </div> tags that were opened above the concerned section.

Make sure that the public content containers (eg., <div id="content"> or possibly <div class="post">) are still intact. Those are the elements that carry the CSS design and layout declarations of your web site. This is where you will insert the code for displaying author information.

Step #3

Copy the code below into your content container:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<?php
	global $or_query;
	$curauth = $or_query->get_queried_object();
?>
 
<h2>About : <?php echo $curauth->nickname; ?></h2>
 
<dl>
<?php if($curauth->first_name !="" && $curauth->last_name !="") { ?>
   <dt>Full Name</dt>
      <dd><?php echo $curauth->first_name. ' ' .$curauth->last_name ?></dd>
<?php } ?>
<?php if($curauth->aim !="") { ?>
   <dt>AIM</dt>
      <dd><?php echo $curauth->aim; ?></dd>
<?php } ?>
<?php if($curauth->yim !="") { ?>
   <dt>Yahoo! Messenger</dt>
      <dd><?php echo $curauth->ym; ?></dd>
<?php } ?>
<?php if($curauth->jabber !="") { ?>
   <dt>Google Talk / Jabber</dt>
      <dd><?php echo $curauth->jabber; ?></dd>
<?php } ?>
<?php if($curauth->user_url !="" && $curauth->user_url !="http://") { ?>
   <dt>Website</dt>
      <dd><a href="<?php echo $curauth->user_url; ?>">
            <?php echo $curauth->user_url; ?></a></dd>
<?php } ?>
<?php if($curauth->description !="") { ?>
   <dt>Bio</dt>
      <dd><?php echo $curauth->description; ?></dd>
<?php } ?>
</dl>

Simply put, what the above code does is to output all the information that your blog’s authors have supplied in their profile (http://www.yourblog.com/wp-admin/profile.php). Blank fields won’t be visible, of course.

Step #4

Wouldn’t it be cool to have your photo appear on your Author page? Well, there’s something you can do about that, too! Just make sure you (and your co-authors) have an account with Gravatar.com.

Insert this piece of code just before the <dl> tag above:

1
2
3

<div style="float:right;">
<?php echo get_avatar($curauth->user_email,'60'); ?>
</div>

You can make it left-aligned or centered to suite your taste. Also, you can change the value 60 to any other number that’s either equal to or less than 80. It controls the size of the avatar.

What about a Yahoo! Messenger online status image? What the above code does is simply to display your Yahoo! ID. If you’d like to show something fancier, here’s the code to replace <dd><?php echo $curauth->ym; ?></dd> above: <dd><a href="http://edit.yahoo.com/config/send_webmesg?.target=<?php echo $curauth->yim; ?>&.src=pg"><img border="0" src="http://opi.yahoo.com/online?u=<?php echo $curauth->yim; ?>&m=g&t=1&l=us"></a></dd>

I don’t know if there’s such a thing for Google Talk, though. Anyone?

OK, on to the last part.

Step #5

This section is for showing posts by author. Insert the code below after the </dl> part in the code above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<h2>Posts by <?php echo $curauth->nickname; ?>:</h2>
 
<ul>
<!-- The Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<li><?php the_time('Y-m-d'); ?> - <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
 
<?php endwhile; else: ?>
 
<p><?php _e('No posts yet by this author.'); ?></p>
 
<?php endif; ?>
<!-- End Loop -->
</ul>

The date format I chose for the example will be shown like so: 2008-01-02. If you’d like another format, refer to the PHP manual for the formatting characters.

Step #6

The number of posts (the above code will spit out only the linked titles) to be displayed is controlled by WordPress settings [Dashboard > Settings > Reading]. In order to show links to older — and newer — entries, add the code below. If you have the WP PageNavi plugin installed, much better!

1
2
3
4
5
6
7
8
9
10
11
12
13

<div align="center">
<?php if(function_exists('or_pagenavi')) { ?>
   <?php or_pagenavi(); ?>
<?php } else { ?>
   <div class="alignleft">
      <?php next_posts_link('Older Entries') ?>
   </div>
   <div class="alignright">
      <?php previous_posts_link('Newer Entries') ?>
   </div>
   <br clear="all" />
<?php } ?>
</div>

You’ll notice that there are hardly any design elements in the above pieces of code. That’s up to you. Feel free to add your own positioning and other visual stuff via CSS.

Step #7

So, what’s the URL of the Author page? It’s normally http://www.yourblog.com/author/username. To make this more accessible, check your index.php, single.php, archive.php and other templates where the author’s name (or nickname) is being called. If the WP function is not the_author_posts_link(), then change it to that function so that the display name will be clickable to your brand-new Author Page.

Check out the following author pages at RP2010.com:

• Blogie
• Waltzib

Blog on!!