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.
The picture below shows an example of the Author´s bio box generated at the end of each post for 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:
- 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.
- Displays the author´s chosen display name set in the WordPress user´s profile.
- Displays the author´s description set in the WordPress user´s profile section.
- Displays the author´s Website entered in the WordPress user profile area.
- Links to all published posts by the same author.
- The author´s image size can be changed.
- 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).
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.
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:
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.
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.
This is Where I placed CODE2 for this Blog (in single.php file).
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.
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.