The Author Box in WordPress is sometimes overlooked and underused and it doesn’t display all the contact information entered such as Social Media contacts, this guide goes through turning it on, editing the contact meta info, using a new AuthorBox with the new contact info and using icon fonts to display those social media accounts.

Turning on the Author box for any Genesis HTML5 theme can be done with a filter in functions.php or via the Users Profile in the WP Dashboard.

Filter Method

add_filter( 'get_the_author_genesis_author_box_single', '__return_true' );

WP Dashboard Method

The above filter when added to your child themes function.php file will add the Author Box to every post.

genesis-author-box-enable-on-posts

Or in WP Dashboard User Profile

genesis-author-box biographical info

The information displayed in the Author Box will be the Gravatar of the User, name and any Biographical Info entered in the user profile.

genesis-author-box

Author Box displayed after post content

 

Altering Contact Methods

Staying in the User Profile, there are a number of contact methods, such as Social Media accounts, these can be removed or new ones added. I can’t speak for the rest of the world but AIM, YAhoo IM and Jabber are things that happened many many moons ago.

genesis-author-box-contact-methods

These contact methods can be controlled with the user_contactmethods filter.

So here I am removing AIM, Yahoo and Jabber by using unset and adding contact fields for Pinterest and LinkedIn by declaring them as user contact meta. – reference

genesis-author-box-contact-methods-added

The result is a profile more up to date.

Outputting the new contact methods in a New AuthorBox

First thing to do is to remove the current author box and display our new author box, in function.php add;

So we are adding a new function for our alternative authorbox and removing the existing one and conditionally applying the new one only on single posts.

The above code will get the authorbox to the state it was previously in the older author box, with the author gravatar, name, description but also generating a link to all posts by the same author. The gravatar square pixel size is the argument passed in after the .get_avatar function, in the above example set to 70px.

The next thing to do is bring in our new contact methods which is done with the get_the_author_meta function with the field parameter passed in along side it, for example  get_the_author_meta( ‘linkedin’ )

The code for each user contact method first checks to see if the value is empty and it it isn’t echos out the data, a couple of methods need some tweaks to the HTML, both the email and Twitter values.

genesis-author-box-social-media-lists

Giving Us a Social Media List

All that would be needed now is some CSS styles applied to the list items using the unordered list style of .social-links.

Outputting the new contact methods in a New AuthorBox with FontAwesome Icons

Lets do it with some icons instead from the brilliant fontawesome… – full gist below – with all the things

And add in some CSS…

Giving Us…

genesis-author-box-social-media-socialised

 

Full Gist

This page has a demo example – just further further down… icon-arrow-circle-o-down

8 Comments

  1. Paal Joachim Romdahl on June 18, 2016 at 8:53 am

    Hi

    I have made a new Author box tutorial based mostly on Neil’s Author box tutorial:
    http://easywebdesigntutorials.com/create-your-own-author-bio-box-in-wordpress-without-a-plugin/

  2. Phu Trieu on May 18, 2016 at 5:44 am

    Thank you very much! I ‘ve applied to my website.

  3. amd on October 25, 2015 at 1:48 pm

    Hello,
    thanks very much for sharing! It works perfectly on post pages but when I click on the link “View all posts by …” the authorbox shown on this page is the standard one…
    Do you know why?

  4. amol on October 22, 2015 at 2:30 pm

    Hi,

    Thanks for the code. After the 2 steps in Function.php this code breaks my site built in altitude pro on genesis framework. any help.

    Thanks

  5. Sue Bride on October 14, 2015 at 6:49 pm

    Thank you for this code. I tried different custom author box code from another site but the author box appeared on the blog index and archive pages, despite not choosing those in the WP dashboard user area.
    Yours works perfectly.

    The create new author box code above doesn’t include Pinterest or LinkedIn but it was a simple matter of copying code from one of the others and changing the names.

  6. Gabriel on March 17, 2015 at 11:41 am

    Thanks for sharing this! I’m using Genesis and that was very handy. I do like this framework, although it gives you headaches sometimes when you want to do advanced things. I’ll keep checking your blog, I might use your services one day.

  7. Vivek Nath R on March 17, 2015 at 2:37 am

    Hey,

    How I make the author website URL to nofollow?

Leave a Comment