How To Add An Author Bio To WordPress Posts
I’ve been meaning to start doing some WordPress video tips for a while now and have finally got round to producing my first one. The primary goal of these videos is to provide you with some handy bitesize tips and hacks that you can use to enhance your WordPress site without much effort.
In this first tip I’m going to focus on adding an author bio section to the bottom of your blog posts (like the one at the bottom of this post) – having an author bio can be a great way to create a more personal feel on your blog and show your readers that there is a real person behind the site.
There are a number of different approaches you can potentially use to add an author bio, but I’m going to show you one approach using some of the functionality that WordPress automatically provides you with. There are also written instructions below the video (with screenshots) that detail how to go about doing this.
Just a quick note: if you have problems viewing the code in this video, it might be worth watching the video in High Definition and Full Screen mode.
Video Notes
In this example I’m going to use the blog section on the Sanura WordPress Theme – by default there isn’t anything at the bottom of the individual blog posts in this theme – you simply have the blog post content followed by the comments.
We therefore want to add an “About The Author” section just above the comments – the first thing that we need to do is access the “Users” section in your WordPress Admin panel – enter all of the details requested on this page. In particular, you want to ensure that you set the “Display name publicly as” field to your full name and that you complete the “Biographical Info” section.
Note that you can include links in the “Biographical Info” section if you surround the appropriate text with <a> tags. As you can see above, I’ve done this with my Twitter username (@cpcreed) – doing something like this will make it easier for people to click through and follow you. It’s also a great way of advertising other sites/projects that you’re working on.
OK, now it’s time to write some code. For our author bio section we need to access the public name you entered and your biographical information. We can get the author name via the WordPress function <?php the_author() ?>. Similarly, we can get the biographical information that you entered via the WordPresss function <?php the _author_description ?>.
You need to enter these WordPress tags into your single.php file – open that file and locate the place where you add your comments (i.e. the line where it says <?php comments_template() ?>).
Just above that you’ll need to add the following code:
<div id="author-bio"> <h3>About The Author</h3> <img src="<?php bloginfo('url'); ?>/wp-content/themes/sanura/images/chriscreed75x75.png" alt="Chris Creed" /> <h4><?php the_author(); ?></h4> <?php the_author_description(); ?> </div><!--end author-bio-->
Let’s break that down a bit. On line 1 we create a new author biography container – we then have the title (“About The Author”) followed by an image. Make sure that you change the URL of your image to a URL where you have a photo that has dimensions of 75×75px (or whatever size is appropriate for your template).
On line 4 we then add the author name (i.e. <?php the_author(); ?> and follow that with the biographical information (i.e. <?php the_author_description() ?>.
If you save this code and then view your site you should find that you have something like the following:
To tidy this up we need to add a bit styling – add the following code to your CSS stylesheet (i.e your style.css file):
#author-bio { border-top: 1px dotted #cccccc; border-bottom: 1px dotted #cccccc; padding: 15px 0; } #author-bio h3 { font-size: 18px; margin: 0 0 10px 0; } #author-bio h4 { font-size: 14px; margin: 0 0 3px 0; } #author-bio img { float: left; width: 75px; padding: 2px; border: 1px solid #cccccc; margin: 5px 15px 0 0; }
You may need to play around with the CSS code above to make it consistent with your site, but this code should be a good starting point. You should end up with something like the following:
That’s it! I hope you found this tip useful – please let me know if you have any questions or if there are any other specific areas you’d like me to focus on with these quick tips.
March 8th, 2010 at 7:03 pm
Nice tutorial, worked without any problem
. Looking forward to the next one.
Thanks
March 9th, 2010 at 9:27 am
Thanks Chetan – glad it worked
March 8th, 2010 at 7:57 pm
Excellent tutorial! I’m seeing this more and more on WordPress sites.
March 24th, 2010 at 3:07 pm
Thank you so much! Very easy to follow tutorial, even for a non-techie like me.
March 25th, 2010 at 2:23 am
No problem Angie
March 25th, 2010 at 1:02 pm
Brilliant and simple! Thanks so much for this tutorial. Can’t wait to implement it.
April 12th, 2010 at 2:27 pm
Thanks a lot. This is working without any problems. I have used this is the authors page too
May 15th, 2010 at 10:30 am
Chris,
I’m starting a WP magazine-type site with posts/articles written by many contributors that I will edit/moderate before posting. I would like to include an author bio/photo at the bottom of each post. Your example is exactly what I’m looking to do. I’ve been looking for a WP plugin so I wouldn’t have to go into the code but I haven’t found one and your tutorial seems straight-forward enough for me to tackle. Question: After I’ve implemented your instructions, will I be able to designate different authors for different articles in the WP admin without going into the code each time? Thanks for your assistance!
Larry
May 15th, 2010 at 6:01 pm
Chris,
Also: Is there a way to put an author byline — i.e,. “By Chris Creed” — at the top of a post, beneath the headline, as is the convention in all publications? Obviously, it would be great if the author’s name was linked to the author’s profile page. Thanks again.
Larry
June 5th, 2010 at 11:14 am
Thank you for sharing this code! I have a question though, my blog has multiple authors so how can I show their own info in posts made by them?
June 16th, 2010 at 11:14 pm
Thanks heaps, this was really helpful, although it took me about 5 hours to sort out the CSS stuff – I’m completely new to all of this!
July 25th, 2010 at 1:18 pm
This tutorial worked perfectly. I had used some code that I wrote a while ago for my author spot, but this worked so much better. Thank you for the information.