wp author box

Add an Author Box in WordPress Manually

Posted on Posted in WordPress

Add an author box at the end of every post to inform your readers about who you are and what you do. If your theme doesn’t come pre-packaged with author box functionality it’s still simple thing to add to your website using Author Box Plugins or do that manually editing your theme’s code directly.
If you add an author box manually, you’ll need to edit your stylesheet and PHP files.
Before you do that, however, you need to add authors or users via the dashboard at Users > Add New. Or if you are the author, select Users > Your Profile.

Edit User

But what has become more and more popular now is to include the popular social media in an author box. This can be done the easiest way if information about social media is entered into the user profile.

By default, WordPress does not come with the available input fields where you can add these user information to the contact area. How you can add new user input fields to the user profile in which the user can enter information about social media, you can read here.

When all the information in the user/author profile is entered, then you can create the author box that will appear under all posts.
1. Add the following PHP code into your single.php template file inside the loop.

<div id="author-info"> 
    <div id="author-avatar"> <?php echo get_avatar( get_the_author_meta('user_email'), '90', '' ); ?></div> 
    <div id="author-description"> <h3> <?php the_author_link(); ?> </h3> <?php the_author_meta('description'); ?></div> 
    <div class="author-icons"> 
        <a href="<?php the_author_meta('facebook'); ?>" class="author-facebook"> <img src="/wp-content/uploads/icon-facebook.png" alt=" Facebook" /></a> 
        <a href="<?php the_author_meta('twitter'); ?>" class="author-twitter"> <img src="/wp-content/uploads/icon-twitter.png" alt="Twitter" /></a> 
        <a href="<?php the_author_meta('googleplus'); ?>" class="author-googleplus"> <img src="/wp-content/uploads/icon-googleplus.png" alt="Google+" /></a> 

The next and final step is to edit your theme CSS stylesheet. Go to Appearance > Editor and add in the following CSS code in the file style.css or custom.css.

#author-info { float: left; padding: 20px; margin-bottom:30px; -moz-border-radius: 5px;border-radius: 5px; border: 1px solid #e1e1e1; overflow: hidden;} 
#author-info .avatar { position: relative; top: 0; left: 0; float: left; border-radius: 50%; } 
#author-description { margin-left: 100px; margin-bottom:10px; } 
#author-description h3 { margin-top:0px;margin-bottom:10px;}


Rada Arshinkovska

I create modern, high quality, responsive search engine friendly websites, beautifully crafted for my client needs and wishes. I build websites for individuals, businesses and organizations that have never had one, but also, for those who need help with redesigning their websites.

Leave a Reply

Your email address will not be published. Required fields are marked *

three × three =