Author bio box chat_bubble0 18 Aug 2017
Development Tutorials

You might see the popular blog website also displaying post author box and social link under the blog post or content, that’s really caring for your community blog or website.  the author who contributing continuously really deserve a credit to them. its has also importance of their social presence and if your author bio text support links will help connect more people with them. a do-follow link under author bio text also has great SEO value to search engine may also another great help of your contributors website. so it really a nice feature if your blog post has author bio box to display author details and social link and etc.

Author bio box

How to add post author box under post content?

Here is the code you need to add your themes  functions.php file

add_filter('the_content','dartthemes_author_bio_box');

function dartthemes_author_bio_box($content){

  $bio_html = '';

  // Check the post type you want to count view is_singular('post')
  if(is_singular('post')){


    $post_id = get_the_id();
    $author_id = get_the_author_meta('ID');

    $author_data = get_user_by('ID', $author_id);

    $author_display_name = $author_data->display_name;
    $author_email = $author_data->user_email;

    $author_description = get_user_meta($author_id, 'description', true);

    // Bio boc HTML start here
    $bio_html.="<div class='bio-box'>";

    // Bio box header text
    $bio_html.='<h3 class="title">About: '.$author_display_name.'</h3>';

    // Get author thumbnail
    $bio_html.='<div class="thumb">';
    $bio_html.= get_avatar($author_email,'80');
    $bio_html.="</div>";

    // Author bio text
    $bio_html.='<div class="description">'.$author_description.'</div>';

    $bio_html.="</div>";

    // Add some styling.
    $bio_html.="<style type='text/css'>";
    $bio_html.=".bio-box{}";
    $bio_html.=".bio-box .title{}";
    $bio_html.=".bio-box .thumb{float: left;
margin-right: 20px;}";
    $bio_html.=".bio-box .description{}";
    $bio_html.="</style>";
        
    }
    
    // Return the HTML with content
    return $content.$bio_html;

}

You will see the bio box with avatar will display under content. if you want to display bio box top of the content just change the code as follows

return $bio_html.$content;

After adding the code you will see the output like this.

author bio box

More fun part if you add social links under content. you can save social links under user meta and you can get these value by  get_user_meta() function as follows

get_user_meta($author_id, 'meta_key', true)

 


Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in /home/dartthemes/public_html/wp-includes/functions.php on line 4669