Add an Author Information Box to Your WordPress Theme

By Soumen Halder /

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.

The author box at Smashing Magazine Website

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.

problogdesign author box

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:

edit author profile in WordPress

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:

Show Author's URL

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.

Visit Author's Gravatar

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.

Add Twitter account

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:

display Twitter link of the author

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

Styling Author Box with CSS

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

author box code and output

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.

Is this article useful?
Soumen Halder

Soumen is the founder/author for Ampercent, a tech blog that writes on computer tricks, free online tools & software guides.

21 comments

  3. When you are using Thesis theme, the best SEO wordpress theme now, it is very easy to do that.

  4. Pure, rockin', goodness. I see these author boxes *everywhere*, and I'm so glad you shared how to integrate them with my theme. It's awesome that it's built into some themes, and it's awesome if there are plugins, but this full control code-integrated technique was perfect for me. Thanks!

  5. Thank you SpiritSentient. As you can see, it's not that hard to create a customized author information box in WordPress

  6. Yeah man! I created one very similar to yours on SpiritSentient immediately after reading your tutorial! So helpful :) (I'll look into customizing it more later :D)

    Thanks again man!

  10. Excellent tutorial! Well written and easy to implement due to your step-by-step description!

    Thanks for sharing!

  12. Thanks! After changing themes I realized I had lost my “About The Author” info. With your help, I was able to add that content back and retain my new theme.

  13. Hi,

    What WP plugin are you using in order to see that Expand profile for above user who commented the article?

    Thanks

    1. If you are referring to the comment system, we are using Disqus on this blog. All this profile expanding/collapsing feature is part of the Disqus commenting system.

  14. Thanks a lot for this, worked out great for me!! The only thing I found that had to be modified was the height that you added to I removed the height and add overflow:hidden so that no matter how much text is added the height will automatically adjust. What do you think of this method? Thanks again for a wonderful tutorial!!!

  15. Thanks Alot Dude =)
    You save my day Man!! This tutorial has everything regarding to what I was looking for
    Cheers

  16. Hi Soumen Halder, first of all I am really happy to find your post which is related to my blogs’ present need. However, I couldn’t found appropriate options in my blog to apply your instructions! So I am requesting you to please help me find out the way. Before I describe my problem you should know that I am not looking for multiple authors profiles on my blog but just only my profile and also I don’t have knowledge on codes! Anyways, here goes my issue:

    1) As you said in the first point, when I tried to fill the form I have found that the form is already set in the correct state. ie:
    Username
    Usernames cannot be changed.

    First Name

    Last Name

    Nickname (required)

    Display name publicly as

    admin
    Pradeep

    The ‘Bio’ and Website details were also filled. Then I had tried following your instructions from second point.

    2) Here, I had clicked the ‘Editor’ link under ‘Appearance’ Tab-> Single Post (single.php)->placed the code()given in your second point below this code ie found in the file. Then I inserted rest of the urcodes that are described in your third point below to the div class=”authorbox. 3)Clicked on update file and checked all my dashboard as well as viewe my blogbut found no changes! Well, now here started the mess! I really don’t know if I am doing it in a proper way or not! All this may sound stupid/weird to you but I sincerely needyour assistance in this aspect please!! FYI: http://www.realwebmarket.com/blog is my blog. You can reply to my mail idpdeepu84@gmail.com to further direct contacting.Look forward your help…ThanksPradeep.

  17. Thanks for the turtorial! I used it a few others to make our author box for http://www.MyRealityTech.com

    I still don’t think I’m 100% happy with it, but I HATE playing with code and decided it was good enough for the time being.

Comments are closed.

How to Link or Unlink Your Instagram Account from Facebook
How to Delete a Gmail Account Permanently
Free Memory Games for Adults and Seniors
ePUB Explained: What You Need to Know About this Ebook Format
15 Useful Android Chrome Flags You Should Enable
How to Log in to Your Facebook Account without Code Generator
What Is Kindle Unlimited? Here’s Everything You Need to Know
How to Verify Your YouTube Account in Minutes