Function Snippet – The Genesis Author Box

BEFORE YOU START CHANGING THINGS…..BACK IT ALL UP FIRST !

Once you’re backed up we can start  reconfiguring the Genesis Author Box Snippet

One of the 3 most valuable files in any Genesis or WordPress theme is the “functions.php” file, the other 2 being the “index.php” and “style.css”.

In this series of posts we are going to look at some of the useful snippets that I use on a majority of Genesis Themes I do.

This will be all about the The Genesis Author Box. Mine is at the base of all my posts, check it out.

We will look at –

• Why I change it?
• The function.php code
• Some sample styling
• and putting it all together

So here goes…

Why change it?

The internet is all about content – and relevant content at that, so its important that you portray yourself in a full light to enable easy sharing and contact-ability because at the end of the day, its all about sharing and we all favor differing routes of sharing, be it facebook, twitter, google+ or LinkedIn.

So how do we do it

First of all you need to access your editor via the WordPress dashboard, under appearance

You now need to look for a file call “functions.php“, scroll to the very top of the file and look for code that is similar to the following and then paste the following directly underneath, this will call the Font-Awesome CDN enabling you to use the icons:

//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_styles' );
function enqueue_scripts_styles() {
wp_enqueue_style( 'afn-font-awesome', get_bloginfo( 'stylesheet_directory' ) . 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );

}

When thats done scroll to the very bottom of the same functions.php sheet and then paste
the following in

//**********************************************
function wptuts_contact_methods( $contactmethods ) {

// Remove we what we don't want
unset( $contactmethods[ 'aim' ] );
unset( $contactmethods[ 'yim' ] );
unset( $contactmethods[ 'jabber' ] );

// Add some useful ones
$contactmethods[ 'twitter' ] = 'Twitter Username';
$contactmethods[ 'facebook' ] = 'Facebook Profile URL';
$contactmethods[ 'linkedin' ] = 'LinkedIn Public Profile URL';
$contactmethods[ 'googleplus' ] = 'Google+ Profile URL';

return $contactmethods;
}

add_filter( 'user_contactmethods', 'wptuts_contact_methods' );

//* Removes default Genesis Author Box, Adds a custom Author Box
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );
add_action( 'genesis_after_comment_form', 'wps_theme_author_box', 8 );
function wps_theme_author_box() {
if ( is_singular('post') ) {
$author_avatar = get_avatar( get_the_author_meta( 'ID' ), 70 );
$author_name = get_the_author_meta( 'display_name' );
$author_desc = get_the_author_meta( 'description' );
$facebook = get_the_author_meta( 'facebook' );
$linkedin = get_the_author_meta( 'linkedin' );
$googleplus = get_the_author_meta( 'googleplus' );
$twitter = get_the_author_meta( 'twitter' );
$website = get_the_author_meta( 'url' );

echo '<section class="author-box">';
		echo $author_avatar;
		echo '<h4 class="author-box-title">About ' . $author_name . '</h4>';
		echo '<div class="author-box-content" itemprop="description"><p>' . $author_desc . '</p></div>';
		if ( $twitter || $facebook || $googleplus || $website ) {
			echo '<div class="author-social-links">';
			echo 'Follow me';
		}
if ( $facebook ) {
echo '';
}
if ( $linkedin ) {
echo '';
}
if ( $googleplus ) {
echo '';
}
if ( $twitter ) {
echo '';
}
if ( $website ) {
echo '';
}
if ( $twitter || $linkedin || $facebook || $gplus || $website ) {
	echo '</div>';
		}
		echo '</div>';
		echo '</section>';
	}
 }

And to style it again open up “style.css” in the same way as you did the functions.php file and paste in the code below at the bottom of the style sheet and save it

/*
Author Box
---------------------------------------------------------------------------------------------------- */
.archive-description,
.author-box {
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	font-size: 20px;
	margin-bottom: 100px;
	padding: 40px 40px;
	background-color: #768779;
	color:#fff;
}
.author-box-content p a{
	font-weight: bold;
	color:#fff;
}
.author-box-content p a:hover{
	color:#575F58;
}
.author-box-title {
	font-size: 22px;
	margin-bottom: 8px;
}

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

.author-box .author-social-links {
	padding: 10px 0;
}

.author-box .author-social-links span {
	font-weight: bold;
}

.author-box .author-social-links .author-link {
	border-radius: 25px;
    color: #515952;
    display: inline-block;
    margin: 0 10px;
    padding: 15px;
    min-width: 36px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #515952;
}

.author-box .author-social-links .fa-facebook,
.author-box .author-social-links .fa-google-plus,
.author-box .author-social-links .fa-twitter,
.author-box .author-social-links .fa-globe,
.author-box .author-social-links .fa-linkedin {
	background: #fff;
}
.author-box .author-social-links .fa-facebook:hover,
.author-box .author-social-links .fa-google-plus:hover,
.author-box .author-social-links .fa-twitter:hover,
.author-box .author-social-links .fa-globe:hover,
.author-box .author-social-links .fa-linkedin:hover {
	background: #515952;
	border:1px solid #a5b7af;
	color:#fff;
}

This is what it will look like when its done?

For more info get in touch

Coutesy of WPS