October 6, 2009

How to make a author box in WordPress

Posted in Development, Wordpress by Alex | Tags: author box, bio, Wordpress

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

This simple technique will allow your article authors to display a bio and a Twitter link at the end of every article they write. The process is fully automatic, and the authors only need to fill in the required fields on their registration.

result

This is a simple and effective way to give authors that link love that they deserve for writing on your blog. The tutorial include some simple steps and code to set up. The tutorial is about setting up a author description and bio along with a Twitter link, and finally showing them inside a author box in WordPress.

Let`s get to work

Open up your functions.php and paste in the following code. This code will make a Twitter field that authors need to fill inside the user edit screen of WordPress.

<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 misname.</span>
    </td>
</tr>

And this is the actual result

Keep in mind that if you want to display something else besides the Tiwtter link, the only thing you need to do is to copy the Twitter code and change every twitter instance inside the code into something unique.

Now we need to save the links

To allow wordpress to save your Twitter link you need to pop this code inside the functions.php file just below the Twitter code we inserted before.

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'] );
}

Now, we need to set up the actual author box we will display at the end of every post that author writes. Here is how you can achieve this:

Paste in the following code inside the functions.php file.

function my_author_box() { ?>
    <div class="author-profile vcard">
        <?php echo get_avatar( get_the_author_meta( 'user_email' ), '96' ); ?>
 
        <h4 class="author-name fn n">Written by <?php the_author_posts_link(); ?></h4>
 
        <p class="author-description author-bio">
            <?php the_author_meta( 'description' ); ?>
        </p>
 
        <?php if ( get_the_author_meta( 'twitter' ) ) { ?>
            <p class="twitter clear">
                <a href="http://twitter.com/<?php the_author_meta( 'twitter' ); ?>" title="Follow <?php the_author_meta( 'display_name' ); ?> on Twitter">Follow <?php the_author_meta( 'display_name' ); ?> on Twitter</a>
            </p>
        <?php } // End check for twitter ?>
    </div><?php
}

Next, let`s add the code inside our single.php file for our author box to show. So open up your single.php and paste the following code just before the comments code:

<?php my_author_box(); ?>

And that is the whole thing. Furthermore you can stylize the author box by adding some extra CSS code inside your style.css. This is my actual code and you can customize it to fit your own needs.

.author-profile    {
padding:10px;
background-color:#c5ecfb;
border: 1px solid #0c529b;
}
 
.author-profile img    {
float:left;
margin-right: 15px;
}
 
.author-name {
font-size:1.9em;
font-family:Georgia,"Times New Roman",Times,serif;
margin-bottom:2px;
}
 
.author-description {
color:#333333;
font-family:Verdana,Geneva,sans-serif;
font-size:13px;
margin-top:5px;
}
 
.twitter a {
font-size:1.4em;
color:#005ec1;
text-decoration:underline;
font-weight:bold;
}