How to add author info after the wordpress post


Hello friends, I hope your wordpress website is performing great.Today i will be dealing with a tutorial on how to add a beautiful author info after the end of wordpress post.It is generally a great idea to directly interact with the user of the website. You might have been visiting various site and seeing a beautiful author info after each post. It really makes me curious about the author of that blog. I would love to know more about the blogger.Here the fan following of the website start increasing.


Enough talking.Let us jump over to the tutorial. Generally many themes do have inbuilt feature of the author info.But it may be that you are not satisfied by the look and feel of the author info and would like to make a new author info.This can be achieved by various ways.I will be dealing with adding a simple piece of code in your functions.php file.You don't need to install a plugin for this simple work.

How to add author info after the wordpress post

For users who don't know about the functions.php:-
1.Just Log into your wordpress website
2.Go to Appearance and then editor.
3.You will come to the theme's style.css file edirot. Style.css file totally controls how a website looks.
4.In the right side corner search for Theme functions(functions.php).
5.Now copy this code and paste into that file:-


function add_after_post_content($content) {
if(!is_feed() && !is_home() && is_singular()) {
$content .= '<div id="authorarea">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), 70 ); ?>
<h3>About <?php get_the_author(); ?></h3>
<div class="authorinfo">
<?php the_author_meta( 'description' ); ?>
<a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">View all posts by <?php get_the_author(); ?> <span class="meta-nav">&rarr;</span></a>
</div>
</div>
';
}
return $content;
}
add_filter('the_content', 'add_after_post_content');



Explanation of the code:-

If you know little bit of php you can easily understand this piece of code.We have used two things.First we defined a function and then we altered the default the_contant() function with our own defined function. For that we used a hook add_filter of the predefined wordpress hooks.Learn more about add_filter() hook of wordpress.
The the_content() is used to call the content of the post.So,At first we are calling the content of the post and then the script of author info.Very simple.

After this let us add some style to our script otherwise it will look ugly.For this add After this let us add some style to our script otherwise it will look ugly.Add this into your style.css file.

#authorarea{
background: #f0f0f0;
border: 1px solid #d2d2d2;
padding: 10px;
width:500px;
overflow:hidden;
color: #333;
}
#authorarea h3{
font-size: 18px;
color:#333;
margin:0;
padding:10px 10px 5px 10px;
}
#authorarea h3 a{
text-decoration:none;
color: #333;
font-weight: bold;
}
#authorarea img{
margin:0;
padding:10px;
float:left;
border: 1px solid #ddd;
width: 100px;
height: 100px;
}
#authorarea p{
color:#333;
margin:0;
padding:0px 10px 10px 10px;
}
#authorarea p a{
color:#333;
}
.authorinfo{
padding-left:120px;
}
Note:- This script shows gravatar associated to your email address.Set your gravatar. Thanks for reading hom to add author info after the wordpress post. Share this post with your friends.. 

Comments

Popular posts from this blog

Wordpress on Bluemix - Create a wordpress website

Buddypress Demo Website - Learn Buddypress

IBM Bluemix Pricing For Wordpress Cloud Hosting