How to Make a Royally Awesome Author Template in WordPress

By: • Categories: Tutorial WordPress

I’ve been trying some new stuff with my client’s websites as of late.  I wanted something where a multi-blog site could get the most out of as few plugins as possible, and still have a really awesome way to display their author’s main information.  But, the information they ask for doesn’t have everything.  What about twitter profiles? Facebook links?

There’s a few things we can do to enhance the process.

We’re going to be accomplishing a few things here:

  1. Building an author.php template to take care of author links
  2. Downloading and installing any necessary plugins
  3. Customizing the author profile with new fields.
  4. Calling those new variables in the author template.

Step 1: Building an Author.php template

So, WordPress’ structure for templates goes as follows:

  • author.php
  • archive.php
  • index.php

It looks for files (top to bottom) and uses whichever one it finds to do its bidding.  Since default templates don’t usually have one, we’re going to build an author.php file.  To start with, let’s make it look something like this:

<?php get_header(); ?> <div id="content" class="narrowcolumn"> <!-- This sets the $curauth variable --> <?php if(isset($_GET['author_name'])) : $curauth = get_userdatabylogin($author_name); else : $curauth = get_userdata(intval($author)); endif;  ?> <h2>About: <?php echo $curauth->nickname; ?></h2> <dl> <dt>Website</dt> <dd><a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></dd> <dt>Profile</dt> <dd><?php echo $curauth->user_description; ?></dd> </dl> <h2>Posts by <?php echo $curauth->nickname; ?>:</h2> <ul> <!-- The Loop --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"> <?php the_title(); ?></a>, <?php the_time('d M Y'); ?> in <?php the_category('&');?> </li> <?php endwhile; else: ?> <p><?php _e('No posts by this author.'); ?></p> <?php endif; ?> <!-- End Loop --> </ul> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

What this does is set up the author variables, calls some basic variables like name, url, and a bio (description), and displays the last X posts (defined by the number set in the options menu).  We’re going to be modifying this quite a bit, but this gives us a good start point.

Save this as author.php, send it to your server via FTP, and open it in your theme editor to make sure it looks OK.

Step 2: Plugins We’ll Need

Actually, we’ll only need one plugin to really get the most out of this: the Authors Widget plugin. This gives us a really cool widget that pulls the author’s name and gravatar (if you choose) and displays post counts (also if you choose – lots of options).  It’s a fast way to showcase all the authors in the sidebar.  If you click on the author’s name, it takes you to their author page (which is what you just build [author.php]).

Step 3: Adding Fields to the User Profile

Open the theme editor and edit (or create an upload if you don’t have one) the functions.php file.  This file has lots of drop-in options you can get from Google to enhance your theme.  Widgetized sidebar code goes here too, so most people have one already.

Drop in this data:

add_action( 'show_user_profile', 'my_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'my_show_extra_profile_fields' );

function my_show_extra_profile_fields( $user ) { ?>

<h3>Extra profile information</h3>

<table class="form-table">

<tr>
<th><label for="twitter">Twitter</label></th>

<td>
<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr
( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your Twitter profile URL.</span>
</td>
</tr>

<tr>
<th><label for="facebook">Facebook</label></th>

<td>
<input type="text" name="facebook" id="facebook" value="<?php echo esc_attr
( get_the_author_meta( 'facebook', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your facebook profile URL.</span>
</td>
</tr>

<tr>
<th><label for="linkedin">LinkedIn</label></th>

<td>
<input type="text" name="linkedin" id="linkedin" value="<?php echo esc_attr
( get_the_author_meta( 'linkedin', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your linkedin profile URL.</span>
</td>
</tr>

</table>
<?php }

add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );

function my_save_extra_profile_fields( $user_id ) {

if ( !current_user_can( 'edit_user', $user_id ) )
return false;

/* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
update_usermeta( $user_id, 'facebook', $_POST['facebook'] );
update_usermeta( $user_id, 'linkedin', $_POST['linkedin'] );
}

This dataset is for adding a twitter, linkedin, and facebook profile link box to each user profile.  You can customize it however you need to, just add:

<tr>
<th><label for="twitter">Twitter</label></th>

<td>
<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta
( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
<span class="description">Please enter your Twitter profile URL.</span>
</td>
</tr>

and change the values from “twitter” to whatever you want the field to be called.  Also, add a line like this:

update_usermeta( $user_id, 'linkedin', $_POST['linkedin'] );

under the rest.  That will allow the data to be saved.

4. Changing the Author Template

Now that we have some really cool custom values, let’s edit our template a little bit.  We’re going to change it to this:

<!-- This sets the $curauth variable -->

<?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;
?>
<div class="author_bio">
<h2><span><?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?></span></h2>
<div class="floatLeft" style="margin-right: 10px"><?php echo get_avatar($curauth->ID, $size = '96'); ?></div>

<p><?php echo $curauth->user_description; ?></p>
<div class="clear"></div>
<h2 class="connectwith"><span>Connect with <?php echo $curauth->first_name; ?>:</span></h2>
<div class="clear"></div>

<ul>
<li><a class="linkedin" href="<?php echo $curauth->linkedin; ?>">linkedin profile</a></li>
<li><a class="facebook" href="<?php echo $curauth->facebook; ?>">facebook profile</a></li>
<li><a class="twitter" href="<?php echo $curauth->twitter; ?>">twitter profile</a></li>

</ul>
<div class="clear"></div>
<h2 class="postsby"><span>Posts by <?php echo $curauth->first_name; ?>:</span></h2>
</div>
<!-- The Loop -->

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<div class="entry">
<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
<div class="clear"></div>
<div class="tags"><?php the_tags( '<p>Tags: ', ', ', '</p>'); ?></div>

</div>

</div>

<?php endwhile; else: ?>
<p><?php _e('No posts by this author.'); ?></p>

<?php endif; ?>

Notice the changes we’ve made:

  • We’ve added the user’s first name and last name.  This will allow users to know exactly who the author is
  • We’ve added the gravatar by user ID and given it a right margin to prevent text-bumping
  • There’s a new section called “Connect With X” – it has an unordered list that contains the three fields we just created, echoed in a hyperlink to allow for automatic linking to profiles.

You can style this, or modify it, however you want, but this is a fairly simple technique to allow authors to have an automatically generated page with 1) their information, 2) their picture/avatar, and 3) their latest posts.

13 comments
zenstar
zenstar

@ppradeep step 1: uload it to wp-content/themes/yourtheme/......[here].....

step 2 : you can skip the widget process

step3 : put the code at the end of the page before "?>" if you dont have this at the end it's not a problem just past at the end on the page

step4: you can mail me the details and i will help you

ppradeep
ppradeep

Hi,

I was just trying to follow your suggestions step by step but unfortunately couldn't make single step!

So, I would like to take your support from the issues I had seen in each step.

Step 1:

The author.php file made from the above suggestions is uploaded to my blog via FTP but I couldn't see that in the wp Appearance-> Editor! So I tried uploading to various location inside the blog, like I tried uploading it to the wp-admin, wp-content, wp-includes folders and looked in the wordpress blog admin but couldn't find the author.php!!

Step 2:

It was just me who writes content on my blog and this plugin seems to be useful to multiple bloggers/authors. In case if it could be used for single author, please suggest if I need to go through the widgets process or just continue with step 3?

Step 3:

Fortunately I have the functions.php file in my blog lists but I am not sure where exactly I should past the above code inside it! I think I should use it inside the widgets code but as I know nothing about code, I certainly need your help in placing the above code in the exact location.

Step 4:

I had the same probe in this step as with Step 3, I don't know where exactly could I use the code!?

I wish to email you my details if you wish to see the code and direct me where to place it

Hope you will help me solve my issue in this regard!!

Awaiting your reply..

Pradeep.

ppradeep
ppradeep

Hi,

I was just trying to follow your suggestions step by step but unfortunately couldn't make single step!

So, I would like to take your support from the issues I had seen in each step.

Step 1:

The author.php file made from the above suggestions is uploaded to my blog via FTP but I couldn't see that in the wp Appearance-> Editor! So I tried uploading to various location inside the blog, like I tried uploading it to the wp-admin, wp-content, wp-includes folders and looked in the wordpress blog admin but couldn't find the author.php!!

Step 2:

It was just me who writes content on my blog and this plugin seems to be useful to multiple bloggers/authors. In case if it could be used for single author, please suggest if I need to go through the widgets process or just continue with step 3?

Step 3:

Fortunately I have the functions.php file in my blog lists but I am not sure where exactly I should past the above code inside it! I think I should use it inside the widgets code but as I know nothing about code, I certainly need your help in placing the above code in the exact location.

Step 4:

I had the same probe in this step as with Step 3, I don't know where exactly could I use the code!?

I wish to email you my details if you wish to see the code and direct me where to place it

Hope you will help me solve my issue in this regard!!

Awaiting your reply..

Pradeep.

wda
wda

WAOn you make day! :) very nice that's wht i need.

wda
wda

WAOn you make day! :) very nice that's wht i need.

Rob
Rob

This post is exactly what I have been looking for, thanks for the help on this. I have one question though:
Could an if statement be used like this to check for the media icons existing:

linkedin){ // check to see if author has a linkdin account

echo '<a class="linkedin" href="linkedin; ?>">linkedin profile';
}

Rob
Rob

This post is exactly what I have been looking for, thanks for the help on this. I have one question though:
Could an if statement be used like this to check for the media icons existing:

linkedin){ // check to see if author has a linkdin account

echo '<a class="linkedin" href="linkedin; ?>">linkedin profile';
}

Jeffrey
Jeffrey

very helpful, thanks :D

zenstar
zenstar

@ppradeep step 1: uload it to wp-content/themes/yourtheme/......[here].....

step 2 : you can skip the widget process

step3 : put the code at the end of the page before "?>" if you dont have this at the end it's not a problem just past at the end on the page

step4: you can mail me the details and i will help you

studionashvegas
studionashvegas

it was stripped out - try using a pastebin and pasting the link in

Rob
Rob

Ok so I have used this code in my functions.php page. However it causes the infamous white screen after publishing and type of page or post. I also tried adding it to the default theme and it did the same. Any thoughts?

studionashvegas
studionashvegas

In your wp-config file you can add the lines:
define('WP_DEBUG', true); // Turn debugging ON
define('WP_DEBUG_DISPLAY', false); // Turn forced display OFF
define('WP_DEBUG_LOG', true); // Turn logging to wp-content/debug.log ON
and it will turn on error logging - that turns your white screen into a log file - once you do that it will point you in the right direction as to where the problems lie (it's usually a semi colon in the wrong spot or something really simple)

studionashvegas
studionashvegas

In your wp-config file you can add the lines:
define('WP_DEBUG', true); // Turn debugging ON
define('WP_DEBUG_DISPLAY', false); // Turn forced display OFF
define('WP_DEBUG_LOG', true); // Turn logging to wp-content/debug.log ON
and it will turn on error logging - that turns your white screen into a log file - once you do that it will point you in the right direction as to where the problems lie (it's usually a semi colon in the wrong spot or something really simple)

Trackbacks

  1. […] How to Make a Royally Awesome Author Template in WordPress | Mitch … […]