How to display author bio in your WordPress posts
Author Bio
Author bio box in WordPress is sort of a requirement for your personal author profile and specially building your Google Authorship. Creating a PHP code to show your author bio in WordPress is fairly easy, however it needs a little bit of knowledge on copying and pasting of PHP code in the right place of your theme’s function file.
There are some plugins also available which are free and paid both. You can download and install them to your WordPress blog and it will work just fine. However some people like me love to code personally. So here is a quick instructions for setting up your author bio in your WordPress posts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function ali_author_bio() { if (is_single()) { $author_box = '<div class="author_info"> <h4>'. get_the_author() .'('. get_the_author_posts().' articles) </h4> <span class="author_photo">'. get_avatar( get_the_author_id() , 96 ).'</span> <p>'. get_the_author_description().'<br /><br /> <a href="'. get_user_meta(get_the_author_id(), 'googleplus', true).'" target="_blank" title="Google Plus"><img src="'. get_stylesheet_directory_uri().'/custom/images/icon_googleplus.png" /></a> <a href="'. get_user_meta(get_the_author_id(), 'facebook', true).'" target="_blank" title="Facebook"><img src="'. get_stylesheet_directory_uri().'/custom/images/icon_facebook.png" /></a> <a href="'. get_user_meta(get_the_author_id(), 'twitter', true).'" target="_blank" title="Twitter"><img src="'. get_stylesheet_directory_uri().'/custom/images/icon_twitter.png" /></a> <a href="'. get_user_meta(get_the_author_id(), 'linkedin', true).'" target="_blank" title="LinkedIn"><img src="'. get_stylesheet_directory_uri().'/custom/images/icon_linkedin.png" /></a> </p> </div>'; return $author_box; } } add_filter('the_content', 'ali_author_bio'); |
Okay. So I will explain the above code in a little detail here. The first thing is the function we create ie; ali_author_bio(). This function shows the basic details about the author. Below the author description, it shows the social icons with links. The last line of add_filter tells WordPress to show execute the function after the content is displayed each time.
Open your theme’s functions.php file and paste the above code in bottom. Then open your theme’s style.css file and paste the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.custom .author_info { border:1px dotted #666; padding:1.0em; } .custom .author_info a { color:#cc0000; border-bottom:1px dotted #fff; text-decoration:none; } .custom .author_info a:hover { border-bottom:1px dotted #cc0000; } .custom .author_info .author_photo img { border:1px dotted #666; padding:0.2em; float:left; margin:1.0em 1.0em 1.0em 0em; } .custom .author_info p { margin-top:0.8em; margin-bottom:0.4em; } .custom .author_info p.author_email { text-indent:1.8em; background: url('images/my-email-icon.gif') 0px 4px no-repeat; } |
The above css code is pretty self explanatory. You can adjust the colors and borders as per your theme’s color scheme.
That is all you need to in order to bring the author box in display. Make sure you update the social profile URLs under your user profile in WordPress.
I hope the above tutorial helps. Should you have queries or feel something can be improved, please drop your comment below.
Related articles
BlueHost | HostGator | Media Temple
