One of the features that is now being included in our StudioPress theme updates is the Author Box. This is a great way to display an image of the post author, as well as some biographical information. Many people have asked how to include them in their sites and this post explains how.
Here’s an example of the Author Box from the Corporate theme:
If you want to include this feature into your StudioPress theme, the first thing to do is open your index.php file and place this code where you want the author box to display:
<div class="authorbox">
<p><?php echo get_avatar( get_the_author_email(), '72' ); ?><strong>
<?php _e("About", 'studiopress'); ?> <?php the_author(); ?></strong><br />
<?php the_author_meta( 'description' ); ?></p>
<div class="clear"></div>
</div>Some of our index.php files vary, so you’ll need to be a little experimental where you place this code – generally, in the Corporate theme you can place it immediately after this:
<div class="postmeta">
<p><?php _e("Filed under", 'studiopress'); ?> <?php the_category(', ') ?> ·
<?php _e("Tagged with", 'studiopress'); ?> <?php the_tags('') ?></p>
</div>It’s important that you understand what the code above does and specifically how it functions. Let’s go through it piece by piece and I’ll explain.
For starters, take a look at this code:
<?php echo get_avatar( get_the_author_email(), '72' ); ?>This code displays the Gravatar of the post author and sets the image size to 72px – if you want to increase/decrease the Gravatar size, simply modify the 72.
Next, we’ll take a look at this code:
<?php _e("About", 'studiopress'); ?> <?php the_author(); ?></strong><br />This code displays the Author Name, which can be specified on the User page in your WordPress dashboard.
Finally, we’ll take a look at this code:
<?php the_author_meta( 'description' ); ?>This code displays the Biographical Info, which can be specified in the About Yourself section in the User page on your WordPress dashboard.
Now we need to add some style:
In addition to adding the code we provided to your index.php file, you will also want to add some styling elements to the style.css file. Here is the CSS that we used in the Corporate theme:
.authorbox {
background: #F7F7F7;
margin: 20px 0px 0px 0px;
padding: 10px;
border: 1px solid #E6E6E6;
}
.authorbox p {
margin: 0px;
padding: 0px;
}
.authorbox img {
background: #FFFFFF;
float: left;
margin: 0px 10px 0px 0px;
padding: 3px;
border: 1px solid #CCCCCC;
}And that is all you need to add an author box to your StudioPress theme – if you have any questions about this, feel free to leave a comment. We’re currently adding this feature to all of our themes via updates, as well as including it in any new themes that come out. Oh, by the way, here’s another example of the author box ↓
About Brian Gardner
Great tutorial! I just want to know that will these codes work if I use them in other wordpress themes? I meaned not themes from Stuidopress.
Thank you!
I see no reason why it wouldn’t work on any other themes – no code shown above relies on any StudioPress function to work.
Hey Brian, thanks for tips. i will try in my website.
I love this addition, but I would like to know on the Magazine Theme, how I would add this to just the Post itself only and not on the catagories page.
Kathleen, all you need to do is follow the tutorial, as the index.php is what controls the single post page in the Magazine theme.
Thanks for the reply. I did figure it out. and thought I would update what happened just in case others have the same trouble as I did.
I had looked for the postmeta text you said as an example and posted it right after that. but the text was in another file than the index.php.
So I instead now placed it in the index.php near the section that called the postmega text.
Now everything works perfect and you were right when you said you’ll need to be a little experimental where you place this code
Thank you for this great update!
Hi there…
Just wondering – the newest version of the corporate theme already includes all the code above.
How do you get it to show up in the homepage middle widget?
Cheers
Dave
Take a look at the forum post you made, I replied there!
Can I get that same info please. the newest ones should have it right? How to I enable it? I have the magazine. Thanks Adrienne \
Great tutorial. Sometimes you may want to add an author box above the fold, so I’ve got one in a widget at the top of the page. Here’s an example: http://thinklikecenter.com/consultant/business/is-public-relations-for-me. I did this with PHP Executable and Widget Logic.
Best,
Connie
Excellent Work! Can you give a quick tutorial on how you did this?
I am interested in using the Lifestyle theme as a real estate website. Can I add IDX wolfnet on the main page? I would like to talk to someone about this? I would also like to add the real estate Dollar amount drop down lines on this site? Call we talk about this?
Hello Mike,
Thanks for your interest! The short answer is yes, of course – anything is possible with these themes. It will require some customization, but should be easily doable. Our support forum has a vast number of resources and coders, and we’re always glad to help people find the right solutions to their coding needs.
Hi,
I made a very small plugin that incorporates this code from Brian. For those that do not want to touch the theme too much.
Just upload it and activate it. It was tested with WordPressMu 2.8.4a. It’s automatic.
AuthorBox is at http://www.esnips.com/doc/5735647b-2cc2-40f6-86e6-0106ee85a4ee/Wordpress-AuthorBox-Plugin
I’m finishing the admin section to allow people to choose between “automatic inclusion”, “theme function” or “widget”
Best
Is there a way to have the author box show ONLY if the author has a description/bio? Or an if statement I can use to hide the bio box if the author is Editor?
My site will have several columnists and I want them to have the bio box. The rest of the posts are press releases, which don’t need an author box.
All the press releases are posted using the admin account, nicknamed “Editor”, which does not have a user bio.
Took a while, but I figured it out! In case anyone is interested here is the solution:
is there a way to pull an image (author’s picture) without having to create individual gravatars for each author? – essentially create site specific avatars that are not globally recognized
Hey Brian – Thank you for the tutorial. We’re installing this theme on our site and were wondering how to do this. Thanks for all of the great tips and support you’re providing here. Makes me happy that I purchased your themes.