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

  2. Author’s Last name: To display the author’s last name, use

  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

  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

  5. Author Description: To show the description of the author bio, use

  6. Display Author’s Website Link: To display the Author’s website URL, use 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 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 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 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 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: CSS Include the following code in the CSS stylesheet 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.