WordPress hack: Adding a bio block to a post

If you have multiple writers on your blog or if you are accepting guest articles and you want to give this person some exposure, a little box containing a short bio will do perfectly.

The only problem is that bios are not standard in WordPress. This article will tell you how to hack your own bio box into WordPress without using a single plugin! A great way to start developing in WordPress.

Hack your template

First thing we need to do is to hack a file in your theme’s template. The file we want to edit is called “single.php” in most WordPress themes.

Open up this file.

This is the template file that shows a single post. Typically the template file has the following code somewhere “the_content()” looks for this.
Beneath this line of code paste the following:

<?php
if (get_post_custom_values("bio")) {
?>

<div class='writer_bio'>
<img src='<?php the_author_aim(); ?>' alt='' />
<?php the_author_description(); ?>
</div>
<?php
}
?>

Adding a bio to a writer

We now want to add / edit writers, you can create them in the user panel of WordPress. I am guessing you are already using this to display the author’s name on your blog. We can use the fields available per user to set the bio.

Go and edit an existing user that has an article posted (You can change the user that posted the article when you edit an article.)
Now fill in the “Biographical Info” text area with the HTML to go into the bio block.

My bio, for example is: “Gaya Kessler is a 21 year old web developer writing about a kinds of thing. He’s the editor of <a href=”http://www.fuelyourcoding.com”>Fuel Your Coding</a> and owner of <a href=”http://www.gayadesign.com”>Gaya Design</a>. You can also <a href=”http://www.twitter.com/gayadesign”>catch him on twitter</a>.”

To add the avatar we need to fill in the “aim” field. I am not using this field anywhere in the theme, but now I am going to use it in the bio. Put the absolute path to the image here, eg: “http://fuelyourcoding.com/files/writer-rob.png”.

Now all there is left to do is enable the bio on a post. To do this you only need to add a custom field to a post.
Go to a post you want to add bio to and create a name custom field called “bio” and give it the value “1″.

If all went well the bio should now be visible in that post!

Is that all?

Jep! The hacking is done.

You might want to add some styling though, to make it more appealing to the eye.

Good luck with this easy hack!