There are a few tutorials around that let you customize the Genesis Author Box. They are great if you know exactly what you want to put in your author box. Most of the time you hard-code some content in, or add user meta fields.
This tutorial explains how to add a widget area to the author box. This would allow the use of a Simple Social Icons widget (or just about any other widget) in the author box. I didn’t want to change anything else either, just add a widget area after the default User Bio.
Register the widget area
Add this code to your child theme functions.php file.
Customize the Genesis Author Box
Add this code to your child theme functions.php file.
We need to use output buffers since genesis_widget_area by default will output before the author-box div. Output buffers tame this output and allow us to store the widget area in a variable so we can put it right where we want, after the default content but inside the author-box-content div.
Optional CSS for a cleaner layout
Since we are adding content to the author box, there is a good chance the left floated avatar will cause this extra content to wrap around below it. With many widgets, this might look awkward. In order keep the content on the right, without wrapping, we can use a simple overflow trick.
Add this code to your child theme style.css file.
The top margin is just to separate the widget area from the user bio. Obviously you can tweak all of this to your liking 🙂
Here’s a version of the author box i’m working on now. This widget area includes Simple Social Icons and the Genesis eNews Extended widgets.
I hope this helps you and/or your clients! It definitely helped me quite a bit today.
Very nifty – thanks for this tutorial! I wasn’t familiar with output buffers before, either – good to know.
To implement this on a multi-author blog, what do you think would be the best route? I guess use conditional logic on separate instances of, for example, Simple Social Icons to show that particular widget only if it’s a specific author?
Hey Dorian! Thanks for stopping by 😉
In that case I would probably opt for get_user_meta and just use the fields from each authors profile. You can always add custom fields manually or via ACF (or other) plugin if you need more data.
Hey!
Thanks for sharing this tutorial. Found this on Google+ by the way. Bookmarked and definitely going to take a dive into it (since I’m really bad with CSS).
Appreciate it!
Thanks Reginald!
This is a great tutorial. Didn’t know you can do that but proves Genesis is very flexible.
Thanks Bob! The more I used Genesis, the more my mentality about it changes. I no longer thing “I didn’t know you could do that”, but instead “What’s the best way to do that?”. Genesis (and WordPress) are super powerful, so there isn’t much you can’t do 😉
Hey Mike,
Nice to see your posting a tad more frequently now. 🙂
Quick question: Does this php+css make the author’s box look like the screenshot you posted?
Because it’s FRIGGIN GORGEOUS!!
Thanks Avinash! Thanks for the compliment!
To make it look like the screenshot you need to add a Genesis eNews Widget and do some styling to put the inputs inline (next to each other). The social icons are just Simple Social Icons plugin so you can do that right out of the box.
Thanks for the post,
are you still working on the new version of the author box with simple social icons ?
It looks wonderful
Still working on? Not sure what you mean. This creates a widget area so you can put Simple Social Icons right in it… should work right away.
Thanks!
Hello Jivedig.
Can i know how to make author bio box like in your website? 🙂
Thanks
On thestizmedia.com? I didn’t do anything special here. Mostly the default Genesis stuff.
Genesis author box customization is great.
Thanks Gaurav!
Thanks for this. This did exactly what I was looking for. It looks a lot cleaner than all the plugins I was considering. And I’d never edited the php before so this was a good learning experience for me.
Good stuff Chris!
I am getting this error. I am using utility pro theme.
Fatal error: Call to undefined function genesis_register_sidebar()
Try wrapping the entire genesis_register_sidebar() function in a function hooked into `after_setup_theme` so it forces it to run after Genesis has been setup.