How to Add Author Box in WordPress Website Post Page
A customized Author Box has been added to your WordPress theme. Now, you need to configure your Author Profile. Go to the Dashboard > Users > Your Profile. Now, Add your details in Name, Contact info and About the user section.
- copy the below-given code in the single.php file of your theme, in between div tags of the post author.
<h4 class="about-the-author">
About The Author
</h4>
<div class="postauthor-wrap">
<span itemscope itemprop="image" alt="Photo of <?php the_author_meta( 'display_name' ); ?>">
<?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' ); } ?>
</span>
<h5 class="vcard author" itemprop="url" rel="author">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" class="fn" itemprop="name">
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<?php the_author_meta( 'display_name' ); ?>
</span>
</a>
<span class="author-aka"> a.k.a
<span class="author-aka-name">
<?php echo get_the_author_meta('twitter'); ?>
</span>
</span>
</h5>
<?php the_author_meta('description') ?>
<span class="post-author-links">
<?php if (get_the_author_meta('facebook') != ''): ?>
<a class="author-link f" title="Follow on Facebook" href="<?php echo get_the_author_meta('facebook'); ?>" target="_blank">
<i class="fa fa-facebook">
</i>
</a>
<?php endif; ?>
<?php if (get_the_author_meta('twitter') != ''): ?>
<a class="author-link t" title="Follow on Twitter" href="https://twitter.com/<?php echo get_the_author_meta('twitter'); ?>" target="_blank">
<i class="fa fa-twitter">
</i>
</a>
<?php endif; ?>
<?php if (get_the_author_meta('googleplus') != ''): ?>
<a class="author-link g" title="Follow on Google+" href="<?php echo get_the_author_meta('googleplus'); ?>" target="_blank">
<i class="fa fa-google-plus">
</i>
</a>
<?php endif; ?>
</span>
</div>
- Further, you need to add the following CSS code in the style.css file of your theme.
/*-Author Box---------------------------*/
.postauthor-wrap {
float: left;
width: 100%;
clear: both;
padding: 30px;
background: #fff;
box-sizing: border-box;
border-radius: 2px;
-webkit-box-shadow: 0 3px 5px 0 rgba(0,1,1,.1);
-moz-box-shadow: 0 3px 5px 0 rgba(0,1,1,.1);
box-shadow: 0 3px 5px 0 rgba(0,1,1,.1);
}
.postauthor-wrap .fn {
font-size: 24px;
}
.postauthor img {
float: right;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 20px;
border-radius: 50%;
}
.author-aka {
font-size: 16px;
text-transform: lowercase;
font-weight: normal;
color: #5e5e5e;
}
.author-aka-name {
font-size: 17px;
text-transform: lowercase;
font-weight: normal;
color: #111111;
}
.post-author-links {
display: inline-block;
}
a.author-link {
background: #cc0000;
color: #fff;
width: 30px;
text-align: center;
line-height: 1;
height: 30px;
font-size: 12px;
padding: 10px 0;
box-sizing: border-box;
border-radius: 100%;
margin: 0 7px 0 0;
float: left;
}
a.author-link.f {
background: #3b5998;
}
a.author-link.t {
background: #2DA8D2;
}
a.author-link.w {
background: #e64522;
}