How To Add An Author Box to Your WordPress Site

Are you a WordPress developer OR you are a blogger and blogging on the WordPress platform, then this tutorial is designed for you, so keep your close attention in this post as I am going to share how to add an author box to your WordPress site. If you are running a multi-author blog and want to add an author box below the content of every blog post of your WordPress blog, then follow this tutorial.

There are two ways to add an author box to your WordPress websites, first, you can do add this a WordPress plugin and second, you can do by using the custom WordPress code. There are several WordPress plugins for this. Below are the some of them:

Simple Author Box WordPress Plugin

Simple Author Box will add a responsive author box at the end of the every your WordPress post showing the author name, author gravatar and author description. It also adds over 30 social profile fields on WordPress user profile screen, and author icons.

WP Author Box Lite WordPress Plugin

Starbox WordPress Plugin: Authorbox For Humans

This is a simple WordPress plugin which will add an author box under the every blog post. You can also add the social media icons like Facebook, twitter, google plus and etc.. in the author box.

Manual Theme Integration

Above are the simple way to add an author box under the every blog post, but if do not want to add an author box by using any WordPress Plugins, Add below code in your single content page to display an author box on every blog post.

< ?php
// Get Author Data
$author             = get_the_author();
$author_description = get_the_author_meta( 'description' );
$author_url         = esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) );
$author_avatar      = get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'wpex_author_bio_avatar_size', 75 ) );

// Only display if author has a description
if ( $author_description ) : ?>

    <div class="author-info clr">
        <h4 class="heading"><span>< ?php printf( esc_html__( 'Written by %s', 'text_domain' ), esc_html( $author ) ); ?></span></h4>
        <div class="author-info-inner clr">
            < ?php if ( $author_avatar ) { ?>
                <div class="author-avatar clr">
                    <a href="<?php echo esc_url( $author_url ); ?>" rel="author">
                        < ?php echo $author_avatar; ?>
                    </a>
                </div><!-- .author-avatar -->
            < ?php } ?>
            <div class="author-description">
                <p>< ?php echo wp_kses_post( $author_description ); ?></p>
                <p><a href="<?php echo esc_url( $author_url ); ?>" title="< ?php esc_html_e( 'View all author posts', 'text_domain' ); ?>">< ?php esc_html_e( 'View all author posts', 'text_domain' ); ?> →</a></p>
            </div><!-- .author-description -->
        </div><!-- .author-info-inner -->
    </div><!-- .author-info -->

< ?php endif; ?>

< ?php

// Get Author Data

$author = get_the_author();

$author_description = get_the_author_meta( 'description' );

$author_url = esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) );

$author_avatar = get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'wpex_author_bio_avatar_size', 75 ) );

// Only display if author has a description

if ( $author_description ) : ?>

< ?php if ( $author_avatar ) { ?>

<a href="<?php echo esc_url( $author_url ); ?>" rel="author">

< ?php echo $author_avatar; ?>

</a>

</div>

< ?php } ?>

<p><a href="<?php echo esc_url( $author_url ); ?>" title="< ?php esc_html_e( 'View all author posts', 'text_domain' ); ?>">< ?php esc_html_e( 'View all author posts', 'text_domain' ); ?> →</a></p>

</div>

</div>

</div>

< ?php endif; ?>

Over to You

Hope this tutorial will help and do you like & share this article with your friends, and don’t forget to follow us on Facebook and Twitter to learn cool WordPress tutorials.

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How To Add An Author Box to Your WordPress Site