How to Add the Author Image and Bio to a Single Post

Home » Tutorials » Theme Tutorials » How to Add the Author Image and Bio to a Single Post

Displaying the author’s avatar and biography is useful for adding context to the post. Reader’s like to know who wrote the article and may even wish to contact the author directly. Adding an author box allows readers to learn a bit more about the article and read more by that author.

It’ll look something like this:

Authorinfo

Here’s how to add the author image and bio to a post:

1. Open single.php and add this code

<?php if ( get_the_author_meta( 'description' ) ) { // If a user has filled out their description, show a bio on their entries  ?>                        
    <div class="author single_postmeta">

        <?php echo get_avatar( get_the_author_meta('email'), '68' ); ?>
        <strong><?php printf( esc_attr__( 'About %s', 'journey' ), get_the_author() ); ?></strong><br />
        <?php the_author_meta( 'description' ); ?>
        <br />
        <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
            <?php printf( __( 'View all posts by %s &rarr;', 'journey' ), get_the_author() ); ?>
        </a>
        <div></div>
    </div>
    <div></div>
<?php } ?>

Beneath this code:

<?php endwhile; else : endif; ?>

2. Then Add This Code to the Custom CSS box

.single_postmeta {
    font:italic 13px/19px Georgia,Times,serif;
    color:#999;
    padding:15px 0;
    margin-bottom:15px;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
    width:100%;
    overflow:hidden
}
.author.single_postmeta {
    border-bottom:none;
    padding-bottom:0;
}
.single_postmeta a {
    font-family:Helvetica,Arial,sans-serif;
    color:#999;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
}
.single_postmeta a:hover {
    color:#333
}
.single_postmeta .left {
    width:330px;
    display:block;
}
.single_postmeta .right {
    width:300px;
    display:block;
}
.single_postmeta .widget,.single_postmeta .gab_share_widget {
    margin:0;
    padding:0;
    margin:0;
}
.single_postmeta .widgettitle {
    margin-top:5px !important;
}
.single_postmeta .share-separator {
    height:1px !important;
}
.single_postmeta .avatar  { 
    float: left;
    clear: left;
    display:block;
    border: 1px solid #eee;
    padding:2px;
    margin-right: 10px;
}

Save and refresh to see your new author box on a single post! Make sure to fill out your author bio in Users > My Profile.

LEAVE A COMMENT