How to add Author Box With Social Links in Genesis Theme

Do you guys want to add Author Box in your Genesis blog or clients website with the social icons, URLs of social links and links to all the posts of that Author? Then you land at the right place.

Here We have posted the simple codes that will help you to add Author Box in Genesis Theme without any error. Just make sure you follow the below steps correctly.

What Will the Above Author Box Code Do?

1: It will first register the field to your profile. For eg. It will add the box where you would put the username or URL of the social profile like Google+, Facebook, Twitter Username, etc.

2: It will display the author metadata into Author Box. With font awesome icon set. We’ve made the function that if you set the value of the social link then it will display or else it won’t.

3: We have also included the Author All Posts link button so the visitors can view all of the posts by that author with just clicking on a button.

4: Simple Codes and doesn’t require to load any external files. Just add the FontAwesome icon CSS for the better look of social icons.

How to create a custom author box in Genesis

Let’s start without wasting time.

Author Box Genesis Theme Code

Paste the below code into your child theme’s functions.php file.

<?php 

/**
 * Changing the AuthorBox in Genesis Theme
 * 
 * @package   Changing the AuthorBox in Genesis Theme
 * @author    Hunk Riyaz
 * @link      http://extracatchy.net/author-box-genesis/
 * @copyright (c) 2017, Hunk Riyaz
 */
//Change Default Method Contacts in User Profile
function extracatchy_modify_user_contact_methods( $user_contact ){
   $user_contact['facebook'] = __( 'Facebook URL' );
 $user_contact['skype'] = __( 'Skype Username' );
 $user_contact['twitter'] = __( 'Twitter Handle' );
 $user_contact['youtube'] = __( 'Youtube Channel' );
 $user_contact['linkedin'] = __( 'LinkedIn' );
 $user_contact['googleplus'] = __( 'Google +' );
 $user_contact['pinterest'] = __( 'Pinterest' );
 $user_contact['instagram'] = __( 'Instagram' );
 $user_contact['github'] = __( 'Github profile' ); 
 return $user_contact; 
}
add_filter( 'user_contactmethods', 'extracatchy_modify_user_contact_methods' );

//Create New Author Box
function extracatchy_alt_author_box() {
    if( is_single( '' ) ) {
//author box code goes here
			?>
	   		<div class="author-box"><?php echo get_avatar( get_the_author_meta( 'ID' ), '70' ); ?> 
                <div class="about-author"><h4>About <?php echo get_the_author(); ?></h4><p><?php echo get_the_author_meta( 'description' ); ?> 
            </div>
               
         </div>
         <div class="author-entry">
            <div class="all-posts"><a href="<?php echo get_author_posts_url(  get_the_author_meta( 'ID' )); ?>">All Post By <?php echo  get_the_author(); ?></a></div>
             <ul class="social-links">
                    
                <?php if ( get_the_author_meta( 'facebook' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'facebook' ); ?>"><i class="fa fa-facebook"></i></a></li>
                <?php endif; ?>
                
                <?php if ( get_the_author_meta( 'twitter' ) != '' ): ?>
                    <li><a href="https://twitter.com/<?php echo get_the_author_meta( 'twitter' ); ?>"><i class="fa fa-twitter"></i></a></li>
                <?php endif; ?>
                
                <?php if ( get_the_author_meta( 'googleplus' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'googleplus' ); ?>"><i class="fa fa-google-plus"></i></a></li>
                <?php endif; ?>

                <?php  if ( get_the_author_meta( 'pinterest' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'pinterest' ); ?>"><i class="fa fa-pinterest"></i> </a></li>
                <?php endif; ?>

                 <?php  if ( get_the_author_meta( 'instagram' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'instagram' ); ?>"><i class="fa fa-instagram"></i> </a></li>
                <?php endif; ?>   

                 <?php  if ( get_the_author_meta( 'linkedin' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'linkedin' ); ?>"><i class="fa fa-linkedin"></i> </a></li>
                <?php endif; ?> 

                 <?php  if ( get_the_author_meta( 'youtube' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'youtube' ); ?>"><i class="fa fa-youtube"></i> </a></li>
                <?php endif; ?>     

                <?php if ( get_the_author_meta( 'github' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'github' ); ?>"><i class="fa fa-github"></i></a></li>
                <?php endif; ?>
                
                <?php if ( get_the_author_meta( 'user_email' ) != '' ): ?>
                    <li><a href="mailto:<?php echo get_the_author_meta( 'user_email' ); ?>"><i class="fa fa-envelope-o"></i></a></li>
                <?php endif; ?>
                
                <?php  if ( get_the_author_meta( 'user_url' ) != '' ): ?>
                    <li><a href="<?php echo get_the_author_meta( 'user_url' ); ?>"><i class="fa fa-laptop"></i> </a></li>
                <?php endif; ?>             
                
                </ul>
</div>
    <?php 
    }
}
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );
add_action( 'genesis_after_entry', 'extracatchy_alt_author_box', 8 );

CSS Code To Style Author Box Genesis Theme

Below is the code that we have used in designing to our Author Box and Its social Links. You can just change the color of background and border or link to make a look like as your blog colors are. Our Color code is. #66cc03 replace with your color.

Copy the below code into your’s child theme’s Styles.css file.

.author-box {
	background-color: #fff;
	padding: 20px;
	margin-bottom: 0px;
padding-bottom: 10px;
border:solid thin #f4f4f4;
}

.author-box-title {
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 4px;
}

.archive-description p:last-child,
.author-box p:last-child {
	margin-bottom: 0;
}


ul.social-links li {
    float: left;
    margin-right: 5px;
    background-color: #000;
	border:solid 2px #66cc03;
    padding: 2px;
    font-size: 14px;
    width: 35px;
    text-align: center;
    border-radius: 3px;
    transition: all ease 0.4s;
    -webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
}
ul.social-links li:hover{
	background-color: #66cc03;
}
ul.social-links li a{
	color:#fff;
}
.all-posts > a{
	padding: 5px 15px;
	background-color: #000;
	border:solid 2px #66cc03;
	color:#fff;
	font-size: 12px;
	font-weight: 600;	text-decoration: none;
	display: inline-block;
	  border-radius: 3px;
	    transition: all ease 0.4s;
    -webkit-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
}
.all-posts > a:hover{
	background-color: #66cc03;
}
.author-entry{
	
	display: inline-block;
	width: 100%;
	padding: 5px 15px;
	border-top: solid thin #d4d4d4;
background-color: #f6f6f6;
	margin-bottom: -5px;
	border-top: solid thin #f4f4f4;
	margin-bottom: 20px;
}

Social Links of Author Box are

Google+, Facebook, Twitter, Youtube, Linkedin, Github, Email, Website, Skype, Instagram, Pinterest.

Hope It was helpful for you. Don’t forget to comment below how was the code. If you get any problem with the above code, feel free to comment I will assist you.