Having an author box on your WordPress site is crucial to give your visitors an idea of who you are, who’s running the website.

I didn’t add an author box to my WordPress site for a long time because I wanted my readers to focus on my content.

However, over time I saw more and more of the big bloggers add author boxes to their sidebars, below their posts, etc.

As it turned out, blog visitors WANT to know who’s running the blog they’re reading.

That’s why I decided to write a short tutorial on adding author boxes to WordPress, specifically to sidebars using text widgets.

The Author Box Code Snippet

This is the exact code snippet you can paste into a text widget to add an author box to your WordPress site.

<div class="“author-box”"><a href="link">
<img class="aligncenter size-full" src="link-to-your-image" alt="author box image" /></a>
<h6>Jan Koch, WP Summit Host</h6>
<p>This is where you can place your description.</p>
<a href="“link-to-your-about-page”">Read the full bio.</a>
</div>

All you need to do is to copy this snippet, add it to a text widget inside your WordPress and tweak the contents accordingly.

Let me go through it step-by-step:

Author Box Styling

This piece of code tells your WordPress to display no background for your author box.

If you want to display a background for your author box, you can replace “none” with the hex code of the color. Here’s a color picker you can use: http://www.colorpicker.com/

Say I want a red background for my author box; I would have to modify the code like this:

background: #d24335;

Hope that little tweak makes sense.

The other codes tell the author box to have 95% width of the sidebar (or content area) in which you place the text widget and to center the author box.

It also adds 5px padding to the top, left, right, and bottom of the author box.

.author-box h6 {
text-align: center;
}

This centers your name and title below the image.

I kept the styling to a bare minimum so that the author box adjusts to the look and feel of your WordPress theme.

If you have questions about the styling, please leave a comment below. I’ll get it sorted.

Author Box Contents

Alright, let’s dive into the contents of the author box that you just added to your website:

<div class="author-box">
[…]
</div>

This code frames the author box itself and tells WordPress to use the styles we defined above.

<a href="link to your author page">
<img src="link-to-your-image" alt="Author box image" class="aligncenter size-full" /></a>

This code displays the image in the author box. Ideally you want to pick an image of yours that fits the size of the sidebar.

In most cases, you’ll want an image that is not higher and wider than 300px so that it doesn’t take up too much space in your widget area.

To exchange the image, you need to replace the URL in the src="[…]" attribute with the URL to your image.

You get that URL by uploading the image to your WordPress library, clicking on “Edit”. Then you’ll see a “URL” field which shows the full URL to your image.

This code snippet also links to your About page (or any other page you want).

To configure which page it links to, replace “link to your about page” with the link to that page.

Make sure to keep the quotation marks!

<h6>Jan Koch, WP Summit Host</h6>

This piece of code is the subtitle below your image.

I prefer to have my name and my “job position.”

This is where you can place your description.

This code snippet shows a description inside your author box.

I deleted it for my blog, but you might like to give your readers a description right inside your author box.

<a href="link-to-your-about-page">Read the full bio.</a>

This code snippet is the link to your author page.

To configure that link, all you need to do is to replace “link-to-your-about-page” with the actual link.

You can of course also change the text the link displays:

Therefore, you need to replace “Read the full bio.” with whatever text you want to show.

I’d love to hear from you if you’re using this code snippet to add an author box to your WordPress site!

Please share your site in the comments below!