Add an Author Information Box to Your WordPress Theme

Do you have multiple authors writing articles in your WordPress blog? If yes, then it would be a good idea to add an author box in your blog’s theme rather than adding the author byline manually in each and every single article. WordPress allows so many customizations that you can quickly code a simple author box for your blog’s theme.

Before we go further, let’s have a look at some examples:

1. Smashing Magazine Author Box

This is how the author box looks in the popular design blog Smashing Magazine. The byline of an article shows the name of the author, profile image, description, blog URL and a link to author’s Twitter account.

2. ProBlogDesign Author Box

The author box at Problogdesign looks very impressive. The author Gravatar and description is shown in the left column while the right column shows social bookmarking buttons.

Create An Author Box For your Blog’s Theme

1. First, get all the authors to update their author profile from the “Profile link” provided within the WordPress administration area. The author should fill out the first name, last name and add a custom bio in the description field. It’s also recommended to add the link of Author’s website in the corresponding field as shown below:

These are the basic parameters which we will display in the author byline section. We will add the other parameters later (if required.)

2. To show the author box, open your single.php file and create a unique HTML div within which the author box will be enclosed. For example

<div class="authorbox">
 
</div>

This div is created so that we can add CSS rules and style the section accordingly. You can place this code where you want the author byline to display.

3. Now you need to decide what are the elements which you want to show in the author byline section. Some of the parameters and their respective codes are given below:

1. Author’s First Name :

If you want to display only the first name of the author, use

<?php the_author_meta('user_firstname'); ?>

2. Author’s Last name:

To display the author’s last name, use

<?php the_author_meta('user_lastname'); ?>

3. Show both the first name and the last name:

It’s easy to combine both the above codes and display the full name of the author. To display the full name, use

<?php the_author_meta('user_firstname'); ?> <?php the_author_meta('user_lastname'); ?>

4. Show Author Name with a Link to his Website:

You can show the author’s full name and at the same time link the name to the author’s website. Use

<?php the_author_posts_link(); ?>

5. Author Description:

To show the description of the author bio, use

<?php the_author_meta('description'); ?>

6. Display Author’s Website Link:

To display the Author’s website URL, use

<?php the_author_meta('user_url'); ?>

All of the above codes can be customized to suit your style. You can further enclose the above codes within HTML tags as shown below:

7. Author Gravatar:

To display the author’s Gravatar use

<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>

The number “80” used in the above code stands for the size of the image. You can customize it further which depends on how big or how small you want the avatar to be displayed.

I think you are getting the idea how to customize the codes, which entirely depends on how you want the section to look like.

8. Author’s email address:

To display the author’s email address, use

<?php the_author_meta('user_email'); ?>

9. Link to Twitter account:

This one is a bit tricky, because WordPress does not have any field for displaying the URL of Twitter profile by default. However, there is a smart workaround which can be used to show any custom link or text as provided by the author.

Ask the authors of your blog to add the link of their Twitter account in the AIM field under “Profiles” in WordPress administration area.

Now go back to single.php file and insert

<?php the_author_meta('aim'); ?>

to display the Twitter profile link. Again, it totally depends on how you customize the look and output. Here is an example code:

Style The Author Section using CSS

Once the coding job is over, it’s time to beautify the section and align the items properly. Here is an example css code

<div class="authorbox">
 
    <div class="left">
        //contains the gravatar
    </div>
 
    <div class="right">
        //rest of the code
    </div>
 
</div>   //author box ends

The above structure can be illustrated by the following diagram

In the above CSS structure, we are creating three div tags. The Outer div tag will contain the two inner div tags which are named as “left” and “right” respectively. The “Left” div will contain the author gravatar while the right div will contain the author’s name, bio and Twitter profile link. We will align the “left” div to left and the “right” div to right. Here is the entire code and CSS which you need to use

Code

Include the following code in your single.php file where you want the author info section to appear:

<div class="authorbox">
    <div class="left">
        <?php echo  get_avatar( get_the_author_email(), '80' ); ?>
    </div>
 
    <div  class="right">
        <p><strong>Written by <?php  the_author_posts_link(); ?></strong></p>
        <p><br><?php  the_author_description(); ?></p><br>
        <p><a  href="<?php the_author_meta(‘aim’); ?>">Follow me on  Twitter</a></p>
    </div>
</div>

CSS

Include the following code in the CSS stylesheet

.authorbox{width:590px;height:140px;background:#CCC;font-family:verdana;font-size:13px;background-color:#FAFAFA;border:1px solid #F0F0F0;}
.left{float:left;width:100px;height:100px;margin:25px;}
.right{float:left;margin-top:25px;width:425px;}

Note: It’s advisable to change the class names by comparing with existing classes of your theme to avoid conflict.

And here is the output of the above codes

That concludes the tutorial. Have you created an author Info section in your WordPress theme? Let’s hear your thoughts and ideas in the comments section.