Created
August 23, 2019 22:08
-
-
Save thesaurabhk/9df6fd69be2d024169d0ec81b1ad132f to your computer and use it in GitHub Desktop.
Add Author Box in WordPress without Plugin - https://technumero.com/add-author-box-in-wordpress-plugin-schema-optimized/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# | |
# 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# | |
# 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks for sharing