Styling information about the author of a post at the end of this

Usually find sites where the end of the post is a box with information about the author: his image ( Gravatar ), your name, a small ... as well as biographical information, for example, the number of items that this author has published on the website .

Today we will see how to display all this and provide some CSS styles to help us create our own.

Marcelo wrote some time ago on the key tag that will bring us information from the database, ie the display of information about the author can edit the WordPress Administration once we are registered on the site, and where we can The fields of "Biography", "URL", "Gravatar", e-mail, etc.

Today we will try as part of the CSS to take the set into a structure that is easily modified. Let's begin:

 <div id="info-autor">
	 <div id="imagen-autor">
		 <a href="**Web of Autor**"> Author Gravatar ** ** </ a>
	 </ Div>
	 <div id="bio-del-autor">
		 Written by <a <h4> href="**Web of Autor**"> ** ** Author's Name </ a> </ h4>
		 Author Description <p> ** ** </ p>
	 </ Div>
 </ Div ><!-- Author Info ->

In the code we see the different elements that we transform into PHP to be effective.

Let us add the PHP as necessary:

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

And now prepare CSS will format the final result:

 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; ) div # author-info div # author-image (float: left; margin: 0 10px 5px 0; border: 5px solid # DCDCE1;) 

As simple as that.

Let's review all the PHP tags that we used:

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

Used to extract several pieces of information about the user (author).

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

Allows you to remove the image of the author, depending on the Gravatar associated to your email account (which must match that recorded in WordPress).

 <? Php the_author_link ();?>

Print the name of the author, automatically linked to your website (which has indicated in his profile).

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

Displays the main biographical information.

We hope that you use all these tricks and some great sites you think multi-author with WordPress.