Customize The Genesis Author Box in WordPress

A custom WordPress author box

This post is a follow-up to the post Customize the Contact Info Fields in WordPress Profiles. Now that we have some custom contact fields in our WordPress user profiles it’s time to put those fields to work using the Genesis Framework. This tutorial will show you how to get those profile fields on your posts, pages (if you want) and in the author archives.

One of the great features of the Genesis Framework from Studiopress (affiliate link) is the author box. This is the small area at the bottom of your content that displays information about the author of that content which is taken from the user’s WordPress profile. By default it shows the user’s name, avatar, and biographical info but nothing else.

Here’s how you can customize the author box in a Genesis theme to show anything you might need including other contact information you may have added. Please note this tutorial will also cause the author box to appear for all authors regardless of whether the user has chosen to show it or not.

1.) Open your theme’s functions.php file

The functions.php file should be in the root of your theme.

2.) Delete the old author box(es)

First we’re going to need to remove the existing Genesis Author box with it’s default fields.

remove_action( 'genesis_after_post', 'genesis_do_author_box_single' );

If you want to change the Author box on the author pages you’ll also need the following line of code

remove_action( 'genesis_before_loop', 'genesis_do_author_box_archive' );

3.) Register the new author box(es)

Next we’re going to tell WordPress to use the author boxes we’re about to create. For the box on pages and posts use

add_action( 'genesis_before_comments', 'theme_author_box' );

For the author box on the author pages you’ll have to use the following line of code:

add_action( 'genesis_before_loop', 'theme_author_box_archive' );

Notice I’m using two separate functions to create my author boxes. This is because the two add_action lines tell WordPress to always add the box before comments in the first one and before the “loop” (which is basically before the title) in the second. We’ll the use a line in the functions themselves to tell WordPress which pages/posts/etc the boxes should appear on.

4.) Create the author box

First we’ll set up the function. Note that for the archive page, or anything content where you want the box to appear on top, just change this line to “function theme_author_box_archive();” per step 3. If you want it to appear on top in the archive and on the bottom of posts you will have to use this function twice. Once for each position.

function theme_author_box() {

Then we’ll set up the header

$authinfo = "\r\n";
$authinfo .= get_avatar(get_the_author_id() , 80); $authinfo .= "About " . get_the_author_meta('display_name')

Now we’ll get all our custom fields

$facebook = get_the_author_meta('facebook');
$linkedin = get_the_author_meta('linkedin');
$twitter = get_the_author_meta('twitter');
$gplus = get_the_author_meta('gplus');
$flength = strlen($facebook);
$llength = strlen($linkedin);
$tlength = strlen($twitter);
$glength = strlen($gplus);

Next we’ll display our contact fields but only if our user actually filled them out

if ($flength > 1 || $glength > 1 || $llength > 1 || $tlength > 1) {
    if (($flength <= 1 && $glength <= 1 && $llength <= 1) && $tlength > 1) {
        $authinfo .= "<p id=\"authcontact\"><a href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . $twitter . " on Twitter\">Follow " . get_the_author_meta('first_name') . " on Twitter</a></p>\r\n";
    } else {
         $authinfo .= "<p id=\"authcontact\">Find " . get_the_author_meta('first_name') . " on ";
        if ($flength > 1) {
            $authinfo .= " <a href=\"http://facebook.com/" . $facebook . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on Facebook\">Facebook</a>";
        }
        if ($glength > 1) {
            if ($flength > 1) {
                $comma = ',';
            } else {
                $comma = '';
            }
            if ($llength > 1 || $tlength > 1) {
                $and = '';
            } else {
                $and = ' and';
            }
            $authinfo .= $comma . $and . " <a href=\"http://plus.google.com/" . $gplus . "\" rel=\"me\" target=\"_blank\" title=\"" . get_the_author_meta('display_name') . " on Google+\">Google+</a>";
        }
        if ($llength > 1) {
            if ($flength > 1 || $glength > 1) {
                $comma = ',';
            } else {
                $comma = '';
            }
            if ($tlength > 1) {
                $and = '';
            } else {
                $and = ' and';
            }
            $authinfo .= $comma . $and . " <a href=\"http://www.linkedin.com/in/" . $linkedin . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on LinkedIn\">LinkedIn</a>";
        }
        if ($tlength > 1) {
            $authinfo .= ", and <a href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on Twitter\">Twitter</a>";
        }

Finally we need to tell WordPress where to display everything. Using “is_single()” puts the author box on individual posts. If this is for the archive page use “is_author()” for pages use “is_page().” If you want the same box to appear on posts and pages you can use “is_single() || is_page()” (note the || is the pipe symbol on the keyboard and means “or”).

  if ( is_single() ) {
    echo $authinfo;
  }
}

Note that if you need both lines from step 3 just copy the code above into a 2nd function changing the function name and the “is_single” line.

5.) Save your file

You should now see your custom author box on the content in which you wanted it.

6.) Putting it all together

Here’s the whole code to put a custom author box on top of the author page and right before the content on all posts.

remove_action('genesis_after_post', 'genesis_do_author_box_single');
add_action('genesis_before_comments', 'theme_author_box');

remove_action( 'genesis_before_loop', 'genesis_do_author_box_archive' );
add_action( 'genesis_before_loop', 'theme_author_box_archive' );

function theme_author_box_archive() {
  $authinfo = "<div class=\"author-box\">\r\n";
  $authinfo .= get_avatar(get_the_author_id() , 80);
  $authinfo .= "<strong>About <a href=\"" . get_the_author_meta('url') . "\" target=\"_blank\" title=\"" . get_the_author_meta('website_title') . "\" rel=\"nofollow\">" . get_the_author_meta('display_name') . "</a></strong>\r\n";
  $authinfo .= "<p>" . get_the_author_meta('description') . "</p>\r\n";
  $facebook = get_the_author_meta('facebook');
  $linkedin = get_the_author_meta('linkedin');
  $twitter = get_the_author_meta('twitter');
  $gplus = get_the_author_meta('gplus');
  $flength = strlen($facebook);
  $llength = strlen($linkedin);
  $tlength = strlen($twitter);
  $glength = strlen($gplus);
  if ($flength > 1 || $glength > 1 || $llength > 1 || $tlength > 1) {
    if (($flength <= 1 && $glength <= 1 && $llength <= 1) && $tlength > 1) {
      $authinfo .= "<p id=\"authcontact\"><a href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . $twitter . " on Twitter\">Follow " . get_the_author_meta('first_name') . " on Twitter</a></p>\r\n";
    } else {
      $authinfo .= "<p id=\"authcontact\">Find " . get_the_author_meta('first_name') . " on ";
      if ($flength > 1) {
        $authinfo .= " <a href=\"http://facebook.com/" . $facebook . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on Facebook\">Facebook</a>";
      }
      if ($glength > 1) {
        if ($flength > 1) {
          $comma = ',';
        } else {
          $comma = '';
        }
        if ($llength > 1 || $tlength > 1) {
          $and = '';
        } else {
          $and = ' and';
        }
        $authinfo .= $comma . $and . " <a href=\"http://plus.google.com/" . $gplus . "\" rel=\"me\" target=\"_blank\" title=\"" . get_the_author_meta('display_name') . " on Google+\">Google+</a>";
      }
      if ($llength > 1) {
        if ($flength > 1 || $glength > 1) {
          $comma = ',';
        } else {
          $comma = '';
        }
        if ($tlength > 1) {
          $and = '';
        } else {
          $and = ' and';
        }
        $authinfo .= $comma . $and . " <a href=\"http://www.linkedin.com/in/" . $linkedin . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on LinkedIn\">LinkedIn</a>";
      }
      if ($tlength > 1) {
        $authinfo .= ", and <a href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on Twitter\">Twitter</a>";
      }
      $authinfo .= ".</p>\r\n";
    }
  }
  $authinfo .= "</div>\r\n";
  if ( is_author() ) {
    echo $authinfo;
  }
}

function theme_author_box() {
  $authinfo = "<div class=\"author-box\">\r\n";
  $authinfo .= get_avatar(get_the_author_id() , 80);
  $authinfo .= "<strong>About <a href=\"" . get_the_author_meta('url') . "\" target=\"_blank\" title=\"" . get_the_author_meta('website_title') . "\" rel=\"nofollow\">" . get_the_author_meta('display_name') . "</a></strong>\r\n";
  $authinfo .= "<p>" . get_the_author_meta('description') . "</p>\r\n";
  $facebook = get_the_author_meta('facebook');
  $linkedin = get_the_author_meta('linkedin');
  $twitter = get_the_author_meta('twitter');
  $gplus = get_the_author_meta('gplus');
  $flength = strlen($facebook);
  $llength = strlen($linkedin);
  $tlength = strlen($twitter);
  $glength = strlen($gplus);
  if ($flength > 1 || $glength > 1 || $llength > 1 || $tlength > 1) {
    if (($flength <= 1 && $glength <= 1 && $llength <= 1) && $tlength > 1) {
      $authinfo .= "<p id=\"authcontact\"><a href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . $twitter . " on Twitter\">Follow " . get_the_author_meta('first_name') . " on Twitter</a></p>\r\n";
    } else {
      $authinfo .= "<p id=\"authcontact\">Find " . get_the_author_meta('first_name') . " on ";
      if ($flength > 1) {
        $authinfo .= " <a href=\"http://facebook.com/" . $facebook . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on Facebook\">Facebook</a>";
      }
      if ($glength > 1) {
        if ($flength > 1) {
          $comma = ',';
        } else {
          $comma = '';
        }
        if ($llength > 1 || $tlength > 1) {
          $and = '';
        } else {
          $and = ' and';
        }
        $authinfo .= $comma . $and . " <a href=\"http://plus.google.com/" . $gplus . "\" rel=\"me\" target=\"_blank\" title=\"" . get_the_author_meta('display_name') . " on Google+\">Google+</a>";
      }
      if ($llength > 1) {
        if ($flength > 1 || $glength > 1) {
          $comma = ',';
        } else {
          $comma = '';
        }
        if ($tlength > 1) {
          $and = '';
        } else {
          $and = ' and';
        }
        $authinfo .= $comma . $and . " <a href=\"http://www.linkedin.com/in/" . $linkedin . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on LinkedIn\">LinkedIn</a>";
      }
      if ($tlength > 1) {
        $authinfo .= ", and <a href=\"http://twitter.com/" . $twitter . "\" target=\"_blank\" rel=\"nofollow\" title=\"" . get_the_author_meta('display_name') . " on Twitter\">Twitter</a>";
      }
        $authinfo .= ".</p>\r\n";
    }
  }
  $authinfo .= "</div>\r\n";
  if ( is_single() ) {
    echo $authinfo;
  }
}

What do you think? Do you have a different way of displaying the author box? I know there’s more than one way to skin a cat. Tell me how you customize the author box in the comments below.

18 Replies to “Customize The Genesis Author Box in WordPress”

  1. Did you have one before the tutorial? If not the trick is probably in your if statement at the end of the functions. If so you’ll need to make sure you’re removing the standard Genesis box from your theme.

  2. I had the same issue earlier. I disabled the author box (to be shown on archives page) from the edit profile page.

  3. I did have one before the tutorial. I simply copy and pasted the code from the end of the tutorial under ‘6) Putting it all together.’ My understanding was that line 4 should have removed the author box. Is this correct?

  4. It should have, but I fear some times the area in which it is placed isn’t the same which would make that line obsolete. Glad to hear you got it working though.

  5. I would prefer to be able to fix it properly though… can you point me in the direction of a tutorial or documentation that would teach me this stuff. Thanks.

  6. Studiopress.org has some great tutorials. If you would like I can take a look at your code to try to help you with the discrepancy between this tutorial and what you have.

  7. I tried copying and pasting the code from “6.) Putting it all together”, but I got this error code when I saved functions.php: “Parse error: syntax error, unexpected T_VARIABLE in /home/content/*******/html/wordpress/wp-content/themes/copyblogger/functions.php on line 60”

    Line 60 is $authinfo = “rn”;

    Any advice?

  8. fantastic tutorial.
    wonder if you could point me in the direction of figuring out how to get profile pix up there that are NOT gravatar images.
    some of the folks who post on my site do not have them – and i want to be able to have something other than the generic image show up via this line of code,

    $authinfo .= get_avatar(get_the_author_id() , 80);

  9. Hi Chris,
    Thanks for the great tutorial. I just want to ask how to use social media icons instead of the text link?

  10. Hi Chris,
    i am a beginner and really want your help. I tried to change the links to photos but i actually can not understand where to write the html code. isn’t the above code php?
    Another thing is that the author box text is “find on” then come the links, so i want to change it to include my name like yours ๐Ÿ™‚ or to change the “find” to “like our page” for example. so where is the html file that i can modify to do these stuff.
    Thanks again, and sorry if i am asking too many simple or even stupid questions but as i said i am still a complete novice

  11. Hi Ali,

    All the code above is PHP and will go in your functions.php file in your Genesis child theme.

    As for the rest, I’m afraid I don’t know what you mean by changing the links to photos. Finally, when you put it all together, “find on” is on line 24.