For a project I’m working on, I wanted to add a few social profile buttons to the bottom of the Genesis Author Box. While Genesis is loaded with awesome actions and filters, the author box is one area that could benefit from a few more. Since these social buttons would be inside the author box, I’d need an action hook that would let me add the content after the author bio. Unfortunately, no such hook yet exists. Therefore, my only option was to create a new author box. Since I’m essentially duplicating the regular author box (which is pretty simple in design and structure), this isn’t that big of a deal. Ultimately, here’s what the finished product should look like:

Adding Custom Social Profiles

The first step I took was creating the social profile fields under the user’s profile settings. For this, I removed a few of the WordPress default settings and added my custom settings.

Creating the Custom Author Box

Next, the original author box has to be replaced with a custom author box that contains the social links created in the last step.

Styling the Social Links

Finally, we need to add some styling for the social links to make them look like actual buttons. In the code above, I’ve decided to use Font Awesome icons instead of text. If you want to do the same, you need to make sure you’ve enqueued Font Awesome. To do so, use this snippet.

add_action( 'wp_enqueue_scripts', 'rv_add_font_awesome' );
function rv_add_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
}

Once you’ve gotten Font Awesome enqueued, add the following to your style.css and adjust as desired.

.author-social-links {
	margin-top: 20px;
	font-weight: bold;
}

.author-social-link {
	display: inline-block;
	margin-right: 10px;
	padding: 10px;
	color: #fff;
	min-width: 50px;
	text-align: center;
}

.author-social-link:hover {
	background: #333 !important;
	color: #fff !important;
}

.author-social-link.twitter {
	background: #00aced;
}

.author-social-link.facebook {
	background: #3b5998;
}

.author-social-link.gplus {
	background: #dd4b39;
}

.author-social-link.linkedin {
	background: #007bb6;
}

.author-social-link.website {
	background: #a82400;
}

Finishing Up

There you go. You’ve now registered some custom social settings that your users can input and created a new author box to output those settings. When an author on your blog adds either a Facebook, Twitter, Google+, LinkedIn and/or Website URL into the appropriate setting, a button linking to that URL will automatically output in the bottom of the author box. Pretty nifty, huh?