How to Create an Author Info Section in Wordpress

How to Create an Author Info Section in Wordpress

It’s common to find an author’s credit and bio at the end of a blog post, especially on blogs that post content from multiple writers. Using a cocktail of Wordpress template tags, an info section can be easily put together to showcase the author’s Gravatar profile image, their name, link to their website and short bio.

Example author info section

A typical author info section sits at the bottom of a post, so we’ll add our code in the single.php Wordpress file. The aim is to display their name, linked to their personal homepage; automatically pull in their gravatar profile picture; and display a short bio.

Enter the autho info in Wordpress

Enter the User Info

The majority of this information is inserted into the Wordpress Users section of the admin panel, go ahead and create the user and fill out the relevant fields. Select the appropriate option for how the name should be displayed, enter the user’s website, and complete the Biographical Info.

Write out the HTML

<div id="author-info">
    <div id="author-image">
    	<a href="**Author Website**">**Author Gravatar**</a>
    </div>   
    <div id="author-bio">
        <h4>Written by <a href="**Author Website**">**Author Name**</a></h4>
        <p>**Author Description**</p>
    </div>
</div><!--Author Info-->

Open up your single.php theme file and write out the initial HTML code. The whole author info section is contained within the div of author-info. Within this, is a div containing the linked gravatar image, followed by a div containing the main author information, such as the author’s name set in a level 4 heading, and the paragraph awaiting the biographical information.

Style up the CSS

#main div#author-info {
	background: #eaeaec; padding: 10px; margin: 0 0 15px 0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	overflow: auto;
}
	#main div#author-info div#author-image {
		float: left; margin: 0 10px 5px 0; border: 5px solid #DCDCE1;
	}

With the HTML in place, the CSS styling can be written out to move everything into place. Here the author-info div is styled up with a grey background, some padding around the edges and a bottom margin. A touch of border radius rounds off the corners and the author-image is floated to the left.

Adding the Wordpress Template Tags

<div id="author-info">
    <div id="author-image">
    	<a href="<?php the_author_meta('user_url'); ?>"><?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?></a>
    </div>   
    <div id="author-bio">
        <h4>Written by <?php the_author_link(); ?></h4>
        <p><?php the_author_meta('description'); ?></p>
    </div>
</div><!--Author Info-->

The dynamic functionality can then be added to the theme file with the use of Wordpress’ template tags. Here’s what’s used:

<?php the_author_meta('user_url'); ?>

The the_author_meta() template tag can be used to pull in various snippets of information about the user, in this case it’s used to find the author’s URL.

<?php echo get_avatar( get_the_author_meta('user_email'), '80', '' ); ?>

The get_avatar() template tag is used to grab the author’s gravatar, and the get_the_author_meta(‘user_email’) tag is used to take the place of the user’s email in the parameters.

<?php the_author_link(); ?>

The the_author_link() template tag is used to simply drop in the author’s name, and automatically link it up to their website URL.

<?php the_author_meta('description'); ?>

Finally, the the_author_meta() tag is used once again, this time with the paramater to fetch the user’s description, also known as their biographical information.

Taking the idea further

With the range of template tags available to Wordpress, it’s easy to take things that extra step and add new features, why not consider the following in your theme?

Display all posts by user

<p>See all posts by  <?php the_author_posts_link(); ?> </p>

Display user’s post count

<p><?php the_author(); ?> has written <?php the_author_posts(); ?> posts on <?php bloginfo('name'); ?></p>

Link to user’s AIM address

<p><?php the_author(); ?>'s AIM address is <?php the_author_meta('aim'); ?></p>