Skip to content

Instantly share code, notes, and snippets.

@thesaurabhk
Created August 23, 2019 22:08
Show Gist options
  • Save thesaurabhk/9df6fd69be2d024169d0ec81b1ad132f to your computer and use it in GitHub Desktop.
Save thesaurabhk/9df6fd69be2d024169d0ec81b1ad132f to your computer and use it in GitHub Desktop.
#
# Firstly, I created a child theme.
# Now, create a single.php file in your child theme folder. I would recommend using a plugin to copy the single.php file from Parent Theme Folder to Child Theme Folder.
# Now copy and paste the below-given code in the single.php file of your child theme, in between div tags of the post author.
#
# TN START – ADD AUTHOR BOX IN WORDPRESS WITHOUT PLUGIN
<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="https://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>
#
# Add the following CSS code in your style.css file of your child 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;
}
@rohitdhamoun
Copy link

thanks for sharing

@rohitdhamoun
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment