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

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

<?phpecho 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

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:

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.

Is this article useful?

The Complete Beginner's Guide to Ubuntu 16.04

Are you tired of using Windows or OS X as your operating system and thinking of trying out, and possibly switching, to Linux? In this Complete Beginner's Guide to Ubuntu 16.04 ebook, we will guide you and show you everything you need to know about Ubuntu - the most popular Linux distro.

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!

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!!!

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.