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

Genesis comes with a basic author box integration with a very simple layout. If you want to modify it to display social media icons, here is how you can do it with the help of a small coding.

Genesis Author Box
Genesis Author Box Layout

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 a website. I love the flexibility provided by Genesis to modify almost anything on your site. Mostly these changes follow the pattern of the WordPress development which can help a lot in case you are familiar with it.

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.

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

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

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 in time, this filter is not listed under available filters in Genesis documentation but I have checked with the 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 let’s 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 the 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 parameters 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 the contextual element in the author box.

$pattern – This pattern 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 the 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 the $pattern to format the title.

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

Suggested Read: How to modify comment form in Genesis Child Themes

How To Add Our Filter

You will use the add_filter call to attach your filter method.

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

Here is the description of 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 parameters 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 an 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.

https://gist.github.com/SanjeevMohindra/570119e78292bd9cc1a9d70de7a85ca2

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 into 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.

Author Box After Modifications

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 the comment section below.

Full Disclosure: This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). We only hyperlink the products which we feel adds value to our audience. Financial compensation does not play a role for those products.

About Sanjeev

Sanjeev is an IT Consultant and technology enthusiast. He has more than 15 years of experience in building and maintaining enterprise applications. He is been with Android from T-Mobile G1 time but recently shifted to iOS. He loves to code and play with the latest gadgets.

Share via
Copy link