Author Photo and Bio Below Entries

Home » Tutorials » Theme Tutorials » Author Photo and Bio Below Entries

This is what we are going to display below post entries
Authorinfo

Open single.php (or single-default.php) and paste this

<?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 →', 'journey' ), get_the_author() ); ?>
        </a>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
<?php } ?>

right before
<?php endwhile; else : endif; ?>

And then go to admin -> theme options -> paste this into custom.css of theme control panel

.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;
}