How to Add Author Bio to WordPress Without a Plugin

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

If you been reading my blog over the last month you may have noticed some design changes on my post pages. Today I wanted to tell you about one of those changes. That change is the author bio box at the end of the content of the post. I added the box to give a little info about the author and links to their sites. I installed this feature for anyone who wants to guest post for us.

So How Do I add an Author Bio Box to WordPress?

There are several different ways to add an author bio box to WordPress, The two easiest ways is through a plugin and manually adding the code to single.php and to the style sheet. Both options have their pros and cons.

Using the plugin is the easiest way but you are limited to the authors design and their design may interfere with your website’s theme. I tried several different plugins but each one had issues with my theme.

When added the code to your site manually there are pros and cons as well. With manually adding the code to, you need some basic PHP, CSS, and HTML skills to add the code. You need code, you can find it through research, create the code yourself or have someone create the code for you. You will need to change the CSS for the author box to match your site. It could take some time to perfect this. But in the end, you will have your own code, that is custom to your site, if it is coded correctly then it will run smoothly and your new bio box has been designed around your site so it looks like it suppose to be there and not an after thought.

After testing the different plugins, I decided that since I was trying to remove as many plugins as can I and use my own code, I figured this would be the best opportunity to add my own code. So I started the research. After several days of research and testing I asked for some help from Hisham from Famous Bloggers for some coding help.

Once he looked into the code we came to the conclusion that we needed needed to add some code to the single.php code to pull the author bio box and some CSS to style the bio box to fit and to match my theme without issues.

Once you have the code, its relatively easy to add the code your WordPress driven site. The first thing you want to do is back up your single.php and your style sheet. If you do not have access to backing up your work, then just copy paste each page into separate text documents and save them so you know what you have. Once everything is backed up then you can start the process of adding the bio box to your site.

Inside your WordPress Dashboard, go to the Appearance section and click on editor. After the editor opens, look for and click on the single.php file and open it up.

Next you will need to copy the code to the end of the post code files. You will need to change the link to your site. You can also change the wording here as well.

<div class=”postauthor”>
<?php echo get_avatar( get_the_author_id() , 100 ); ?>
<h3>Article by <a href=”<?php the_author_url(); ?>”>
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h3>
<p><?php the_author_description(); ?></p>
<p class=”hlight”><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> awesome articles for us at <a href=”http://www.evolutionarydesigns.net/blog”>Evolutionary Designs</a></p>
</div>

The code below is what you may find at the end of the code to post content at the bottom of the code you will see , put past the code here. If you do not have this feature let me know, and I can take a look at your code see where to add the code to make it work. You may also have some other custom code added such as Facebook fan pages or bookmarking code their, you can either add it above it or below it.

<div class=”details<?php if($share):?> share<?php endif; ?>”
<?php
printf(__(‘This entry was posted by %1$s on %2$s at %3$s, and is filled under %4$s. Follow any responses to this post through %5$s.’, ‘mystique’), ‘<a href=”‘. get_author_posts_url(get_the_author_ID()) .'” title=”‘. sprintf(__(“Posts by %s”,”mystique”), attribute_escape(get_the_author())).’ “>’. get_the_author() .'</a>’, get_the_time(get_option(‘date_format’)),get_the_time(get_option(‘time_format’)), get_the_category_list(‘, ‘), ‘<a href=”‘.get_post_comments_feed_link($post->ID).'” title=”RSS 2.0″>RSS 2.0</a>’);echo ‘ ‘;

if ((‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)):
// Both Comments and Pings are open
printf(__(‘You can <a%1$s>leave a response</a> or <a%2$s>trackback</a> from your own site.’, ‘mystique’), ‘ href=”#respond”‘,’ href=”‘.trackback_url(”,false).'” rel=”trackback”‘);

elseif (!(‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)):
// Only Pings are Open
printf(__(‘Responses are currently closed, but you can <a%1$s>trackback</a> from your own site.’, ‘mystique’), ‘ href=”‘.trackback_url(”,false).'” rel=”trackback”‘);

elseif ((‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)):
// Comments are open, Pings are not
_e(‘You can skip to the end and leave a response. Pinging is currently not allowed.’,’mystique’);

elseif (!(‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)):
// Neither Comments, nor Pings are open
_e(‘Both comments and pings are currently closed.’,’mystique’);
endif; ?>
<?php edit_post_link(__(‘Edit this entry’, ‘mystique’)); ?>
</div>
</div>
</div>
<!– /post –>

Once you have added and modified the code as needed, Save it and open the Style.css file. After opening the file, go to the bottom of the code and copy the follow code to the style sheet.

}
.postauthor { background: #F5F5F5; width:650px; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 10px; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; text-align:justify;}
.postauthor p.hlight { font-size: 11px; text-transform: uppercase; }
.postauthor p.hlight span { color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px; }

When finished save it and preview your work. If it pulls the correct text then then you are finished with the single.php file but if your bio box does not match with your theme or the box is to big or to small for the column, then you will need to edit the style sheet.

After you get your bio box styled correctly you will need to go to the user tab and update the user information. You will need to have all if your users update their profiles and add a bio to their profile. The field that needs to be updated should look like the picture below.

When you have completed your bio and tested, you are finished. Do you have an avatar in your bio box? You can have one, the code will call for your avatar if you are registered with Gravatar. Just head over to their site and register for one. Anyone that uses Gravatar on their site, will give you an easy way to add your avatar to their site.

Conclusion

After installing and modifying the code as needed, I found that it was actually simple to set this up, but it does take some time. If you have no issues, it should take about ten or fifteen minutes. If you have issues with the styling it could take a little a longer if you have to figure out what you need to match the box to your site. For my site my only real issue was getting the comment box to line up with the other boxes around it. It took me about an hour to get it lined up the way I wanted it.