[Genesis] How To Add Social Media Icons To Author Box

If you have installed Genesis Framework and Child Theme on a site and enabled the author box, you would have noticed that author box coming out from Genesis is very simple.

In this blog post, we will check how we can revamp that author box to display it with style.

If you are following this blog, you would know why I recommend Genesis as my preferred tool for building website. I love the flexibility it provides to easily modify anything and mostly it follows the pattern of WordPress Development.

Available Filters To Modify Author Box

Author Box in Genesis has 3 different components – Author Gravatar, Title, Description. You can use any one of them to modify the output as desired.

The way Genesis allows you to modify its component is by providing you hooks and filters. Here is the list of filters available to modify the author box in Genesis.

1. genesis_author_box_gravatar_size – The default gravatar size is 70 px. You can use this filter to change it.

2. genesis_author_box_title – This filter will allow you to modify the title of the author box. This filter only modify title text, if you want to modify the formatting, you can use $pattern variable (We will look at it later on).

3. genesis_author_box – This filter will allow you to modify the complete output of the author box, so any major revamp can be done using this filter. At this point of time this filter is not listed under available filters in Genesis documentation but I have checked with Support team and we can use this.

You can update the author description from user profile page, so there is no need for a filter to update it. You can check here for the implementation of these filters.

Now lets see how can we use the genesis_author_box filter to add the social media icons for your authors.

How To Use Filters In Genesis Framework

Filters are supposed to alter things at runtime and not leave any long term effects. So you can create a function and attach it to the filter, so that it can alter the output of inbuilt function. Here is how this filter will be applied:

$output = apply_filters( ‘genesis_author_box’, $output, $context, $pattern, $gravatar, $title, $description );

This means that there are 6 parameter which will be received by your function and you need to return one variable with the final output. Here is what each parameter means:

$output – The complete HTML which will be printed for Author Box. This is the output which you need to return after your changes.

$context – Current context. You can get this to put contextual element in the author box.

$pattern – This patterns defines the output formatting for the author box.

$gravatar – Gravatar of the author. The default size for gravatar is 70 px. If you want to change it, you can use genesis_author_box_gravatar_size filter.

$title – Title of the author box. This is just the text and if you need formatting, you need to use $pattern to format the title.

$description – Author Description. You can change it in the user profile section.

How To Add Our Filter

You will use add_filter call to attach your filter method.

add_filter(‘genesis_author_box’, ‘custom_author_box’, 10, 6);

Here are the description for the each parameter:

genesis_author_box – Filter name which you want to use, in this case it is genesis_autho_box

custom_author_box – Your function name, which you want to call for this filter. You can change it according to your wish and give it any name.

10 – Priority of this function. This priority will decide the order of attached functions, they will run in priority order. The default value for this parameter is 10.

6 – Number of parameter to receive. If you don’t provide this value, it will default to 1 and you will only receive $output parameter. This is fine in case we are only expecting 1 value in our function but in this case we are expecting 6, so we need to give this value.

Now you can write your function and return $output value to print your author box.

Author Box Custom Function

Let’s create social buttons for author and attach it to the author box. Here is a sample code which will create social icons like the one displayed in Metro theme.

if javascript is not enabled, you will not see the code. Click Here for the Code

What we have done in this code is, create social icon links from author profile, increased the gravatar size to 120 px and changed the pattern to add the social buttons in case it is present.

Make sure you review the code to build the social media icons and update it according to your site. You can add the media profile available in your user profile section.

CSS Changes

Now we need to change the CSS to make it look nicer. You can copy the above css and paste it in Style.css file.

This will change the layout of the social button and will make them similar to Metro theme. It will also make the author gravatar image round rather than square and add a shadow to author box.

You also get css tag .author-box, .author-box-title and .author-box-content to change the layout of the author box . You can use them to format the output of the author box. This is how our author box will look after all these changes.

Hope this post has given you an idea on how to modify the Author Box in Genesis Framework. If you still have any questions, you can ask in comment section below.