Custom Author Box (used with user photo plugin)

author_box

add_filter('genesis_author_box', 'custom_author_box');
function custom_author_box() {
if(is_single()) :
?>
<div id="dynamic-below" class="dynamic-wrapper"><span class="screen-reader-text">The following two tabs change content below.</span><ul class="dynamic-list"><li class="dynamic-bio-link active"><a href="#dynamic-bio-below">Bio</a></li><li class="dynamic-latest-posts-link"><a href="#dynamic-latest-posts-below">Latest Posts</a></li></ul>
<div class="dynamic-tabs">
    <div class="author-box dynamic-tab" id="dynamic-bio-below">
        <div class="dynamic-avatar">
        <?php
        userphoto_the_author_photo(
            '<span>',
            '</span>',
            array(style => 'border:0'),
            'http://1.gravatar.com/avatar/4d679f9a19f6ad197c41f0ee87f5488c?s=160&d=mm&r=g'
        );
        ?>
        </div>
        <div class="dynamic-text">
            <div class="dynamic-header"><h1 class="author-box-title">About <?php echo get_the_author();  ?></h1></div><!-- /.dynamic-header -->
            <div class="dynamic-content"><div class="author-box-content" itemprop="description"><p><?php echo get_the_author_meta( 'description' ); ?></p></div></div>
        </div>
    </div>
    <div class="author-box dynamic-tab" id="dynamic-latest-posts-below" style="display: none;">
        <div class="dynamic-avatar">
        <?php
        userphoto_the_author_photo(
            '<span>',
            '</span>',
            array(style => 'border:0'),
            'http://1.gravatar.com/avatar/4d679f9a19f6ad197c41f0ee87f5488c?s=160&d=mm&r=g'
        );
        ?>
        </div>
        <div class="dynamic-text">
            <div class="dynamic-header">
                <h4>Latest posts by <?php echo get_the_author();  ?> <span class="latest-see-all">(<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" rel="nofollow">See all</a>)</span></h4>
            </div>
            <?php
            $current_author = get_query_var('author');
            $author_posts = get_posts( 'author='.$current_author.'&posts_per_page=3' );
            if($author_posts){
            ?>
            <ul class="dynamic-latest">
            <?php 
            foreach ($author_posts as $author_post) {
            ?>
                <li>
                    <a href="<?php echo get_permalink($author_post->ID); ?>"><?php echo $author_post->post_title; ?></a><span> - <?php echo mysql2date('j M Y', $author_post->post_date); ?></span> 
                </li>
            <?php } ?>
        </ul>
        <?php } ?>
        </div>
    </div>
        </div>
    </div>
<?php 
endif;
}

javascript

jQuery(document).ready(function($){
    $('.dynamic-tabs > div').hide();
    $('.dynamic-tabs > div:first-child').show();
    $('.dynamic-list li:first-child').addClass('active');

    $('.dynamic-list li a').click(function() {
        $(this).closest('.dynamic-wrapper').find('li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        if(currentTab.indexOf('#') != -1) {
            currentTabExp = currentTab.split('#');
            currentTab = '#' + currentTabExp[1];
        }

        $(this).closest('.dynamic-wrapper').find('.dynamic-tabs > div').hide();
        $(currentTab).show();

        return false;
    });
});

style

/*** Author Box ***/

.dynamic-list li {
    float: left;
    background: #f5f5f5;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-bottom: 0;
}

.dynamic-list li a {
    color: #333;
    text-decoration: none;
    font-family: 'Roboto', 'sans-serif' !important;
}

.dynamic-list li.active {
    background: #256093;
}

.dynamic-list li.active a{
    color: #fff;
}


.author-box{
border: 1px solid #ddd;
}

.author-box-title {
  font-size: 20px;
}

.author-box-content{
    font-size: 14px;
    padding-left: 114px;
}

.author-box img{
    background: #FFFFFF;
     border: 0px solid #DDDDDD;
      width: 90px;
      height: 90px;
      margin: 0 24px 0 0px;
      padding: 0px;
      float: left;
    border-radius: 100%;
}