Style the Genesis Author Box to Look Like Twitter Bio


I’ve worked with Genesis for almost two years now, and I think the two weakest styled parts of any Genesis Child Themes are the comments and the author box. The author box says a lot about you. Might as well make it look nice.

Today, I want to go over how you can style your Genesis Author Box to look like your Twitter Bio. Below is a screenshot of what the end product will be.

Genesis Author Box

To make your author box look like your twitter profile, you’ll need to follow these three simple steps:

  1. Set up your user profile in WordPress
  2. Add author box filters to functions.php
  3. Style

Set Up Your User Profile in WordPress

*If you have not set up your profile yet, s_tart off by going to Users –>Edit. _If you have set up your profile, proceed to step 2.

For this example, you don’t need to fill in all the data, just:

  • your email,
  • name,
  • display name, and
  • biography

When you are filling out your email, make sure it is the email with a linked gravatar (that is how you will get your picture). If you want it to be your exact Twitter profile photo, update your gravatar photo to match (visit Gravatar.com).

After you enter your name, make sure you change the drop down for “Display name publicly as: to ” “First Name Last Name”. Otherwise, your username will overwrite your full name.

Finally, enter your Twitter biography. Do keep your biography under 160 characters.

Next, Add Author Box to Functions.php

Add the code below to functions.php: 

*What are these functions doing? First, you are adding the author box to your theme (if you don’t have it already). Secondly, you are changing the author-box gravatar to 73 pixels (the official Twitter size). Finally, you are removing the word “About” from the title. Now, the title will only grab your name.

Finally, Style The Author Box

Now, it’s time to style. You can copy and paste the gist below into your style.css file. Make sure you place it at the end to overwrite the existing styles.

Lastly, you’ll need the background image. I created this, and you can modify and use it in anyway. No attribution. Feel free to drag the photo to the desktop and save. *Just make sure you keep the name the same as in your css (twitter-background.jpg). Upload the file to your images folder.

twitter-background

There you have it. A Genesis Framework Author Box that looks like your twitter profile. If you have any questions, just add them in the comments. I respond quickly.