For the WPStudio website (build on the Genesis Framework), I wanted to add some social profile buttons to the author box. See the screenshot below for an example.
My first idea was to use a hook to add content to the author box. However, this isn’t an option as there are no hooks in the author box. Another idea that crossed my mind was to add html to the biographical info input field. This seems like a fine solution for myself, but it isn’t ideal for clients. I came up with the following solution:
If you look at your profile settings, you’ll see something similar to this:
You need to install the Yoast SEO plugin to have the Twitter and Facebook options. For this tutorial, I assume you’ve got the Yoast plugin installed and activated 😉
Complete your profile with your Website URL, Twitter username, Facebook profile URL and a little biographical information.
Create a custom author box
Next, we have to remove the default author box and replace it with our custom author box, which contains the social media links and icons. Add the following code to the functions.php of your Genesis child theme.
So, what’s happening here? First, this chunk of code removes the default author box and creates a new one that will be visible after the entry. Before adding the new author box, it checks if we’re on a single post or a page. Second, the code provides every item with its own variable. When your profile includes at least one of the social media profiles, the code will add a ‘follow me’ span and social media icon to your profile.
Add Font Awesome
The above code will add the necessary html, so the only thing you need to add is some styling to the social links, so they look like icons. For the icons in this example I used Font Awesome. Add the following code to the functions.php of your Genesis child theme.
This code enqueues Font Awesome.
When Font Awesome is enqueued, we can add the styling. Add these rules to your child themes style.css.
Easy does it, doesn’t it? You can adjust the html structure and the CSS to your liking. With some extra code you can add (hardcode) your own links. For example Youtube or Dribbble. Do you have any questions? Just shoot 🙂