How To Display the Author Profile Box in WordPress Without a Plugin

In this tutorial, I will show you how to easily develop and display the Author´s Bio box in your WordPress posts without the need of a plugin. Probably you already have seen some Websites displaying the Author´s profile at the end of each post and you wonder how it is done.

Are you putting a face to your articles? How about the author´s background and contact information? The author´s profile box is a great idea for your blog as it can help with user interaction and puts a face to the author, and offers the chance to mention other projects or services. In short it is a nice socialization/advertisement tool.

Final Result

The picture below shows an example of the Author´s bio box generated at the end of each post for this blog.

Sample of Author´s Bio box as it appears on this blog.

What about a plugin?

Yes, there are plugins that add an author´s box to your blog. But I encourage you to read my previous article about unnecessarily adding plugins to your theme. Also, you really don´t need a plugin for such a simple task.

Features of My “Author Profile Box” Code

Everything that appears in the Author Profile Box is automatically loaded from the WordPress dashboard user´s profile. It has the following features:

  1. Displays the author´s image: The image is the author´s Gravatar. It is loaded via the author´s email address set in the user´s profile area.
  2. Displays the author´s chosen display name set in the WordPress user´s profile.
  3. Displays the author´s description set in the WordPress user´s profile section.
  4. Displays the author´s Website entered in the WordPress user profile area.
  5. Links to all published posts by the same author.
  6. The author´s image size can be changed.
  7. The code is tested to work properly with all major browsers.

“Author Profile Box” Code | functions.php

Open the functions.php file located in your theme´s folder, and add (copy and paste) the following code (CODE1).

CODE1:

<?php
/***********************************************************************
* @Author: Boutros AbiChedid 
* @Date:   July 8, 2011
* @Website: http://bacsoftwareconsulting.com/
* @Description: Function displaying Author profile at the end of each Post.
* @Tested on: WP version 3.1.3 (requires WP Version 3.0 and above)
***********************************************************************/
function bac_author_box(){
	//Image Size, set at 80px by 80 px.
    $img_size = 80; /*** MODIFY IF YOU LIKE ***/
	
	echo '<div class="author-box clear">'; 
	echo '<div class="author-left-side">'; 
	echo '<div class="author-img">' . get_avatar( get_the_author_meta('user_email'), $img_size ) . '</div>';
	echo '</div>'; 
	echo '<div class="author-right-side">';
	echo '<div class="author-name">About the Author | ';
	echo '<span> ' . the_author_posts_link() . '</span></div>'; 
	echo '<div class="author-bio">' . the_author_meta( 'user_description' ) . '</div>';
	echo '<div>';
	
	//Use get_the_author_meta() if you need to return (not display) the information. 
	if (get_the_author_meta('user_url') ) { 
		echo 'Visit ' . get_the_author_link() . ' Website.';
	} 
	else { 
		//If there is no URL set in the dashboard, display nothing. 
	}
	echo '</div>'; 		
	echo '</div> <div class="clear"></div>'; 
	echo '</div>';       
}
?>

CODE1 Notes:

How do I get my Image displayed? The image is your Gravatar and is linked to your email address. If you don´t have a Gravatar account you can get one at Gravatar. If you have a Gravatar account but it is not displaying it means you need to change your email address in the user´s profile section of your WordPress dashboard to match the one your Gravatar is registered with.

If you don´t want to create an avatar account. You can modify CODE1 to call your image directly. If you don´t know how, feel free to ask and I will show you how.

the $img_size variable can be changed. The value ´80´ means (80px by 80px). You can change it to any number you like, but its best to keep it within reason (110 or less). For example, if you like your avatar image to be 100pxby100px then set the $img_size = 100; Also make sure that you specify the actual image size, so that no resizing is performed.

CODE1 requires WordPress version 3.0 and above. CODE1 will work for WordPress 2.8 and above if you replace line 25:
echo 'Visit ' . get_the_author_link() . ' Website';
with the following:
echo 'Visit ';
echo the_author_link() . ' Website';

But I hope that you will upgrade to the latest WordPress version.

Code References:

Where to Add the Author´s Information?

The author´s information is set in the user´s profile section in your WordPress dashboard. After logging from your WordPress login screen, go to Users ->Your Profile in your Administration Screens, and fill out the required information as shown in the image below:

User´s profile in WordPress dashboard.

Template tag | single.php

Now, to display the author´s bio box, you need to add the below template tag (CODE2) to your theme´s single.php file. Add it where you want the author´s profile box to appear. Remember that CODE2 must be added within the loop, otherwise it will not work.

CODE2:

<p>Post Word Count: <span class="black">
<?php if(function_exists('bac_author_box')) { bac_author_box(); }?>
</span></p>

Why do you Wrap the template tag, bac_author_box(), inside an If Statement?

It is important to make it conditional. Otherwise, if bac_author_box() does not exist or there is a problem loading it you will get an Error message: “Fatal error: Call to undefined function bac_author_box() in…”. However, by wrapping it in a conditional statement the Website loads without any errors.

Reference:

This is Where I placed CODE2 for this Blog (in single.php file).

<!-- part of the single.php code removed for brevity. --> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!-- part of the single.php code removed for brevity. -->

<p class="postmetadata">
Last Updated: <span class="black"><?php the_modified_date('F j, Y'); ?></span><br />
Written by: <?php the_author_posts_link(); ?><br />
<?php the_tags('Tags: ', ', ', '<br />'); ?>
Posted in Category(ies): <?php the_category(', ') ?><br />
Post Word Count: <span class="black"><?php if(function_exists('bac_post_word_count')) { bac_post_word_count(); }?></span>
</p>

<!-- Display Author's bio/profile Box for every single post-->
<?php if(function_exists('bac_author_box')) { bac_author_box(); }?> 
</div> <!-- End of #content -->

<div class="comments_content">
<?php comments_template(); ?>
</div>
<?php endwhile; else: ?>
     
<!-- the rest of the single.php code is removed for brevity. --> 

Styling the Author´s Profile Box | style.css

Finally we need to style the Author´s Bio/Profile box with CSS. The following code is what I used for this blog. The code should be added to your theme´s CSS file (called style.css). Go ahead and change it to fit your blog´s design.

/* Styling 'Author bio Box' Section by BOUTROS ABICHEDID */
.author-box { 
margin: 0 0 0 30px; 
padding: 7px; 
color: inherit;
background-color: #eee; 
border: 1px solid #777;
} 
.author-left-side {
float:left; 
margin: 0 5px 0 0;
} 
.author-right-side {
float:left; 
/* Caution! The default image size I used is 80px by 80px. 
If you increase the image size, you might need to decrease the width */
width:485px; 
font-size: 12px; 
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin: 0 0 0 8px; 
text-align:justify;
} 
.author-img {
border: 2px solid #ddd; 
padding:0;
} 
.author-name {
font-weight:bold; 
} 
.author-name span { 
font-size: 13px;
} 
.author-bio {
padding: 0;
} 
.clear {
clear:both;
}

Your Turn to Talk

You now have the choice to show the author´s profile/bio box in your WordPress blog and customize it to fit your theme, without the need of a plugin.

How easy did you find this tutorial to implement? Do you have something to add or anything else to say? If so, please share your opinion in the comments section. Your opinion matters, unless it is a Spam.

Reference

If you enjoyed this post, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

22 Responses to “How To Display the Author Profile Box in WordPress Without a Plugin”

  1. tubagus says:

    if i want to add same author but with different bio, how can i do it?

    • The bio is added in your WP dashboard (users). If you want to change the bio you can change it there. The bio can’t be changed dynamically, i.e. a different bio for different posts.

  2. Kentzo says:

    I encounter page 404 problem if the author’s user_nicename contains a space in the wp_users table.

    What I have done to overcome this problem is that I replace the space in the database with a hiphen as recommended by:
    http://wphacks.com/change-author-archive-permalink/#comment-93831

    But this is not a smart solution as I need to change all the names with spaces with a hiphen.

    Someone else suggest to use get_author_posts_url() instead. I have not verified whether it works.

    Does anyone encounter this issue? My wordpress is 3.1.3

    • Hi Kentzo,

      I ALWAYS use a space in user_nicename, and WP converts the space into hyphen and I don’t get 404.
      This is not related to your 3.1.3 version, since the code wrks on this version of WP (you can upgrade t0 3.3.1 if you can)
      I am not sure why you have the 404 issue. Probably due to something else?
      Why don’t you try the get_author_posts_url() function instead and see if it works for you, and let us know.
      Boutros.

      • kentzo says:

        When you say WP convert the space into hyphen. Do you mean your database of user_nicename in your wp_users table will have the hypen injected by the WP automatically when you save your user_nicename with a space?

        Because in my case, I have “john smith” as user_nicename in database.
        The link will be displayed like this “www.momorice.com/author/john smith”.(when i hover the mouse over the link)
        However I think the browser is smart enough to change it to
        “www.momorice.com/author/john%20smith” and send to the server. However it could not find the corresponding author. I guess I need to strip off the %20 myself from the author name before searching the table.

        However I guess I should not have to go to that extend. Something else not right.

        • That’s weird. I am not sure why WP is not replacing the space into a hyphen. Definitely a link with a space will be replaced with its HTML entity (%20) by the browser, and the link will not be found.
          Do you have the latest WP version? Is there any plugins that are interfering?
          Go to my Blog’s sitemap (http://bacsoftwareconsulting.com/blog/index.php/sitemap/)
          And check the Authors names (most with spaces and Staring with Capital Letter) and how their link is displayed (all small letters with a hyphen between first and last name)
          I don’t do that, but WP does and I don’t think there are settings for this, it’s automatic.
          You could also search/ask in WordPress Website (http://wordpress.org/support/).
          Boutros.

  3. J says:

    Hey! Great blog! I am creating one myself, but it is still a local install, hope I upload it soon. I am fairly new to wordpress, how can I use my own avatar without gravatar? Thank you

    • Why don’t you use Gravatar? Your image follows you anywhere you go online, as long you use the same email address. Your image even shows in WP dashboard + comments.
      No reason to reinvent the wheel. It’s a free service and it is secure.
      Boutros.

  4. Scott says:

    I am using a themify theme and in the functions.php it says to create a custom-functions.php in the theme folder. If I create the custom functions php and add your Code into their will this still work as shown?

    Thanks for the great post on this topic, gravatar plugins are not working so great for me.

    • Thanks Scott for your comment.
      I think it should work, they are using the concept of a child theme so that you don’t modify the original theme.
      But You can’t be certain unless you try it out, you have nothing to lose. Follow the instructions of the tutorial and put CODE-1 in ‘custom-functions.php’ file, also don’t forget to add the template tag in ‘single.php’ file and style it in ‘styles.css’ file and also fill out your info. in the WP dashboard.
      If you want to follow the same concept of Child themes for ‘single.php’ and ‘styles.css’ files –> http://codex.wordpress.org/Child_Themes
      Also read the documentations of your themify themes.

      Let me know if that works for you (or Not).
      Boutros.

      • Scott says:

        Thanks a lot, I will try it out, I have all the authors info filled out so I am hoping this will look nice. I like the way yours appears. If I get it going I will be sure to come back and leave a comment either way!

        • Scott says:

          I have one more question in mind, if I did not want to grab the authors bio would I just delete out this entire line?

          echo ” . the_author_meta( ‘user_description’ ) . ”;

        • Hi Scott,
          I am not sure why you need to do that. The author’s bio is the main part of the Author’s profile, you want people to know you, right?
          To answer your question, I would not delete the line but I would comment it in case you need it for later. Just put // at the beginning of Line 20, just before echo, Like so:

          //echo '<div class="author-bio">' . ....
          

          You also need to comment the ‘author-bio’ class in ‘styles.css’ file too (lines 33,34,35 of the CSS code).
          Or Another method, if you are not using the “Biographical Info” somewhere else in your Blog, you could keep this section empty in the dashboard (Users -> About the User -> Biographical Info)
          while keeping my code the same.

          Hope this helps.
          Boutros.

  5. Ankit says:

    Will this method work with every theme. I am currently using Twenty Eleven on my blog and looking for methods to add author bio box.

    • It should work, but on every theme I am not sure. There are thousands of themes, with many coding variations and different versions.
      Why don’t you try it on Twenty Eleven theme, and Let me know if it works (or not).
      If you get stuck, let me know.
      Thanks for your comment.
      Boutros.

  6. Rajesh Namase says:

    This is what I really want, thanks for this code.

  7. Samuel says:

    Hi Boutros, this is exactly what I needed! Thanks so much for putting this out.

    One question: How can I get the author’s website link to open in a blank page?

    Thanks!

    • Hi Samuel,
      Glad that you found my post useful.
      To answer your question: you can’t open it in a a blank page, even if you put target=”_blank” in the link. When you save your Biographical Info in the dashboard, WordPress will automatically remove the target=”_blank”… I am not sure why. I don’t know if there is a workaround.

  8. Podiz says:

    Hi, I tried it in WordPress 3.2.1 , it seem to be not working. When I add it to functions.php , it throws an error.

  9. gayatri says:

    I want to comment user profile, can I do that?