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.
The styling
When Font Awesome is enqueued, we can add the styling. Add these rules to your child themes style.css.
Round up
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 🙂
Francisco says
Thanks for sharing . I find this tutorial helpful.
Hackphonehy says
Google plus is not recognized? You guide me to fix it?
Frank Schrijvers says
For Google + you should use the full URL of your profile or Google+ Publisher page.
M. Sony says
What’s the procedure to visible other social profiles?
Frank Schrijvers says
The most easy way is to just add some extra HTML and forget about Yoast 😉
jean says
Don’t you think font awesome hits the performance of site? I find on my blogs the pages load slower when i use font awesome.
Frank Schrijvers says
I think the impact of Font Awesome is minimum. If you want to be sure use tool like Pingdom page speed to see if it slows down you site and by how many milliseconds 😉
Rosy says
its working thanks for sharing this post.
tweakbox says
I am very happy to read this. Appreciate your sharing
Mohidul Islam says
I am very happy to read this. I appreciate your sharing. I am applying this code to one of my best affiliate niche blog.
Vac says
Thanks, useful how to
Fajar says
can I added in woocommerce single product?
Frank Schrijvers says
You can add the author box to single products by changing line 9 from
if ( is_singular('post') ) {
toif ( is_product() ) {
For more WooCommerce conditional tags see: https://docs.woocommerce.com/document/conditional-tags/