Add author bio with social links to blog post

Often we like to add a author bio at the bottom of blog post. To do so we use external plugins. By adding few script to our theme function file we can easily create our own custom author bio for our blog post. Lets see what type of field we need to get user/author social links:

What we need to add in function file:

<?php
if ( is_admin() ) {
    add_filter('user_contactmethods', 'author_bio_social_links');

    function author_bio_social_links( $data ){
        $data['author_twitter_url'] = __( 'Twitter', 'msbd-theme' );
        $data['author_facebook_url'] = __( 'Facebook', 'msbd-theme' );
        $data['author_github_url'] = __( 'Github', 'msbd-theme' );
        $data['author_wp_url'] = __( 'Wordpress', 'msbd-theme' );

        return $data;
    }
}
?>

[manage_adv size=”responsive” sponsor=”amazon” type=”image”]

Now we will show the author bio with the social links we have added to admin section:

<?php
add_filter('the_content', 'content_to_author_bio', 11);

function content_to_author_bio($content) {
    global $post;

    $author = get_user_by( 'id', $post->post_author );
    $bio = get_user_meta( $author->ID, 'description', true);
    $author_user_url = get_the_author_meta('user_url');

    $author_twitter_url = get_user_meta( $author->ID, 'author_twitter_url', true);
    $author_facebook_url = get_user_meta( $author->ID, 'author_facebook_url', true);
    $author_github_url = get_user_meta( $author->ID, 'author_github_url', true);
    $author_wp_url = get_user_meta( $author->ID, 'author_wp_url', true);

    ob_start();
?>
    <div class="author-bio ">
        <h3>Author Info</h3>
        <div class="author-details">
            <div class="profile-image">
                <?php echo get_avatar($author->ID, 96); ?>
            </div>

            <h4 class="name">
                <a href="<?= get_author_posts_url($author->ID); ?>" rel="author external"><?=$author->display_name;?></a>
            </h4>

            <div class="bio"><?php echo wpautop( wp_kses_post( $bio ) );?></div>

            <div class="social-links">
<?php
                if( !empty($author_user_url) )
                    echo '<a href="'.esc_url($author_user_url).'" rel="nofollow"><i class="fa fa-link"></i> Startup</a>';

                if( !empty($author_facebook_url) )
                    echo '<a href="'.esc_url($author_facebook_url).'" rel="nofollow"><i class="fa fa-facebook"></i> Facebook</a>';

                if( !empty($author_twitter_url) )
                    echo '<a href="'.esc_url($author_twitter_url).'" rel="nofollow"><i class="fa fa-twitter"></i> Twitter</a>';

                if( !empty($author_github_url) )
                    echo '<a href="'.esc_url($author_github_url).'" rel="nofollow"><i class="fa fa-github"></i> Github</a>';

                if( !empty($author_wp_url) )
                    echo '<a href="'.esc_url($author_wp_url).'" rel="nofollow"><i class="fa fa-wordpress"></i> WordPress</a>';
?>
            </div>
        </div>
    </div>
    <!-- /.author-bio -->
<?php
    $html = ob_get_clean();

    return $content . $html;
}
?>

Lets discuss about the function we have used in this article:

• __() function retrieves the translated string from the translate(). Usually get two parameter and the first parameter is required!
• the wp_kses_post() and esc_url() functions are used to data sanitization.
• get_user_by() function is used to get user data by field and data. The possible fields are ‘id‘, ‘slug‘, ‘email‘, ‘login‘ for first parameter.
• get_the_author_meta() function returns the desired meta data for a user. If the specified meta field does not exist for this user, the empty string is returned.
• get_user_meta() is used to retrieve a single meta field or all fields of user_meta data for the given user.