Skip to content
  • PC & Mobile
    • Windows
    • Mac
    • Linux
    • Mobile
    • Android
    • iOS
    • Chrome OS
  • Hardware
    • Hardware & Gadgets
    • Product Review
    • Smart Home
  • Lifestyle
    • Internet
    • Gaming
    • Productivity
    • How Things Work
    • Glossary
  • Cheatsheets
  • About
    • About Us
    • Contact Us
    • Privacy
    • Advertise with Us
    • Write For Us

Dark mode:

Home > Internet

Add an Author Information Box to Your WordPress Theme

Soumen Halder
Mar 24, 2010

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.

Soumen Halder

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

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox

Popular Posts

How to Get a Free SSL Certificate for Your WordPress Website

How to Set Up WordPress Using Docker in Ubuntu

How to Add a WhatsApp Chatbox to Your WordPress Site

How to Set Up WordPress for Local Development in Linux

How to Make Your Own AutoText Templates in LibreOffice Writer

The Beginner's Guide to HTML and CSS

6 Fun Games to Help You Learn CSS Easily

How to Change the Mouse Pointer in CSS

6 of the Best WordPress Hosting Services for Your WordPress Site

7 of the Best Notification Plugins for WordPress

Affiliate Disclosure: Make Tech Easier may earn commission on products purchased through our links, which supports the work we do for our readers.

© 2023 Uqnic Network Pte Ltd.
All rights reserved.

  • About
  • Contact
  • Advertise
  • Write For Us
  • Terms of Use
  • Privacy Policy
  • RSS Feed Terms
Do not share my Personal Information.