How To Display Author Bio With WordPress

WordPress is a CMS that allows your website to work with multiple authors. When your website has multiple authors it's good to have the author bio at the end of the posts so that the reader can get to know the author.

In this tutorial we are going to learn how easy this is to do in WordPress and how we can customise the default WordPress Author info to provide even more information about WordPress Authors.

Author info

WordPress Users

There are different types of users that can use your WordPress site, these different types of users are defined as roles.

The user can be one of five different roles:

  • Subscriber
  • Administrator
  • Editor
  • Author
  • Contributor

Each of these roles have different security access in WordPress, some can just read posts, some can write posts but not publish them and others have full access to the WordPress site.

Subscriber

This is the lowest level of WordPress users and can only view their own profile and only read posts on the WordPress site.

Contributor

A contributor is a user that can write their own posts but they are not able to publish them on the site. This is the ideal role to have for guest posters, it allows them full control to write the post but can't be published without the editor approval.

Author

The author is the next level up from the contributor, they are able to have full control over their own posts but they have access to publish the post to the site.

Editor

The editor role is someone who can write their own posts and manage each of their own posts but they can also manage all the other posts on the site by any author.

Administrator

This is the main role for the site and can have full control over the site, change theme, plugins, write posts, read posts, delete posts they can do what ever they want.

Add An Author To WordPress

In this tutorial we are going to create a multi author site and add their author bio under each of the posts on your site. For this we are going to start off by starting a new author for the WordPress site.

Login to your WordPress dashboard and you will see the menu users, click on add new.

Wordpress users

Fill out the new user form with as much information as possible, the more information you put in the more you will be able to display to your visitors. When you have add the new user and given them their new username and password, they will be able to login to your WordPress site.

It is up to the user to fill out their own profile on WordPress, this is where they can enter their own contact information and Biographical Info about themselves.

Edit The Author Profile

Once logged in you can edit your profile, to edit the author profile go to the Users -> Your Profile.

730px-profile

Fill out the above form with all your contact information and your biographical information.

User Social Media Accounts

In the user profile under the contact information area the user can enter their website address this makes it easy for you to link back to them on the post.

But what has become more and more popular now is to display the users social media profiles. This can be added to the users biographical area but this means they will need to type in the html for themselves.

It would be much easier if the user can enter their Twitter account, Facebook account and Google account on the profile page so we can place a standard link back to their profiles.

By default WordPress doesn't come with input boxes available to add this user information in the contact area. But we can add a snippet in the functions.php file to create new input boxes so the user can enter this social media information.

Add Social Media Profile Box To User Profile

Copy the below into your functions.php file to add input boxes for the user social media profiles.

/*===================================================================================
 * Add Author Links
 * =================================================================================*/
function add_to_author_profile( $contactmethods ) {
	
	$contactmethods['rss_url'] = 'RSS URL';
	$contactmethods['google_profile'] = 'Google Profile URL';
	$contactmethods['twitter_profile'] = 'Twitter Profile URL';
	$contactmethods['facebook_profile'] = 'Facebook Profile URL';
	$contactmethods['linkedin_profile'] = 'Linkedin Profile URL';
	
	return $contactmethods;
}
add_filter( 'user_contactmethods', 'add_to_author_profile', 10, 1);

Go back to your user profile and you will see new input boxes to add this information.

Now you will be able to access this data anywhere in your theme by using the get_the_author_meta() function.

Create Author Bio After Content

If your user has filled out all the information on the profile page you will have enough information to create a author bio area under all the posts they create.

This will be done in your single.php file as we want it to appear after all posts.

Find the function the_content() all of the author information will go in after this point.

In the author area we want to include:

  • Author Name
  • Author Image
  • Author bio
  • Author's Website
  • Author's Social media profile

Author Name

To display the author name we have a choice between using 3 WordPress functions:

For this tutorial we are going to use the function the_author_link() so it will be a link back to the users website.

Author Image

We are going to use the author gravatar as the author image this is so if we change the image in the future all the previous post images will change too.

To add the author gravatar we can use the WordPress function get_avatar( $email, $size). This takes 2 arguments an email address and a size.

We need to get the author email address by using the WordPress function get_the_author_meta( 'email' ).

<?php echo get_avatar( get_the_author_meta('email') , 90 ); ?>

Author bio

The author Bio is the description of the author we get to this content by using the get_the_author_meta( $meta ).

get_the_author_meta('description');

Author's Website

To get the website of the author we use the same function again but ask for the user website by using get_the_author_meta( $meta ).

get_the_author_meta('user_url');

Author's Social media profile

The social media profiles is the new content we added which isn't in WordPress by default but we still access it the same way as above and we can use the get_the_author_meta() function.

With this data we are going to do something different, we are going to create a list of all these profiles so we can display them next to each other, so we need to check if this content is set before we add it to the page.

See the below snippet to see how we get this data.

<ul class="icons">
	<?php 
		$rss_url = get_the_author_meta( 'rss_url' );
		if ( $rss_url && $rss_url != '' ) {
			echo '<li class="rss"><a href="' . esc_url($rss_url) . '"></a></li>';
		}
						
		$google_profile = get_the_author_meta( 'google_profile' );
		if ( $google_profile && $google_profile != '' ) {
			echo '<li class="google"><a href="' . esc_url($google_profile) . '" rel="author"></a></li>';
		}
						
		$twitter_profile = get_the_author_meta( 'twitter_profile' );
		if ( $twitter_profile && $twitter_profile != '' ) {
			echo '<li class="twitter"><a href="' . esc_url($twitter_profile) . '"</a></li>';
		}
						
		$facebook_profile = get_the_author_meta( 'facebook_profile' );
		if ( $facebook_profile && $facebook_profile != '' ) {
			echo '<li class="facebook"><a href="' . esc_url($facebook_profile) . '"></a></li>';
		}
						
		$linkedin_profile = get_the_author_meta( 'linkedin_profile' );
		if ( $linkedin_profile && $linkedin_profile != '' ) {
		       echo '<li class="linkedin"><a href="' . esc_url($linkedin_profile) . '"></a></li>';
		}
	?>
</ul>

Full Author Bio Code

Now that we know how to get all this data we can put them all together to create the Author bio area, place the below code just after the function the_content() in your single.php file.

<!--BEGIN .author-bio-->
<div class="author-bio">
			<?php echo get_avatar( get_the_author_meta('email'), '90' ); ?>
			<div class="author-info">
				<h3 class="author-title">Written by <?php the_author_link(); ?></h3>
				<p class="author-description"><?php the_author_meta('description'); ?></p>
				<p>Website: <a href="<?php the_author_meta('user_url');?>"><?php the_author_meta('user_url');?></a></p>
				<ul class="icons">
					<?php 
						$rss_url = get_the_author_meta( 'rss_url' );
						if ( $rss_url && $rss_url != '' ) {
							echo '<li class="rss"><a href="' . esc_url($rss_url) . '"></a></li>';
						}
						
						$google_profile = get_the_author_meta( 'google_profile' );
						if ( $google_profile && $google_profile != '' ) {
							echo '<li class="google"><a href="' . esc_url($google_profile) . '" rel="author"></a></li>';
						}
						
						$twitter_profile = get_the_author_meta( 'twitter_profile' );
						if ( $twitter_profile && $twitter_profile != '' ) {
							echo '<li class="twitter"><a href="' . esc_url($twitter_profile) . '"</a></li>';
						}
						
						$facebook_profile = get_the_author_meta( 'facebook_profile' );
						if ( $facebook_profile && $facebook_profile != '' ) {
							echo '<li class="facebook"><a href="' . esc_url($facebook_profile) . '"></a></li>';
						}
						
						$linkedin_profile = get_the_author_meta( 'linkedin_profile' );
						if ( $linkedin_profile && $linkedin_profile != '' ) {
							echo '<li class="linkedin"><a href="' . esc_url($linkedin_profile) . '"></a></li>';
						}
					?>
				</ul>
			</div>
<!--END .author-bio-->
</div>

Advertise here

Comment