null 💻 notes

WordPress Author Box without a Plugin

In this tutorial we’re taking the custom author image function we created and turning it into a custom About the Author box in WordPress. If you haven’t already done so, go through the [custom author image tutorial][1] and follow the steps involved in creating our custom author image function.

If you’re too lazy to do that, copy and paste the following code in your functions.php file:

/*-----------------------------------
/* GRABS AND DISPLAYS AUTHOR IMAGE
/* (USING OUR CUSTOM AUTHOR IMAGE LOCATIONS)
-----------------------------------------*/
function the_author_image($curauth="") {
  global $post;
  if($curauth==""){
    // If we are not requesting a specific author image via their ID,
    // we'll get the current author image of whatever page we're
    // calling this function from.
    $author_id = get_the_author_meta('ID');
    // Make sure you change the file extension if you aren't using JPG!
    $url = home_url()."/author-images/author-".$author_id.".jpg";
 return '<img alt="" src="'.$url.'" />'; } else {
    // However, if we ARE requesting a specific img via $curauth,
    // then let's grab THAT author id image instead.
    $url = home_url()."/author-images/author-".$curauth->ID.".jpg";
    return '<img alt="" src="'.$url.'" />';
  }
}

Now that you’ve got our custom author image function up and running, we’re ready to create a custom ‘About the Author’ box solution.

What do we want from a custom ‘About the Author’ box? #

We’ve defined the requirements. Let’s get started.

Step 1: Edit functions.php. #

Go to Appearance->Editor, and open up your functions.php file. We’ll create a function here that displays the author box in one quick call.

A note on execution: There are two ways we can approach this. First, we can create a filter that will automatically call the function at the end of the_content. I don’t like doing this because I’m used to editing single.php for something I want happening on every individual post. Second, we can do just that — edit single.php and add the function call wherever we want the author box to appear. This is ideal because we can customize where we put the author box (and lets us change where it is later in case we want to move it around).

Let’s define our new function:

function the_about_the_author_box() {
  // We'll fill in the function later

}

I don’t want to fill this in just yet because I want us to go to where we’ll display the about the author box and make a call to this function to get it out of the way. It’s a lot easier to debug/modify our function and how our box is displayed when we have *functions.php *loaded up in one screen and our page loaded up in another.

Step 2: Add our function to single.php. #

Now that we have a custom function defined, let’s make it show up in every single individual post. I’ll also show you how to exclude the About the Author box for specific categories, too, in case you have a category that is automatically filled with posts or that you don’t have a set author for.

Go to Appearance->Editor, and open up your single.php file. There are two places that are popular to put an about the author box, and while I’ll show you how to put the box in both of those places, you are more than welcome to paste the code wherever you want and have your About the Author box show up somewhere else.

The first place that’s popular is right after the post title. Search your single.php for something like this:

<?php> the_title(); ?>

Usually this is wrapped in header tags, and probably belong to a class, so you might even see something like this:

<h1 class="header-title"> <?php the_title(); ?> </h1>

Let’s add in our function just after the call to the_title, so if you see something like the latter example from above, you would save your file once you have something that looks like this:

`

`

Now that we know where we want our about the author box to be displayed, let’s talk about what will be displayed when this function is called. Right now we have an empty function, so let’s go back to functions.php and fill it in.

Step 3: Edit functions.php. #

Yes, we could have done this in addition to step one, but I wanted it to be separated to focus on what we’re doing. What do we want out of an About the Author box?

Knowing our prerequisites, let’s design the layout of the output. It’s always a good idea to sketch out how you want your CSS to look, that way you have a clear plan going into the code. Nothing too fancy — a simple container, then a left class (which will hold the author image) and a right class (which holds everything else). Now that we’ve got an idea of what we want it to look like, let’s get our hands dirty with some code.

Go to Appearance->Editor, and reopen your functions.php file. Find our function and let’s get started:

function the_about_the_author_box() {
  // First, grab all of the author's relevant information
  $name = get_the_author_meta('display_name');  // Get the "display name" that we choose in the profile field
  $bio = get_the_author_meta('user_description'); // Get the bio from the profile field

  $output = '<div class="aboutbox-container">';           // Begin the container
  $output .= '<div class="aboutbox-left">';               // Begin the left inner container
  $output .= the_author_image();                          // Get the author image
  $output .= '</div><div class="aboutbox-right">';        // End the left inner container and begin the right
  $output = '<h3 class="aboutbox-title">';                // Start the title tag with our CSS
  $output .= $name;
  $output .= '</h3><p class="aboutbox-bio">';
  $output .= $bio;
  $output .= '</p></div></div>';                          // Close out the rest of the tags

  echo $output; // Display the box!

}

I’ve added some comments to explain what’s happening, but here’s the gist of it: We establish a container, put the author image in the left part, and put the author’s name and bio in the right part.

Now on to the CSS. If you have the tab in your theme, go to Appearances->Edit CSS. If you don’t have that option, go to Appearance->Editor, and click on your stylesheet.css file. Here’s some default information that I have put in for you to use as a springboard to your own customizations. Copy and paste this into the editor and save it.

.aboutbox-container {
  width: 100%;
}

.aboutbox-left {
  float: left;
  margin: 5px;
  width: 100px; /*Set this to the width of your author images*/
}

.aboutbox-right {
  overflow: hidden;
  margin: 5px;
}

h3.aboutbox-title {
  font-family: Georgia;
  font-weight: bold;
  font-size: 22px;
  color: #aa0000;
}

p.aboutbox-bio {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: #444;
  font-size: 14px;
}

Now it’s on you to come up with some fancy CSS that matches your site and aesthetic tastes.