How to Style The Genesis Author Box Without A Plugin

Last updated on August 1st, 2018 at 06:22 pm

Your author box is it really portraying a great image of who and what you offer? If you haven’t set up your author box, read this step-by-step tutorial. In this tutorial, I will be showing you how to style the Genesis author box without a plugin.

I not a huge advocate of installing a ton of plugins. However, this wasn’t always the case. When I first started using WordPress, I would always look for a plugin that would help me accomplish something on my site.

It took several years for me to get the courage to venture into the WordPress files. I guess I was scared that I would break something and not be able to fix it.

You can screw up your site if you don’t know what your doing. But as long as you have a backup before you start messing and tweaking things, you’re golden!

I am NOT a developer, but I love making small tweaks and changes to mine and my clients sites. That’s why I love sharing my tutorials and experiences with you. In hopes of helping you realize that even if you’re not a techie person, you can learn enough to build a business with WordPress.

Follow along and let’s customize the look and feel of our author box. For this demo, I will be using my cloned localhost blog. We are going to learn how to style the genesis author box without a plugin.

Watch Over My Shoulder

If you’d rather watch me as I style the Genesis Author box on my test site, here’s a step-by-step video that will walk you through the process. Of course, you can scroll to the bottom and follow my screenshot tutorial with pictures.

Let’s get started..

How to Style The Genesis Author Box Without A Plugin

Styling your author box can easily be done by using HTML and CSS. If you’re unsure of how to get started with

Here is what you the default author box looks like on the Centric Pro theme before any changes.

Once you’ve decided if you just want to add your author box to your sidebar or below your posts, you can begin styling it.

Open up your favorite text editor. and browse to your child theme CSS style sheet.

Here is the code that I added to the bottom of my style sheet in my child theme.

Here’s what my author box looks like now.

So let’s break down this code so you can understand what exactly I did to get it to look like this.

What I Did To Customize The Look Of My Author Box

Adding Background Color

This code changes the background color on my author box. You can replace the hex color on the background color with the color of your choice. If you are unsure of what the hex number is, visit this site.

padding: 23px adds padding to my author box. Before the padding my author box looked terrible because everything was bunched up on the margins.

Take a look at how it looks like without the padding.

This is on my demo blog, so you won’t see it on my live blog. I love playing around with my blog on my localhost, it allows me to test and tweak things.

This is one of the reasons I recommend setting up a clone of your live blog on your localhost.

Changing Link Colors In Author Box

When we set up the author box, I showed you how to link to your social profiles. I used CSS to make those links in the author box black.

Change Link Colors when Hovered Over

Maybe you want to have the links change color whenever someone hovers over them. Add this code to your CSS child theme.

Just be sure to change the hex color to your preferred color.

Change Title Color and Font

This code makes it easy to change your title and font style.

The code above changes the title color from my blue color to a white. I’ve also made the title bigger and changed the font style.

You can see, it’s extremely easy to style the Genesis author box.

Here are some other styles you can use to take this further.

Add A Text Decoration To Your Links

This underline all your links in your author box.

Change Font Size of Bio Paragraph

This is what my new author box looks like with a 22px font size.

You could take this even further and increase the margins between your avatar and text by adding this.

Here is my author box looks like after I’ve added all the styles. You won’t see this on my live blog as I’ve demonstrated this on my localhost.

Final Take Away

Now that you’ve learned how to style the Genesis author box without a plugin, you can see how easy it is to do. Of course if you don’t feel comfortable using CSS, feel free to use a plugin. Here’s an easy to use plugin if you don’t feel comfortable adding CSS to your stylesheet.

If you decide to do this on your own using CSS, just add all your code at the very bottom of your child theme’s CSS style sheet.

Read this tutorial if you still need to set up your author box on Genesis. If you don’t know how to get your Gravatar set up, read this.

Did you customize your author box? Stop by and let me know, I’d love to know what you did to style it. Did you use a plugin? If so share which plugins you would recommend.